/* ============================================================
   MABA SUITEZ · REGISTER SCENE
   Pinned vertical parallax, then a horizontal hand-off to the form.

   Planes, back to front:
     sky.jpg       dusk backdrop, barely moves
     cloud.webp    two instances, different scale/speed/direction
     building.webp cut-out towers, grows and lifts
     logo / caption / hotspots

   Everything keys off --p (0 -> 1):
   The sequence is a camera DESCENT: scrolling down travels down the
   tower. It opens on both crowns against dusk sky — with a 6% lead
   so the frame isn't all empty sky — then descends past the facade
   and signage to the podium and trees, arriving at street level
   just as the horizontal hand-off to the form takes over.
   (It ran the other way first, which meant landing on the podium:
   the dullest frame in the render was the one you arrived at.)

     DESKTOP  js/scene.js accumulates wheel delta into a virtual
              progress, because the desktop scroller is horizontal
              and there is no vertical scroll to hang off. Once --p
              reaches 1, further wheel goes to the track and carries
              you across to the form.
     MOBILE   .sc-pin is a tall block with the scene sticky inside,
              so --p comes from ordinary vertical scroll.
   ============================================================ */

.sc-pin{position:relative;flex:0 0 auto;width:100vw}

.reg-scene{
  --p:0;
  --mx:0;
  --my:0;
  --gold:#C9A45E;
  --ease:cubic-bezier(.2,.7,.3,1);

  position:relative;width:100vw;height:100dvh;
  overflow:hidden;
  contain:layout paint;            /* don't let the scene dirty the track */
  background:#C9BCC8;

  /* how much taller the building plate is than the frame — that
     overflow IS the pan. max() keeps it sane on odd aspects. */
  --over:max(0px, calc(126.42vw - 100svh));
  /* start a little below the plate's top edge, so the opening frame
     holds the crowns rather than a wash of empty sky */
  --lead:min(7.6vw, var(--over));
}

.sc-layer{position:absolute;backface-visibility:hidden}
/* only the planes that actually move each frame get a permanent layer —
   will-change on everything just costs memory and can force extra
   compositing passes */
.sc-building,.sc-cloud{will-change:transform}

/* ---- arrival settle ----
   The loading page hands over to a scene that is otherwise perfectly
   still until the first scroll. A slow push-out gives it a pulse.
   Only the image planes move — the logo is excluded so the loader's
   hand-off can't be nudged off its mark. */
.sc-stage{position:absolute;inset:0}
.reg-scene.is-armed .sc-stage{
  animation:scArrive 2400ms cubic-bezier(.16,.7,.3,1) both;
  will-change:transform;
}
@keyframes scArrive{
  from{transform:scale(1.05)}
  to  {transform:scale(1);will-change:auto}
}

/* ---- sky: nearly still, a slow push in ---- */
.sc-sky{
  left:-4%;top:-4%;width:108%;height:108%;
  background:url(../img/sky.jpg) center 30%/cover no-repeat;
  transform:translate3d(calc(var(--mx) * 4px), calc(var(--p) * -3.5% + var(--my) * 3px),0);
}

/* ---- clouds: two passes, drifting down past the camera ----
   The plate carries the image's own 1024x435 aspect, so the wisps
   keep their shape — stretching one bitmap into a fixed-height box
   is what made them look smeared. Size is set by width alone. */
.sc-cloud{aspect-ratio:1024/435;opacity:.92}
.sc-cloud i{
  display:block;width:100%;height:100%;
  background:url(../img/cloud.webp) center/contain no-repeat;
}
.sc-cloud--far{
  left:-14%;width:82%;top:2%;opacity:.55;
  transform:translate3d(calc(var(--p) * -7vw + var(--mx) * 7px),
                        calc(var(--p) * -42vh + var(--my) * 5px),0)
            scale(calc(1 + var(--p) * .12));
}
.sc-cloud--far i{animation:cloudCrawlA 150s linear infinite alternate}
.sc-cloud--near{
  left:-12%;width:118%;top:22%;opacity:.8;
  transform:translate3d(calc(var(--p) * 13vw + var(--mx) * 14px),
                        calc(var(--p) * -88vh + var(--my) * 9px),0)
            scale(calc(1.15 + var(--p) * .22));
}
.sc-cloud--near i{animation:cloudCrawlB 110s linear infinite alternate}
@keyframes cloudCrawlA{from{transform:translate3d(-2vw,0,0)}to{transform:translate3d(3vw,0,0)}}
@keyframes cloudCrawlB{from{transform:translate3d(3vw,0,0)}to{transform:translate3d(-4vw,0,0)}}

/* ---- building: full frame width, panned base -> crown ----
   Width is pinned to the frame so the ground band always reaches
   both edges (a height-sized plate would leave sky in the bottom
   corners). The extra height is the travel. */
.sc-building{
  left:0;top:0;width:100vw;aspect-ratio:1400/1770;min-height:100svh;
  background:url(../img/building.webp) center bottom/cover no-repeat;
  transform:translate3d(0, calc(-1 * (var(--lead) + var(--p) * (var(--over) - var(--lead)))), 0);
}
.sc-building-i{
  position:absolute;inset:0;
  transform:translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0);
}

/* ---- centred logo — the loading page lands here ---- */
.sc-logo::before{
  content:"";position:absolute;left:50%;top:50%;width:150%;height:260%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  /**background:radial-gradient(closest-side,rgba(48,22,12,.46),rgba(48,22,12,0) 74%);**/
}
.sc-logo{
  position:absolute;left:50%;top:38%;z-index:6;text-align:center;
  transform:translate(-50%,-50%) translateY(calc(var(--p) * 7vh));
  opacity:clamp(0,calc(1.25 - var(--p) * 3.4),1);pointer-events: none;
}
.logo-mark{
  display:block;width:clamp(220px,20vw,360px);aspect-ratio:929.2/392.8;
  background:#7c3a25;
  -webkit-mask:url(../img/logo.svg) center/contain no-repeat;
          mask:url(../img/logo.svg) center/contain no-repeat;
}

/* ---- caption ---- */
.sc-cap{
  position:absolute;left:6vw;top:22%;z-index:8;max-width:min(320px,26vw);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s var(--ease);pointer-events: none;
}
.sc-cap.is-in{opacity:1;transform:translateY(0)}
.sc-cap-n{color:#fff;font-size:clamp(16px,1.6vw,24px);letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(30,16,8,.5);font-family: 'MinervaModern-Regular';}
.sc-cap-s{margin-top:12px;color:rgba(255,255,255,.9);font-size:clamp(11px,.9vw,14px);line-height:1.75;
  text-shadow:0 2px 14px rgba(30,16,8,.5)}
.sc-cap-r{margin-top:16px;width:46px;height:1px;background:var(--gold)}

/* ---- hotspots: children of the building, so they ride with it ---- */
.hs{
  position:absolute;z-index:5;padding:0;border:0;background:none;color:inherit;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:opacity .5s ease,transform .5s var(--ease);
  cursor:pointer;
}
.hs.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hs-dot{
  display:block;width:13px;height:13px;border-radius:50%;position:relative;
  background:var(--gold);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 2px 10px rgba(0,0,0,.45);
}
.hs-dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold);
  animation:hsPing 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes hsPing{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2);opacity:0}}
.hs-card{
  position:absolute;left:26px;top:50%;width:max-content;max-width:min(260px,20vw);
  transform:translateY(-50%) translateX(-8px);opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s var(--ease);
  background:rgba(16,10,6,.93);
  border:1px solid rgba(233,206,147,.3);padding:12px 16px;text-align:left;
}
.hs--l .hs-card{left:auto;right:26px;transform:translateY(-50%) translateX(8px)}
.hs-t{display:block;color:#E9CE93;font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-family: 'MinervaModern-Regular';}
.hs-d{display:block;margin-top:6px;color:rgba(255,255,255,.88);font-size:12px;line-height:1.6}
.hs:hover .hs-card,.hs:focus-visible .hs-card,.hs.is-open .hs-card{
  opacity:1;transform:translateY(-50%) translateX(0);
}

/* ---- mobile detail sheet ----
   A card anchored beside its dot runs off a narrow screen, and a
   fixed one can't escape the transformed plate it lives in. So on
   phones the hotspot text moves into one shared panel pinned to the
   bottom of the scene, which always fits. */
.sc-sheet{
  display:none;
  position:absolute;left:14px;right:14px;bottom:14px;z-index:9;
  background:rgba(16,10,6,.94);
  border:1px solid rgba(233,206,147,.32);
  padding:14px 44px 15px 16px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s var(--ease);
}
.sc-sheet.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.sc-sheet b{display:block;color:#E9CE93;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.sc-sheet p{margin:7px 0 0;color:rgba(255,255,255,.9);font-size:12.5px;line-height:1.6}
.sc-sheet-x{
  position:absolute;top:6px;right:8px;width:32px;height:32px;
  border:0;background:none;color:rgba(255,255,255,.7);font-size:20px;line-height:1;cursor:pointer;
}

/* ---- cue: says "scroll down" until the sequence is spent,
        then flips to "continue" for the horizontal leg ---- */
.sc-cue{
  position:absolute;left:50%;bottom:5vh;z-index:8;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  color:rgba(255,255,255,.9);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  transition:opacity .4s ease;
}
.sc-cue b{font-weight:inherit}
.sc-cue .to-form{display:none}
.reg-scene.is-done .sc-cue .to-scene{display:none}
.reg-scene.is-done .sc-cue .to-form{display:inline}
.sc-cue span{display:block;width:52px;height:1px;background:var(--gold);position:relative;overflow:hidden}
.sc-cue span::after{content:"";position:absolute;inset:0;background:#fff;
  animation:scCue 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes scCue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.sc-cue i{
  display:block;width:7px;height:7px;border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);transform:rotate(45deg);
  animation:cueDrop 1.8s ease-in-out infinite;
}
.reg-scene.is-done .sc-cue i{transform:rotate(-45deg);animation:none}
@keyframes cueDrop{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

.sc-edge{
  position:absolute;top:0;right:0;bottom:0;width:12vw;z-index:7;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,26,19,0),var(--canopy-deep) 92%);
  opacity:clamp(0,calc(var(--p) * 1.6 - .5),1);
}

/* desktop: panel is a row — pinned scene first, then the form */
@media (min-width:861px){
  #register{flex-direction:row;align-items:stretch;justify-content:flex-start;padding:0}
  #register .reg-wrap{align-self:center;padding:0 clamp(24px,2.4vw,44px) 0 clamp(40px,4.5vw,84px)}
}

/* ============ MOBILE ============
   Real sticky pinning: .sc-pin is tall, the scene sticks inside it,
   so ordinary vertical scroll drives the same sequence. */
@media (max-width:860px){
  /* .panel is overflow:hidden, which would stop the scene sticking */
  #register{overflow:visible}

  /* The panel's 96px top padding sits behind a 62px fixed bar, so the
     difference showed as a band of panel background above the scene.
     The scene runs to the top edge instead and the bar floats over it.
     Side and bottom padding stay — the form below still needs them. */
  #register{padding-top:0}

  .sc-pin{
    width:100vw;align-self:center;      /* full bleed past the panel padding */
    height:230vh;
    margin:0 0 clamp(24px,4vh,42px);
  }
  .reg-scene{position:sticky;top:0;height:100dvh;height:100svh}

  /* short phones in landscape: shrink the type rather than overflow */
  @media (max-height:520px){
    .logo-mark{width:min(42vw,190px)}
    .sc-cap{top:10%}
    .sc-cap-n{font-size:14px}
    .sc-cap-s{font-size:11.5px}
    .sc-cue{display:none}
  }

  .reg-scene{--over:max(0px, calc(303.4vw - 100svh));--lead:min(18vw, var(--over))}
  .sc-cloud--far{left:-20%;width:130%;top:4%;opacity:.5;
    transform:translate3d(calc(var(--p) * -5vw),calc(var(--p) * -40vh),0)}
  .sc-cloud--near{left:-30%;width:175%;top:24%;opacity:.78;
    transform:translate3d(calc(var(--p) * 9vw),calc(var(--p) * -78vh),0)
              scale(calc(1.1 + var(--p) * .18))}
  /* 240vw keeps the plate well taller than any phone frame, so the
     pan has real travel and the ground never lifts off the bottom */
  .sc-building{
    left:50%;width:240vw;margin-left:-120vw;
    background-image:url(../img/building-m.webp);   /* 1.0MP not 2.5MP */
  }
  .sc-sky{background-image:url(../img/sky-m.jpg)}
  .sc-logo{top:33%}
  .logo-mark{width:min(62vw,270px)}
  .sc-cap{left:7vw;right:7vw;top:14%;max-width:none}
  .sc-cap-n{font-size:18px;letter-spacing:.16em}
  .sc-cap-s{font-size:12.5px;margin-top:9px;line-height:1.65}
  .sc-edge{display:none}
  .sc-cue{bottom:calc(14px + env(safe-area-inset-bottom));font-size:9.5px;letter-spacing:.22em}
  .sc-sheet{bottom:calc(14px + env(safe-area-inset-bottom))}

  /* the cue and the sheet would sit on top of each other */
  .reg-scene.sheet-open .sc-cue{opacity:0;pointer-events:none}

  .hs{padding:10px;margin:-10px}       /* 33px tap target */
  .hs-card{display:none}               /* replaced by .sc-sheet */
  .sc-sheet{display:block}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .sc-cloud i,.hs-dot::after,.sc-cue span::after,.sc-cue i{animation:none}
  .sc-cap{transition-duration:.01ms}
}