/* intro.css — the tap-to-open CURTAIN INTRO, and the gate that holds the cover scene
* behind it.
*
* WHAT THIS IS
* The invitation's opening scene: a closed-curtain still that the guest taps, a 4.67s
* silent clip of the curtains parting on "Muskan & Shourya", and then a long dissolve
* into scene 1. js/intro.js drives the lifecycle; this file only paints.
*
* WHERE IT LIVES
* Inside .stage__device — NOT a sibling of .stage. That is deliberate: the device
* column is the whole viewport on a phone and a rounded 9:19.5 stage on desktop, so
* the overlay inherits the exact box (and the 28px corner clip) of the scenes it hands
* off to. z-index 1000 clears .nav-layer (900) and every layer inside a scene (<=500).
*
* THE HANDOFF GATE (documented in full in js/intro.js)
* html.intro-active set inline in , so it is in force on the first frame.
* Below, it nulls out the engine's entry cascade: the cover must
* not spend its one arrival animation behind an opaque curtain.
* js/intro.js drops the class at fade START and js/scenes/cover.js
* plays the arrival then, so the two surfaces crossfade.
*
* COLOUR
* --intro-bg is the curtain's own mid tone (sampled: rgb(151,132,113)). It is only
* ever seen in the single frame before the poster decodes — the video and poster both
* `object-fit: cover` the box, which never letterboxes — but a taupe flash-of-nothing
* beats a white one.
*
* MOTION
* transform / opacity only, GPU-composited. The looping ring pulse lives on the mark's
* pseudo-elements, never on the hint wrapper, so fading the wrapper out can never turn
* a running keyframe into a transition (the snap gotcha).
*/
:root {
--intro-bg: #978471; /* the closed curtain's mid tone */
--intro-ink: #fbf7ef; /* --ivory, matching css/fx/kit.css's --fx-ink */
--intro-glow: rgba(201, 163, 92, 0.55); /* --fx-glow */
--intro-fade: 1200ms; /* the exit dissolve; js/intro.js's removal fallback must outlast it */
}
/* --------------------------------------------------------------- overlay */
.ms-intro {
position: absolute;
inset: 0;
z-index: 1000; /* above .nav-layer (900) and every scene layer (<= 500) */
overflow: hidden;
background: var(--intro-bg);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
/* resting scale for the exit push-through. No keyframe animation ever runs on this
node, so `.is-done` can transition the transform with no keyframe -> transition snap. */
transform: scale(1);
}
/* The clip and its stand-in poster share IDENTICAL box maths, so the is a
pixel-for-pixel replacement for the video's own first frame. 9:16 art in a 9:19.5
box: `cover` scales by height and crops the sides, which the curtain's vertical
drape hides completely and which keeps the final frame's centred names centred. */
.ms-intro__video,
.ms-intro__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
display: block;
background: var(--intro-bg);
}
.ms-intro__video {
z-index: 1;
}
/* Chrome drops the