/* ============================================================================
   EDEN INTRO — light-beige skin + the still montage.
   ----------------------------------------------------------------------------
   Replaces the night-film intro with a moving montage of the project's own
   renders, on the brand's light beige ground.

   Client brief (2026-08-25):
     · "change the video of the intro screen to the images"
     · "loading page to change to a montage of dynamic project visual with
        movement of elements. avoid static approach"
     · "project image first approach — more realistic, visual forward"
     · "interface can have some play of glass morphism, curved buttons with
        gradients, smaller elegant buttons to add finesse"
     · "lighter beiges to be used from the style guide"

   MUST load AFTER theme-green.css — it overrides the dark intro surfaces that
   styles.css and theme-green.css still own. Scoped entirely to .intro so no
   unconverted screen is affected.
   ============================================================================ */

/* ── Ground ─────────────────────────────────────────────────────────────── */
.intro{
  background:var(--e-ground);
  color:var(--e-ink);
}

/* ── The montage stack ──────────────────────────────────────────────────── */
.intro-montage{
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:var(--e-ground);
}

.im-shot{
  position:absolute;
  inset:0;
  opacity:0;
  /* ease-in-out, not linear: a linear opacity ramp reads as a hard-edged wipe
     at the ends. Eased, the two shots dissolve through each other. */
  transition:opacity 1.8s cubic-bezier(.4,0,.3,1);
  will-change:opacity;
}
.im-shot.is-on{opacity:1}

.im-shot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  /* Image-first: the renders carry the screen, so the grade is nearly neutral.
     (The old night film needed brightness(.7) + hue-rotate; daylight renders
     would be crushed by that.) A whisper of warmth ties them to the beige. */
  /* Client 2026-09-07: "there is a tint which is on the image — remove that
     tint." The sepia(.03) was a literal colour cast and the saturate/contrast
     pair was a grade laid on top of renders the client already graded. All of
     it is off: the montage now shows the supplied renders unaltered. */
  filter:none;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}

/* ── Ken Burns: one direction per shot, chosen from its composition ─────── */
/* 0 · Avenue — one-point perspective, so push straight down the vanishing
      point. Reads as driving in. */
@keyframes kbPushIn{
  from{transform:scale(1.005)}
  to  {transform:scale(1.105)}
}
/* 1 · Tree of Life — centred subject, sun flare on the right: push in and
      drift toward the light. */
@keyframes kbPushRight{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.115) translate3d(-1.7%,-.5%,0)}
}
/* 2 · Clubhouse — the building sweeps left→right; travel with it and ease
      back a touch to let the whole curve land. */
@keyframes kbTrackRight{
  from{transform:scale(1.10) translate3d(1.9%,.4%,0)}
  to  {transform:scale(1.045) translate3d(-1.9%,-.4%,0)}
}
/* 3 · Main pool — cabanas recede to the right, water fills the left; travel
      right→left across the water. */
@keyframes kbTrackLeft{
  from{transform:scale(1.055) translate3d(-1.9%,0,0)}
  to  {transform:scale(1.11) translate3d(1.9%,-.5%,0)}
}
/* 4 · The mansion — an architectural elevation. Pull back and let it settle;
      symmetric, so no lateral drift. */
@keyframes kbPullBack{
  from{transform:scale(1.12)}
  to  {transform:scale(1.012)}
}
/* 5 · Serene oasis — golden light on the left, path leads in: push toward
      the light to close the loop. */
@keyframes kbPushLeft{
  from{transform:scale(1.005) translate3d(0,0,0)}
  to  {transform:scale(1.10) translate3d(1.6%,-.4%,0)}
}

/* ── Why the animation is NOT gated on .is-on ───────────────────────────────
   It used to be. That was the source of the visible glitch at every hand-off:
   the moment .is-on came off the outgoing shot the animation was deleted, so
   its image SNAPPED back to the untransformed frame while it was still half
   opaque — a jump, right in the middle of the dissolve.

   Now the animation is bound to the shot permanently and only its play-state
   is switched. The outgoing shot keeps moving all the way through its fade
   (.is-out, held by app.js for exactly the fade duration), so nothing ever
   jumps. Parked shots stay paused at frame 0 rather than burning through
   their motion off-screen; app.js restarts each one as it comes round, while
   it is still fully transparent, so the reset is never visible.

   Duration 11s against a 6.5s advance + 1.8s fade = a shot is on screen for
   8.3s of an 11s move. The switch always lands mid-motion, never after it has
   run out — which is what made the old version feel like it stalled and cut. */
.im-shot[data-shot="0"] img{animation:kbPushIn     11s linear both}
.im-shot[data-shot="1"] img{animation:kbPushRight  11s linear both}
.im-shot[data-shot="2"] img{animation:kbTrackRight 11s linear both}
.im-shot[data-shot="3"] img{animation:kbTrackLeft  11s linear both}
.im-shot[data-shot="4"] img{animation:kbPullBack   11s linear both}
.im-shot[data-shot="5"] img{animation:kbPushLeft   11s linear both}

/* These MUST come after the shorthand above, and MUST match its specificity
   ([data-shot] = one attribute selector). `animation:` is a shorthand, so it
   re-initialises animation-play-state to `running` — a less specific, or
   earlier, longhand simply loses and every shot animates from page load. */
.im-shot[data-shot] img{animation-play-state:paused}
.im-shot[data-shot].is-on img,
.im-shot[data-shot].is-out img{animation-play-state:running}

/* ── Scrim ──────────────────────────────────────────────────────────────── */
/* Image-first (client: "project image first approach — visual forward"), so
   the scrim is LOCAL, not a pair of full-width bands. Two soft beige pools sit
   directly under the two text anchors — the lockup and the Enter button — and
   the rest of the frame, including both side margins, stays completely clear.
   (Full-width top+bottom bands covered ~76% of the height and washed the
   renders out; these cover the type and nothing else.) */
/* finish-kit.css pins the whole composition into ONE centred flex column
   (lockup · breath · enter control) at every viewport, so the scrim is a
   single centred pool sitting exactly under that column. Both side margins
   stay clear, which is what keeps the render forward. */
/* No directional bands. A linear top/bottom wash reads as two visible edges
   across the render; the two marks carry their own tint now, so all this layer
   does is a whisper of a centre pool that fades to nothing on every side. */
.intro .intro-shade{
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(255,242,235,.30) 0%,
      rgba(255,242,235,.22) 40%,
      rgba(255,242,235,.10) 70%,
      rgba(255,242,235,0)   100%);
}

/* Type sits on light now. IvyOra is a fine, wide-tracked serif landing on
   high-frequency foliage, so it needs a real frosted lift, not one soft drop:
   layered tight→wide beige halos that read as an outline up close and a glow
   at distance. Kiosk viewing distance is ~1m, so this matters. */
.intro .intro-stage{
  text-shadow:
    0 0 1px rgba(255,242,235,.98),
    0 1px 2px rgba(255,242,235,.98),
    0 0 9px  rgba(255,242,235,.94),
    0 0 26px rgba(255,242,235,.70);
}

/* ── Tint plates behind the two marks ───────────────────────────────────── */
/* The renders are bright and busy (foliage, sky, pale stone), and a fine
   wide-tracked serif cannot hold against that on halo alone — the lockup and
   the Enter control genuinely disappeared over the avenue shot.

   So each mark carries its own tint. Feathered radial, NOT a panel: the wash
   fades to fully transparent well inside the box, so there is no rectangle
   edge anywhere and the render still runs unbroken behind it. This travels
   with the mark, so it stays correct at every viewport — which a scrim
   painted on .intro-shade cannot do, since finish-kit.css re-flows the whole
   composition into a centred column.

   `closest-side` is the important bit. A percentage-sized radial (58% 60%)
   describes an ellipse whose vertical radius runs PAST the box edge, so the
   wash was still ~20% opaque where the box ended — which is the hard cut you
   could see along the top and bottom. `closest-side` pins the ellipse exactly
   to the nearest edge midpoints, so alpha reaches 0 on every side, and the
   corners sit outside the ellipse and are transparent too. Nothing clips.

   The padding is deliberately generous: it makes the box comfortably larger
   than the type, so the dense middle of the gradient covers the words and the
   whole feather happens in empty space. */
.intro .intro-brand{
  width:min(540px,92vw);
  padding:56px 76px 60px;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(255,242,235,.93) 0%,
    rgba(255,242,235,.88) 44%,
    rgba(255,242,235,.62) 68%,
    rgba(255,242,235,.24) 86%,
    rgba(255,242,235,0)   100%);
}
.intro .hold-to-enter{
  width:min(500px,90vw);
  padding:48px 70px 52px;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(255,242,235,.92) 0%,
    rgba(255,242,235,.86) 44%,
    rgba(255,242,235,.60) 68%,
    rgba(255,242,235,.22) 86%,
    rgba(255,242,235,0)   100%);
}

/* ── Brand lockup ───────────────────────────────────────────────────────── */
/* Deep green, not primary — the lockup lands on bright render highlights and
   needs the extra contrast step to hold. */
.intro .intro-brand{color:var(--e-ink-strong)}
.intro .intro-brand span{color:var(--e-ink-strong)}
/* The Embassy mark ships as a white alpha PNG; on beige it must read as the
   primary green, so recolour it rather than shipping a second asset. */
.intro .intro-brand img{
  opacity:1;
  filter:none;
  -webkit-mask-image:url("assets/brand/embassy-white-alpha.webp");
          mask-image:url("assets/brand/embassy-white-alpha.webp");
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  background:var(--e-ink-strong);
}
.intro .intro-brand i{
  background:var(--e-ink);
  box-shadow:0 0 10px rgba(63,89,58,.18);
}
.intro .intro-brand b{color:var(--e-ink-soft)}

/* ── Dividers ───────────────────────────────────────────────────────────── */
.intro .intro-divider:before{background:linear-gradient(90deg,transparent,rgba(63,89,58,.42))}
.intro .intro-divider:after {background:linear-gradient(90deg,rgba(63,89,58,.42),transparent)}
.intro .intro-divider>i{
  background:var(--e-ink);
  box-shadow:0 0 8px rgba(63,89,58,.16);
}

/* ── "Enter Eden" — glass, curved, small and elegant ────────────────────── */
.intro .hold-to-enter{
  color:var(--e-ink);
  filter:drop-shadow(0 10px 22px rgba(63,89,58,.14));
}

/* The medallion becomes a glass disc over the imagery instead of a gold coin */
.intro .hold-orbit{
  border:1px solid var(--e-glass-line);
  background:
    linear-gradient(155deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,242,235,.42) 42%,
      rgba(254,230,211,.34) 100%);
  -webkit-backdrop-filter:blur(var(--e-blur)) saturate(1.15);
          backdrop-filter:blur(var(--e-blur)) saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42) inset,
    0 10px 26px rgba(63,89,58,.14),
    0 2px 6px rgba(63,89,58,.08);
}
.intro .hold-orbit:before{
  inset:7px;
  border:1px solid rgba(63,89,58,.16);
  box-shadow:inset 0 0 16px rgba(255,255,255,.42);
}
/* the sweeping sheen, warmed and softened for a light surface */
.intro .hold-orbit:after{
  background:linear-gradient(112deg,transparent 41%,rgba(255,255,255,.62) 49%,transparent 57%);
}
/* the tree crest inside the disc, recoloured to the primary green */
.intro .hold-orbit .eden-tree-mark{
  -webkit-mask-image:url("assets/brand/eden-tree-medallion.png");
          mask-image:url("assets/brand/eden-tree-medallion.png");
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  background:var(--e-ink);
  filter:none;
  opacity:.92;
}

.intro .hold-to-enter b{color:var(--e-ink-strong)}
.intro .hold-to-enter small{color:var(--e-ink-soft)}
/* Something upstream resets text-shadow to none on this control, so the halo
   has to be re-stated here or "Enter Eden" sits bare on the render. */
#intro .hold-to-enter b,
#intro .hold-to-enter small{
  text-shadow:
    0 0 1px rgba(255,242,235,.98),
    0 1px 2px rgba(255,242,235,.98),
    0 0 9px  rgba(255,242,235,.94);
}

.intro .hold-to-enter:hover .hold-orbit{
  filter:none;
  border-color:rgba(63,89,58,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 14px 32px rgba(63,89,58,.18),
    0 3px 8px rgba(63,89,58,.10);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* Keep the montage (it is the content), drop the drift — crossfade only. */
@media (prefers-reduced-motion:reduce){
  .im-shot.is-on img{animation:none!important;transform:scale(1.02)}
  .im-shot{transition:opacity .9s linear}
}