/* top page only (index.html): hero, sections, place cards. Loaded after site.css. */
/* ===== hero shell ===== */
.hero{
  --avail:calc(50vw - max(100vw,160vh) * .0825 - var(--pad) - 24px);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:calc(var(--hdr-h) + env(safe-area-inset-top));
  background:linear-gradient(180deg,#a9def0 0%,#cfeaf0 30%,#ffe3bf 62%,#f4e3ec 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,250,240,.46) 0,rgba(255,250,240,.24) 30%,rgba(255,250,240,0) 52%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--space-xl);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,241,232,0),var(--paper));
}

/* ===== art ===== */
.art{position:absolute;inset:0;z-index:0;overflow:hidden}
.art__in{
  position:absolute;inset:0;transform-origin:72% 62%;
  animation:focusIn 1.5s cubic-bezier(.2,.7,.2,1) .05s backwards,
            dolly 40s cubic-bezier(.3,.1,.3,1) 1.6s forwards;
}
.stage{
  --ar:1.6;--fx:.5;
  --sw:max(100%,calc(100vh * var(--ar)));
  position:absolute;bottom:0;
  width:var(--sw);aspect-ratio:var(--ar);
  left:clamp(calc(100% - var(--sw)),calc(50% - var(--sw) * var(--fx)),0px);
}
@supports (height:100svh){
  .stage{--sw:max(100%,calc(100svh * var(--ar)))}
}
.stage img,.ov{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.stage img{object-fit:cover;-webkit-user-select:none;user-select:none}
.ov{pointer-events:none}
.ov--tall{display:none}
.defs{position:absolute;width:0;height:0}

@keyframes focusIn{
  from{filter:blur(12px) saturate(.78) brightness(.96);transform:scale(1.06)}
  to{filter:blur(0) saturate(1) brightness(1);transform:scale(1)}
}
@keyframes dolly{from{transform:scale(1)}to{transform:scale(1.035)}}

/* scene gating: ambient + intro wait for the picture */
.js:not(.go) .art__in,
.js:not(.go) .art__in *{animation-play-state:paused}

/* lens overlays */
.dawn{opacity:0;animation:dawn 2.2s ease-out .05s backwards}
@keyframes dawn{from{opacity:.34}to{opacity:0}}

.glow{opacity:.75;animation:glowUp 2.4s ease-out .2s backwards,breathe 7s ease-in-out 2.6s infinite alternate}
@keyframes glowUp{from{opacity:0}to{opacity:.75}}
@keyframes breathe{from{opacity:.75}to{opacity:1}}

.rays{animation:raysIn 2.2s ease-out .7s backwards,sway 15s ease-in-out 2.9s infinite alternate}
@keyframes raysIn{from{opacity:0}to{opacity:1}}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}

.ringfade{animation:ringIn 1.5s cubic-bezier(.2,.7,.2,1) .9s backwards}
@keyframes ringIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.ring{animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.doorglow{opacity:.85;animation:doorIn 1.4s ease-out 1s backwards,doorBreathe 5.5s ease-in-out 2.4s infinite alternate}
@keyframes doorIn{from{opacity:0}to{opacity:.85}}
@keyframes doorBreathe{from{opacity:.85}to{opacity:1}}
.flash{opacity:0;animation:flash 1.9s ease-out 1.15s backwards}
@keyframes flash{
  0%{opacity:0;transform:scale(.5)}
  30%{opacity:.9}
  100%{opacity:0;transform:scale(1.2)}
}

.af{animation:lock 1.15s cubic-bezier(.2,.8,.2,1) .75s backwards}
@keyframes lock{
  0%{opacity:0;transform:scale(2.6)}
  50%{opacity:1;transform:scale(.9)}
  72%{transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}
}
.af__h,.af__l{fill:none;stroke-linecap:round;stroke-linejoin:round}
.af__h{stroke:#fff;stroke-opacity:.62;stroke-width:9}
.af__l{stroke:var(--coral);stroke-width:4.5}

.mote{opacity:0;animation:mote var(--t,9s) ease-in-out var(--d,0s) infinite}
@keyframes mote{
  0%{opacity:0;transform:translate(0,0)}
  18%{opacity:.95}
  80%{opacity:.7}
  100%{opacity:0;transform:translate(var(--dx,-60px),var(--dy,-100px))}
}
.leaf{opacity:0;animation:leaf var(--t,14s) ease-in-out var(--d,0s) infinite}
@keyframes leaf{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  10%{opacity:1}
  50%{transform:translate(calc(var(--lx) * .5),calc(var(--ly) * .22)) rotate(calc(var(--lr) * .5))}
  90%{opacity:1}
  100%{opacity:0;transform:translate(var(--lx),var(--ly)) rotate(var(--lr))}
}

/* ===== hero copy ===== */
.copy{
  position:relative;z-index:3;flex:1 1 auto;display:flex;align-items:center;
  padding:var(--space-l) var(--pad) clamp(var(--space-l),9vh,120px);
}
.copy__in{max-width:var(--avail)}
.h1{
  margin:0 0 var(--space-m);
  font-family:var(--serif);font-weight:800;
  font-size:clamp(30px,min(calc(var(--avail) / 8.2),7.8vh),96px);
  line-height:1.24;letter-spacing:.01em;font-feature-settings:"palt" 1;color:var(--ink);
}
.l{display:block;white-space:nowrap}
.l:nth-child(1){animation:rise .9s cubic-bezier(.2,.7,.2,1) .12s backwards}
.l:nth-child(2){animation:rise .9s cubic-bezier(.2,.7,.2,1) .26s backwards}
.f{
  background:linear-gradient(180deg,transparent 60%,rgba(255,200,98,.88) 60%,rgba(255,200,98,.88) 90%,transparent 90%);
  padding:0 .05em;margin:0 -.05em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.dot{font-style:normal;color:var(--coral)}
.lead{
  max-width:min(24em,var(--avail));
  font-size:18px;line-height:1.6;font-weight:500;color:var(--ink-2);
  animation:rise .85s cubic-bezier(.2,.7,.2,1) .46s backwards;
}
.actions{margin-top:var(--space-l);animation:rise .85s cubic-bezier(.2,.7,.2,1) .6s backwards}
.cta{
  display:inline-flex;align-items:center;gap:var(--space-s);
  min-height:56px;padding:0 8px 0 var(--space-m);border-radius:999px;
  background:var(--ink);color:var(--cream);text-decoration:none;
  font-size:18px;line-height:1;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  box-shadow:0 16px 30px -14px rgba(27,35,86,.62),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}
.cta__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--coral);transition:transform .25s ease}
.cta__ic svg{width:20px;height:20px;display:block}
.cta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(27,35,86,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
.cta:hover .cta__ic{transform:translateX(3px)}
.cta:focus-visible{border-radius:999px}
.facts{
  margin-top:var(--space-m);display:grid;gap:var(--space-xs);
  font-size:16px;line-height:1.5;font-weight:500;color:var(--ink-2);
  animation:rise .85s cubic-bezier(.2,.7,.2,1) .7s backwards;
}
.facts li{display:flex;align-items:center;gap:var(--space-xs)}
.facts svg{flex:none;width:16px;height:16px;display:block}

.cue{
  position:absolute;z-index:3;right:var(--pad);bottom:var(--space-l);
  display:flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-s) 0 20px;border-radius:999px;
  background:rgba(255,248,236,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:16px;line-height:1;font-weight:700;letter-spacing:.05em;color:var(--ink);text-decoration:none;
  animation:fade 1s ease 1.8s backwards;
}
.cue svg{width:16px;height:16px;display:block;animation:nudge 1.8s ease-in-out infinite}
.cue:focus-visible{border-radius:999px}
@keyframes nudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}

@keyframes rise{
  from{opacity:0;transform:translateY(14px);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* very wide screens: keep the picture whole, fade the edges */
@media (min-aspect-ratio:2/1){
  .hero{--avail:calc(160vh * .4175 - var(--pad) - 24px)}
  .stage{
    --sw:calc(100vh * var(--ar));
    left:calc(50% - var(--sw) / 2);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  }
  .hdr__in,.copy,.mega{
    padding-left:calc((100vw - 160vh) / 2 + var(--pad));
    padding-right:calc((100vw - 160vh) / 2 + var(--pad));
  }
  .cue{right:calc((100vw - 160vh) / 2 + var(--pad))}
  .wrap{max-width:none;padding-inline:calc((100vw - 160vh) / 2 + var(--pad))}
}
/* phones on their side */
@media (max-height:520px) and (min-aspect-ratio:91/100){
  .facts,.cue{display:none}
  .actions{margin-top:var(--space-m)}
}
/* portrait / stacked */
@media (max-aspect-ratio:9/10){
  .stage{--ar:.6;--fx:.6}
  .ov--wide{display:none}
  .ov--tall{display:block}
  .hero{background:linear-gradient(180deg,#b3e9f5 0%,#d8efee 32%,#ffe2bd 62%,#f0e4f0 100%)}
  .hero::before{display:none}
  .cue{display:none}
  .copy{align-items:flex-start;padding-top:var(--space-m);padding-bottom:0}
  .copy__in{max-width:none}
  .h1{font-size:clamp(30px,9.4vw,60px)}
  .lead{max-width:30em}
  .actions{margin-top:var(--space-m)}
}
@media (max-aspect-ratio:9/10){
  .hero .facts{display:none}
}
@media (max-aspect-ratio:9/10) and (max-height:600px){
  .lead{display:none}
}

/* ===== sections ===== */
.facts--below{display:none;animation:none}
@media (max-aspect-ratio:9/10){
  .intro{padding-top:var(--space-m)}
  .facts--below{display:grid;width:fit-content;margin-inline:auto}
}

/* reduced motion: the same picture, held still */
@media (prefers-reduced-motion:reduce){
  .mote,.leaf{display:none}
}