.hero-portal{
    min-height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    padding:var(--space-2p75rem) var(--space-1p25rem) var(--space-2rem);
    background-image:
      linear-gradient(180deg,rgba(11,19,41,.62) 0%,rgba(11,19,41,.5) 45%,rgba(11,19,41,.88) 100%),
      url('/assets/portal/hero-glade-mobile.webp');
    background-size:cover;background-position:center 30%;background-repeat:no-repeat;
  }
  @media(min-width:767px){
    .hero-portal{background-image:
      linear-gradient(180deg,rgba(11,19,41,.6) 0%,rgba(11,19,41,.48) 45%,rgba(11,19,41,.86) 100%),
      url('/assets/portal/hero-glade-desktop.webp');
      background-position:center 22%}
  }

    .hero-portal .inner{width:100%;text-align:center}
  .hp-mantra{margin:var(--space-1p1rem) 0 0;font-family:"Amiri",Georgia,serif;font-style:italic;
    font-size:var(--text-1p1rem);color:var(--starlight);opacity:.92}
  .btn-sing{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;
    gap:var(--space-p55rem);margin:var(--space-1p3rem) auto 0;padding:var(--space-p95rem) var(--space-2p2rem);
    border:none;border-radius:var(--radius-999px);
    cursor:pointer;font:inherit;font-weight:700;font-size:var(--text-1p05rem);letter-spacing:.03em;
    color:var(--nightdeep);
    background:linear-gradient(180deg,var(--gradient-firefly-core) 0%,var(--gold) 55%,#a97c45 100%);
    box-shadow:0 0 0 var(--border-1px) rgba(199,154,99,.6),0 var(--radius-20px) 46px -18px rgba(199,154,99,.75),0 0 var(--shadow-offset-30px) rgba(199,154,99,.4);
    transition:transform .2s ease,box-shadow .2s ease}
  .btn-sing:hover{transform:translateY(var(--size-neg2px)) scale(1.02)}
  .btn-sing:disabled{cursor:default}
  .hero-portal.is-singing .btn-sing{opacity:.75;box-shadow:none}
  .hp-skip{display:inline-block;margin-top:var(--space-1p1rem);font-size:var(--text-p85rem);
    color:rgba(244,247,255,.72);text-decoration:none;border-bottom:var(--border-1px) solid rgba(244,247,255,.3)}
  .hp-skip:hover{color:var(--starlight);border-color:var(--gold)}

    .hp-stage{position:relative;width:100%;max-width:var(--container-44rem);margin:var(--space-1p6rem) 0;
    display:flex;align-items:flex-end;justify-content:center;min-height:18rem;pointer-events:none}
  .hp-figure{position:relative;z-index:2;height:clamp(var(--size-16rem),44vh,28rem);width:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
    filter:drop-shadow(0 0 28px rgba(199,154,99,.26));animation:hp-sway 9s ease-in-out infinite}
  @keyframes hp-sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .hp-halo{position:absolute;left:50%;bottom:8%;width:60vw;max-width:30rem;height:55%;
    transform:translateX(-50%);border-radius:50%;
    background:radial-gradient(closest-side,rgba(199,154,99,.36) 0%,rgba(127,188,182,.18) 42%,rgba(127,188,182,0) 72%);
    filter:blur(var(--border-2px));animation:hp-breathe 7s ease-in-out infinite}
  @keyframes hp-breathe{0%,100%{opacity:.6;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}

  .hp-notes{position:absolute;inset:auto 0 6% 0;height:55%;z-index:1}
  .hp-notes span{position:absolute;bottom:0;font-family:"Amiri",Georgia,serif;color:var(--gold);
    font-size:1.15rem;opacity:0;animation:hp-rise 9s ease-in infinite}
  .hp-notes span:nth-child(1){left:30%;animation-delay:.4s}
  .hp-notes span:nth-child(2){left:52%;font-size:var(--text-p9rem);animation-delay:3.6s}
  .hp-notes span:nth-child(3){left:66%;animation-delay:6.4s}
  .hp-notes span:nth-child(4){left:42%;font-size:var(--space-1rem);animation-delay:1.9s}
  @keyframes hp-rise{0%{opacity:0;transform:translateY(0) rotate(-4deg)}14%{opacity:.8}70%{opacity:.45}
    100%{opacity:0;transform:translateY(-12rem) rotate(6deg)}}

  .hp-ambient{position:absolute;inset:0;z-index:1}
  .hp-mote{position:absolute;width:var(--size-5px);height:var(--size-5px);border-radius:50%;
    background:radial-gradient(circle,var(--gradient-firefly-core) 0%,var(--gold) 46%,rgba(199,154,99,0) 72%);
    opacity:0;animation:hp-drift 16s ease-in-out infinite}
  @keyframes hp-drift{0%{transform:translate(0,0) scale(.7);opacity:0}10%{opacity:.85}
    50%{transform:translate(18px,-56px) scale(1.02);opacity:.5}90%{opacity:.65}
    100%{transform:translate(-12px,-110px) scale(.6);opacity:0}}
  .hp-mote:nth-child(1){left:12%;bottom:12%;animation-delay:0s}
  .hp-mote:nth-child(2){left:22%;bottom:28%;animation-delay:2.6s}
  .hp-mote:nth-child(3){left:74%;bottom:16%;animation-delay:5.1s}
  .hp-mote:nth-child(4){left:82%;bottom:32%;animation-delay:1.4s}

    .lily-anchors{position:absolute;inset:0;z-index:1;pointer-events:none}
  .lily-anchor{position:absolute;width:var(--space-2p2rem);height:var(--space-2p2rem);
    margin:-1.1rem 0 0 -1.1rem;
    border-radius:50%;opacity:0;transform:scale(.55);filter:blur(var(--border-1px));
    background:radial-gradient(circle,rgba(180,225,255,.5) 0%,rgba(110,170,255,.28) 44%,rgba(110,170,255,0) 74%)}
  .lily-anchor:nth-of-type(1){left:10%;top:80%}
  .lily-anchor:nth-of-type(2){left:24%;top:68%}
  .lily-anchor:nth-of-type(3){left:46%;top:82%}
  .lily-anchor:nth-of-type(4){left:64%;top:79%}
  .lily-anchor:nth-of-type(5){left:80%;top:69%}
  .lily-anchor:nth-of-type(6){left:92%;top:79%}
  .lily-anchor.is-active{animation:hp-lily-shimmer 2s ease-out 1}
  @keyframes hp-lily-shimmer{0%{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(1.2)}
    60%{opacity:.7;transform:scale(1.05)}100%{opacity:0;transform:scale(1.3)}}
  .companion-trails{position:absolute;inset:0;z-index:2;pointer-events:none}
  .c-trail{position:absolute;left:0;top:0;width:var(--size-5px);height:var(--size-5px);border-radius:50%;
    background:radial-gradient(circle,#eafcff 0%,#7fd6ff 45%,rgba(127,214,255,0) 75%);opacity:0}
  .companion{position:absolute;left:0;top:0;width:2.7rem;height:var(--space-2rem);z-index:3;
    pointer-events:none;will-change:transform;opacity:0;transition:opacity .5s ease}
  .companion.is-ready{opacity:1}
  .c-wing{position:absolute;top:0;width:var(--space-1p3rem);height:1.9rem;overflow:visible}
  .c-wing svg{display:block;width:100%;height:100%;
    filter:drop-shadow(0 0 var(--focus-3px) rgba(79,179,255,.5)) drop-shadow(0 0 7px rgba(79,179,255,.3))}
  .c-wing.l{left:0;transform-origin:100% 55%;animation:hp-c-flap .46s ease-in-out infinite}
  .c-wing.r{right:0;transform-origin:0% 55%;animation:hp-c-flap .46s ease-in-out infinite .05s}
  .c-wing.r svg{transform:scaleX(-1)}
  @keyframes hp-c-flap{0%,100%{transform:scaleX(1) skewY(0deg)}50%{transform:scaleX(.3) skewY(8deg)}}
  .companion.is-rest .c-wing{animation-duration:2.4s}
  .c-body{position:absolute;left:50%;top:var(--border-1px);width:var(--focus-3px);height:var(--space-1rem);
    transform:translateX(-50%);
    border-radius:var(--focus-3px);background:linear-gradient(180deg,#171b45,var(--nightdeep))}

    .hp-aura{position:absolute;left:50%;bottom:14%;width:40vw;max-width:22rem;height:46%;
    transform:translateX(-50%) scale(.5);border-radius:50%;overflow:hidden;mix-blend-mode:screen;
    opacity:0;filter:blur(6px);pointer-events:none;z-index:1;
    animation:hp-aura-in 4.2s cubic-bezier(.16,.8,.3,1) 1.5s forwards;animation-play-state:paused}
  .hero-portal.is-singing .hp-aura{animation-play-state:running}
  @keyframes hp-aura-in{0%{opacity:0;transform:translateX(-50%) scale(.5)}60%{opacity:.45}
    100%{opacity:.72;transform:translateX(-50%) scale(1)}}

  .vortex{position:absolute;left:50%;top:42%;z-index:0;pointer-events:auto;
    width:clamp(15rem,50vw,30rem);
    height:clamp(15rem,50vw,30rem);transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--starlight);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .vortex:focus-visible{outline:var(--focus-3px) solid var(--gold);outline-offset:var(--radius-8px);border-radius:50%}
  .vortex-grow{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    transform:scale(.16);opacity:.3;filter:blur(var(--border-2px));will-change:transform,opacity;
    animation:hp-vx-ignite 4.2s cubic-bezier(.16,.8,.3,1) 1.5s forwards,
              hp-vx-pulse 5.5s ease-in-out 5.7s infinite;animation-play-state:paused}
  .hero-portal.is-singing .vortex-grow{animation-play-state:running}
  @keyframes hp-vx-ignite{0%{transform:scale(.14);opacity:0;filter:blur(4px)}22%{opacity:.85}
    60%{opacity:1;filter:blur(0)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
  @keyframes hp-vx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  .vortex-ring{position:absolute;inset:0;border-radius:50%;will-change:transform;
    -webkit-mask-image:radial-gradient(closest-side,transparent 56%,#000 60%,#000 92%,transparent 96%);
    mask-image:radial-gradient(closest-side,transparent 56%,#000 60%,#000 92%,transparent 96%);
    animation-play-state:paused}
  .hero-portal.is-singing .vortex-ring{animation-play-state:running}
  .vortex-ring.r1{background:conic-gradient(from 0deg,rgba(199,154,99,.05),var(--gold),rgba(244,247,255,.9),var(--teal),rgba(199,154,99,.05));
    animation:hp-vx-spin 7s linear infinite}
  .vortex-ring.r2{inset:12%;-webkit-mask-image:radial-gradient(closest-side,transparent 48%,#000 54%,#000 90%,transparent 96%);
    mask-image:radial-gradient(closest-side,transparent 48%,#000 54%,#000 90%,transparent 96%);
    background:conic-gradient(from 180deg,rgba(127,188,182,.1),var(--teal),rgba(244,247,255,.8),var(--gold),rgba(127,188,182,.1));
    animation:hp-vx-spin 5s linear infinite reverse;opacity:.85}
  @keyframes hp-vx-spin{to{transform:rotate(360deg)}}
  .vortex-core{position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(circle,var(--pure-white) 0%,var(--gradient-firefly-core) 32%,var(--gold) 62%,rgba(199,154,99,0) 100%);
    filter:blur(var(--border-1px));box-shadow:0 0 var(--space-3rem) var(--space-p5rem) rgba(199,154,99,.5),0 0 6rem var(--space-1p2rem) rgba(127,188,182,.22);
    animation:hp-vx-core 2.6s ease-in-out infinite;animation-play-state:paused}
  .hero-portal.is-singing .vortex-core{animation-play-state:running}
  @keyframes hp-vx-core{0%,100%{opacity:.82;transform:translate(-50%,-50%) scale(.94)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
  .vortex-prompt{position:absolute;bottom:-2rem;left:50%;transform:translateX(-50%);
    font-size:var(--space-p75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--starlight);
    white-space:nowrap;text-shadow:0 var(--border-2px) var(--radius-10px) rgba(11,19,41,.7);opacity:.55}

  .hp-emit{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;width:0;height:0}
  .hp-emit i{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
  .hp-spark{width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle,var(--pure-white) 0%,rgba(255,242,200,.95) 42%,rgba(199,154,99,0) 74%);
    animation:hp-spark-out 3.6s ease-out infinite;animation-play-state:paused}
  .hero-portal.is-singing .hp-spark{animation-play-state:running}
  @keyframes hp-spark-out{0%{opacity:0;transform:translate(0,0) scale(.2)}14%{opacity:1}70%{opacity:.5}
    100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.5)}}
  .hp-spark.s1{--tx:-11rem;--ty:-8rem;animation-delay:5.7s}
  .hp-spark.s2{--tx:10rem;--ty:-9rem;animation-delay:6.5s}
  .hp-spark.s3{--tx:-12rem;--ty:var(--space-2rem);animation-delay:7.2s}
  .hp-spark.s4{--tx:var(--size-12rem);--ty:var(--space-1rem);animation-delay:6.1s}
  .hp-heart{font-size:var(--text-1p05rem);line-height:1;color:#e98fb0;
    text-shadow:0 0 var(--radius-12px) rgba(233,143,176,.7),0 0 var(--radius-4px) rgba(255,255,255,.5);
    animation:hp-heart-out 5.6s ease-in-out infinite;animation-play-state:paused}
  .hero-portal.is-singing .hp-heart{animation-play-state:running}
  @keyframes hp-heart-out{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(-8deg)}18%{opacity:.95}78%{opacity:.5}
    100%{opacity:0;transform:translate(var(--hx),var(--hy)) scale(1.05) rotate(6deg)}}
  .hp-heart.h1{--hx:-5rem;--hy:-13rem;animation-delay:6.2s}
  .hp-heart.h2{--hx:5rem;--hy:-14rem;animation-delay:7.4s}
  .hp-heart.h3{--hx:-1rem;--hy:-15rem;animation-delay:8.6s}

    .song-player{display:none;position:relative;z-index:3;width:100%;max-width:24rem;
    margin:var(--space-1rem) auto 0;padding:var(--space-1rem) var(--space-1p1rem) var(--space-1p2rem);border-radius:var(--space-1rem);
    background:rgba(11,19,41,.55);backdrop-filter:blur(6px);border:var(--border-1px) solid rgba(199,154,99,.45);
    box-shadow:0 0 0 var(--border-1px) rgba(199,154,99,.12),0 24px var(--shadow-offset-60px) var(--shadow-offset-neg30px) rgba(0,0,0,.7),0 0 44px rgba(199,154,99,.28)}
  .hero-portal.is-singing .song-player{display:block;animation:hp-song-rise 1.1s cubic-bezier(.16,.8,.3,1) .35s both}
  @keyframes hp-song-rise{0%{opacity:0;transform:translateY(2rem) scale(.94)}60%{opacity:1}
    100%{opacity:1;transform:translateY(0) scale(1)}}
  .song-player-title{margin:0 0 var(--space-p55rem);text-align:center;font-family:"Amiri",Georgia,serif;
    font-style:italic;font-size:var(--space-1rem);color:var(--starlight)}
  .song-player-title span{color:rgba(244,247,255,.75);font-size:.85em}
  .song-embed{border-radius:var(--space-p75rem);overflow:hidden;min-height:var(--size-152px);background:rgba(255,255,255,.04)}
  .song-embed iframe{display:block;border:0;width:100%;height:var(--size-152px)}
  .song-player-hint{margin:var(--space-p55rem) 0 0;text-align:center;font-size:var(--space-p8rem);color:rgba(244,247,255,.75)}
  .song-player-link{display:block;margin-top:var(--space-p3rem);text-align:center;font-size:var(--text-p82rem);
    color:var(--teal);text-decoration:none;border-bottom:var(--border-1px) solid transparent}
  .song-player-link:hover{border-color:var(--teal)}

  @media(min-width:768px){
    .hero-portal{padding:var(--space-3rem) var(--space-2rem) var(--space-2p75rem)}
    .hp-figure{height:clamp(20rem,50vh,32rem)}
    .vortex{width:clamp(18rem,44vw,var(--container-34rem));height:clamp(18rem,44vw,var(--container-34rem))}
  }

    @media(prefers-reduced-motion:reduce){
    .hp-figure,.hp-halo{animation:none}
    .hp-halo{opacity:.75}
    .hp-ambient,.hp-notes,.lily-anchors,.companion-trails{display:none}
    .companion{opacity:1;left:10%;top:80%;margin:-1.1rem 0 0 -1.35rem;transform:none!important}
    .c-wing{animation-duration:2.8s!important}
    .vortex,.hp-aura,.hp-emit{display:none}
    .hero-portal.is-singing .vortex{display:flex}
    .hero-portal.is-singing .vortex-grow{animation:none;transform:scale(1);opacity:1;filter:none}
    .hero-portal.is-singing .vortex-ring,.hero-portal.is-singing .vortex-core{animation:none}
    .hero-portal.is-singing .song-player{animation:none;opacity:1;transform:none}
  }