/* ─────────────────────────────────────────────────────────────
   STAGE 1 · SUMMIT (home screen)
   Everything inside .hero__stage and .hcopy is placed in the
   painting's own 1456 x 819 coordinates, so it lines up with the art.
   ───────────────────────────────────────────────────────────── */
.hero { isolation: isolate; container-type: size; background: #140a2e; }
.hero__stage, .hcopy { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.8cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); }
.scene { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * -.9%), calc(var(--my, 0) * -.7%), 0) scale(1.045); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.art { position: absolute; inset: 0; background: #1a0d3c url("../../assets/img/hero-painting.webp") center/100% 100% no-repeat; animation: artIn 2.8s cubic-bezier(.2,.7,.1,1) both; }
@keyframes artIn { from { transform: scale(1.1); filter: brightness(.25) saturate(.5) blur(8px); } to { transform: none; filter: none; } }
#sparkles, .fx, .clouds { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.clouds { animation: fadeIn 3s 1.2s both; }
.living { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: artIn 2.8s cubic-bezier(.2,.7,.1,1) both; }
.living.on { opacity: 1; }
.peaks { position: absolute; left: 0; top: 21.978%; width: 100%; height: 48.23%; max-width: none; pointer-events: none; animation: artIn 2.8s cubic-bezier(.2,.7,.1,1) both; transform-origin: 50% 58.1%; }
.no-gl .clouds, .no-gl .peaks { display: none; }

/* SVG details over the painting */
.fx { overflow: visible; }
.fx .halo { fill: none; stroke: #fff1c9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 46 1400; animation: haloRun 7s linear infinite; filter: url(#glow); }
@keyframes haloRun { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1446; } }
.fx .trail { fill: none; stroke: #ffe6a8; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 3 16; animation: trailRun 2.4s linear infinite; filter: url(#glow); opacity: .95; }
@keyframes trailRun { to { stroke-dashoffset: 38; } }
.fx .beam { animation: fxBeam 4s ease-in-out infinite; }
@keyframes fxBeam { 50% { opacity: .45; } }
.fx .pulse { animation: pulse 5s ease-in-out infinite; }
.fx .pulse.b { animation-delay: -2.5s; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.fx .glint { animation: glintPop 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fx .glint.d1 { animation-delay: -1.2s; } .fx .glint.d2 { animation-delay: -2.4s; }
@keyframes glintPop { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
.fx .peacock { animation: hue 6s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }

.summit-star { position: absolute; left: 50.07%; top: 15.87%; width: 15cqw; height: 15cqw; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; }
.summit-star .core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,228,.95) 0 2%, rgba(255,214,140,.55) 6%, rgba(255,150,200,.16) 22%, transparent 50%); animation: breathe 3.4s ease-in-out infinite; }
.summit-star .rays { position: absolute; inset: 18%; animation: spin 40s linear infinite; }
.summit-star .rays::before, .summit-star .rays::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.summit-star .rays::before { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #fff7da 50%, transparent); }
.summit-star .rays::after { width: 2px; height: 100%; background: linear-gradient(transparent, #fff7da 50%, transparent); }
.summit-star .rays.x { inset: 30%; transform: rotate(45deg); animation: spin2 40s linear infinite; opacity: .7; }
@keyframes spin2 { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

.fog { display: none; position: absolute; left: -20%; width: 140%; pointer-events: none; mix-blend-mode: screen; filter: blur(18px); }
.fog.c { display: block; top: 84%; height: 12%; background: radial-gradient(45% 60% at 50% 50%, rgba(240,190,255,.28), transparent 70%); animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* text layer */
.hcopy { z-index: 2; container-type: size; pointer-events: none; transform: translate(calc(-50% + var(--mx, 0) * .35%), calc(-50% + var(--my, 0) * .3%)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hcopy > * { position: absolute; left: 50.1%; transform: translateX(-50%); pointer-events: auto; margin: 0; white-space: nowrap; }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 40%); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes fadeUpM { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }

.orn { top: 27.6%; width: 17.6cqw; display: flex; align-items: center; gap: 1cqw; color: var(--gold); animation: fadeUp 1s .9s both; }
.orn i { flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold) 70%); transform-origin: right; animation: lineIn 1.2s 1s both; }
.orn i:last-child { transform: scaleX(-1); transform-origin: left; animation-name: lineIn2; }
@keyframes lineIn { from { transform: scaleX(0); } }
@keyframes lineIn2 { from { transform: scaleX(0); } to { transform: scaleX(-1); } }
.orn svg { width: 2.2cqw; height: 2.2cqw; flex: none; filter: drop-shadow(0 0 6px rgba(233,189,103,.7)); }

.kick { top: 31.4%; font: italic 700 1.2cqw/1 var(--f-ui); letter-spacing: .26em; color: #fff1cf; padding: .55cqw 1.6cqw .55cqw 1.9cqw; background: linear-gradient(90deg, transparent, rgba(43,13,82,.75) 18%, rgba(43,13,82,.75) 82%, transparent); clip-path: polygon(1cqw 0, 100% 0, calc(100% - 1cqw) 100%, 0 100%); text-shadow: 0 0 1cqw rgba(233,189,103,.55), 0 2px 6px rgba(12,5,30,.9); animation: fadeUp 1s 1s both; }

/* the big eye */
.hero-eye { top: 36.2%; width: 19.5cqw; margin: 0; line-height: 0; }
.hero-eye .eye { display: block; animation: eyeIn 1.1s 1.1s cubic-bezier(.3,1.25,.5,1) both; }
.hero-eye .eye img { width: 100% !important; clip-path: inset(-30% -30% -30% -30%); animation: eyeGlowBig 3.6s ease-in-out infinite, eyeFloat 5s 2.4s ease-in-out infinite; }
.hero-eye .eye.blink img { clip-path: inset(48% -30% 48% -30%); }
.hero-eye .eye::before { display: none; }
.hero-eye .eye::after { height: .32cqw; margin-top: -.16cqw; box-shadow: 0 0 1.4cqw #e9bd67, 0 0 .5cqw #fff; }
@keyframes eyeIn { 0% { clip-path: inset(50% -40% 50% -40%); transform: scale(.6); filter: brightness(3); } 60% { clip-path: inset(-40%); transform: scale(1.06); filter: brightness(1.4); } 100% { clip-path: inset(-40%); transform: none; filter: none; } }
@keyframes eyeGlowBig { 0%, 100% { filter: drop-shadow(0 .35cqw 0 rgba(28,8,56,.85)) drop-shadow(0 0 1.2cqw rgba(255,95,168,.45)); } 50% { filter: drop-shadow(0 .35cqw 0 rgba(28,8,56,.85)) drop-shadow(0 0 2.6cqw rgba(255,95,168,.85)) drop-shadow(0 0 1cqw rgba(255,214,140,.5)); } }
@keyframes eyeFloat { 50% { transform: translateY(-4%); } }
.hero-eye .halo-ring { position: absolute; left: 50%; top: 50%; width: 132%; aspect-ratio: 1.85; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(255,214,140,.22), rgba(217,54,127,.12) 45%, transparent 68%); animation: haloPulse 3.6s ease-in-out infinite, fadeIn 1s 1.4s both; }
@keyframes haloPulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .7; } }
.hero-eye .lines { position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 2.2; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,200,0) 0deg 4deg, rgba(255,236,200,.5) 4.4deg 4.9deg, rgba(255,236,200,0) 5.3deg 9deg);
  -webkit-mask: radial-gradient(ellipse, transparent 24%, #000 30%, transparent 70%); mask: radial-gradient(ellipse, transparent 24%, #000 30%, transparent 70%); opacity: 0; animation: lines 1.4s 1.6s ease-out both; }
@keyframes lines { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.hero-eye .sheen2 { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--eye-big) center/100% 100% no-repeat; mask: var(--eye-big) center/100% 100% no-repeat; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: sheenEye 5.5s 3.2s ease-in-out infinite; transition: clip-path .26s cubic-bezier(.45,0,.55,1); }
.hero-eye .eye.blink .sheen2 { clip-path: inset(48% 0 48% 0); }
@keyframes sheenEye { 0% { background-position: 150% 0; } 30%, 100% { background-position: -50% 0; } }
.tw { position: absolute; width: 4%; aspect-ratio: 1; pointer-events: none; opacity: 0; animation: twk 3.2s ease-in-out infinite;
  background: conic-gradient(from 45deg, transparent 0 22%, #fff6d6 25%, transparent 28% 47%, #fff6d6 50%, transparent 53% 72%, #fff6d6 75%, transparent 78% 97%, #fff6d6 100%);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%); }
@keyframes twk { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 12% { opacity: 1; transform: scale(1) rotate(45deg); } 24% { opacity: 0; transform: scale(.4) rotate(90deg); } }

.tagl { top: 56.6%; font: italic 700 1.36cqw/1.36 var(--f-ui); letter-spacing: .1em; text-align: center; color: #fff7e8; text-shadow: 0 .14cqw 0 #1c0838, 0 0 .5cqw rgba(16,5,36,.95), 0 0 1.4cqw rgba(16,5,36,.8); padding: .5cqw 2.4cqw; background: radial-gradient(ellipse at center, rgba(20,7,44,.62), rgba(20,7,44,0) 72%); animation: fadeUp 1s 1.8s both; }
.tagl .w { display: inline-block; animation: wIn .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes wIn { from { opacity: 0; transform: translateY(60%) skewX(-12deg); } }

/* BEGIN THE ASCENT */
.cta2 { top: 64%; width: 23.6cqw; height: 7.3cqh; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff8ec; font: italic 800 1.42cqw/1 var(--f-ui); letter-spacing: .08em; text-shadow: 0 2px 0 rgba(60,4,24,.8), 0 0 12px rgba(255,200,150,.45); animation: fadeUp 1s 2.1s both; transition: filter .3s; }
.cta2 > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; filter: drop-shadow(0 0 1.2cqw rgba(217,54,127,.55)); }
.cta2 .run { fill: none; stroke: #fff6d8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 40 760; animation: runB 4s linear infinite; filter: drop-shadow(0 0 4px #ffe2a0); }
@keyframes runB { to { stroke-dashoffset: -800; } }
.cta2 .dia { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; color: var(--gold-soft); font-size: .75em; display: inline-block; animation: diaSpin 3s ease-in-out infinite; }
.cta2 .dia.l { left: 6%; } .cta2 .dia.r { right: 6%; animation-delay: -1.5s; }
@keyframes diaSpin { 50% { transform: rotate(180deg) scale(1.25); text-shadow: 0 0 10px #fff2c0; } }
.cta2 .lbl { position: relative; display: inline-block; line-height: 1; animation: lblPulse 3.4s 3.4s ease-in-out infinite; }
@keyframes lblPulse { 50% { text-shadow: 0 2px 0 rgba(60,4,24,.8), 0 0 18px rgba(255,220,170,.85); } }
.cta2 .arr { position: absolute; left: 100%; top: 0; margin-left: .4em; font-size: .9em; transition: transform .3s; display: inline-block; }
.cta2 .sheen { position: absolute; inset: 8% 6%; overflow: hidden; border-radius: 999px; z-index: -1; }
.cta2 .sheen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,236,200,.35) 50%, transparent 70%); transform: translateX(-130%); animation: sweep 4s ease-in-out 3.4s infinite; }
.cta2:hover { filter: brightness(1.12); }
.cta2:hover .arr { transform: translateX(.35em); }
.cta2:hover .dia { animation-duration: .9s; }
.cta2:active { transform: translateX(-50%) scale(.97); }

.explore { top: 72.3%; font: italic 800 1.08cqw/1 var(--f-ui); letter-spacing: .15em; text-shadow: 0 .12cqw 0 #1c0838, 0 0 .5cqw rgba(16,5,36,.95); text-decoration: none; color: var(--ivory); padding: .6cqw .3cqw; animation: fadeUp 1s 2.3s both; }
.explore::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent); }
.explore:hover { color: var(--gold-soft); }

/* right-hand pillar words */
.pillars { position: absolute; right: max(40px, env(safe-area-inset-right, 0px)); top: clamp(110px, 16%, 150px); z-index: 3; display: grid; justify-items: end; gap: 14px; padding-right: 18px; animation: railIn2 1.2s 2.5s both; }
@keyframes railIn2 { from { opacity: 0; transform: translateX(20px); } }
.pillars::before { content: ""; position: absolute; right: 0; top: 34px; bottom: -14px; width: 1.5px; background: linear-gradient(rgba(233,189,103,.85), rgba(233,189,103,.15)); }
.pillars svg { width: 26px; height: 26px; margin-right: -30px; margin-bottom: 6px; color: var(--gold-soft); filter: drop-shadow(0 0 6px var(--gold)); animation: spin 30s linear infinite; }
.pillars span { font: italic 700 .78rem/1 var(--f-ui); letter-spacing: .22em; color: var(--ivory); opacity: .85; transition: all .6s; text-shadow: 0 1px 8px rgba(12,5,30,.9); }
.pillars span.on { opacity: 1; color: var(--gold-soft); text-shadow: 0 0 12px var(--gold); }

.scroll-cue { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; width: 22px; height: 34px; border: 1.5px solid rgba(245,220,164,.6); border-radius: 12px; background: none; padding: 0; cursor: pointer; animation: fadeIn 1s 3s both; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--gold-soft); transform: translateX(-50%); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 60% { transform: translate(-50%, 9px); opacity: 0; } }

@media (max-width: 1100px), (max-height: 620px) { .pillars { display: none; } }

/* phones and tall windows: keep the painting as the backdrop, stack the text */
@container (max-aspect-ratio: 5/4) {
  .hcopy { left: 0; top: 0; width: 100%; height: 100%; transform: none; container-type: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 90px; padding-bottom: 120px; gap: 12px; padding-left: var(--gut-l); padding-right: var(--gut-r); }
  .hcopy > * { position: relative; left: auto; top: auto; transform: none; }
  .orn { width: min(240px, 62%); gap: 10px; } .orn svg { width: 26px; height: 26px; }
  .kick { font-size: .78rem; letter-spacing: .24em; padding: 7px 18px 7px 22px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .hero-eye { width: min(66vw, 330px); margin: 10px 0 8px; }
  .hero-eye .eye::after { height: 3px; margin-top: -1.5px; }
  .tagl { font-size: .82rem; letter-spacing: .08em; white-space: normal; padding: 6px 14px; text-shadow: 0 2px 0 #1c0838, 0 0 6px rgba(16,5,36,.95), 0 0 14px rgba(16,5,36,.8); }
  .cta2 { width: min(340px, 90%); height: 62px; font-size: 1rem; margin-top: 10px; }
  .cta2 > svg { filter: drop-shadow(0 0 14px rgba(217,54,127,.55)); }
  .cta2:active { transform: scale(.97); }
  .explore { font-size: .8rem; padding: 8px 4px; }
  .orn, .kick, .tagl, .cta2, .explore { animation-name: fadeUpM; }
}