/* =====================================================================
   LA PORTA VIVA — الباب الحي
   MAHMOUD NOUR EL DIN — Creative Universe
   DNA: Minimal Luxury / Editorial / Whitespace / Cairo / Slow motion
   ===================================================================== */

:root{
  /* ---- palette (festive night — magenta / violet / gold) ---- */
  --warm-white:#180f2e;   /* deep night base */
  --stone:#6b5a91;        /* muted violet-grey */
  --cream:#2a1b4d;        /* deep violet panel */
  --champagne:#351f57;    /* lighter violet panel */
  --gold:#ff4fa3;         /* primary festive accent — magenta */
  --bronze:#c23fd0;       /* secondary accent — purple-magenta */
  --warm-brown:#7c3aed;   /* violet accent */
  --olive:#ffd27a;        /* warm light-bulb gold */
  --ink:#120a24;          /* near-black night */
  --celebration:#24123f;  /* rich magenta-violet night */

  --text-ink:#f5edff;
  --text-soft:#c8b3ea;
  --text-on-dark:#ffffff;
  --text-on-dark-soft:#e6b8ee;

  --hairline: rgba(255,180,230,0.16);
  --hairline-dark: rgba(255,180,230,0.26);

  --ease-slow: cubic-bezier(.16,.68,.24,1);
  --dur-slow: 1.4s;
  --dur-mid: .8s;

  --life:0; /* 0 → 1, driven by JS scroll progress, quiet light engine */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Cairo', sans-serif;
  font-weight:400;
  color:var(--text-ink);
  background-color:var(--warm-white);
  transition:background-color 1.6s linear;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; padding:0; }
ol,ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
svg{ display:block; }

::selection{ background:var(--gold); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------------------
   Ambient light veil — fixed radial glow, intensity rises with --life
--------------------------------------------------------------------- */
.light-veil{
  position:fixed; inset:0; pointer-events:none; z-index:6; mix-blend-mode:screen;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,79,163,var(--veil-op,0)) 0%, rgba(255,79,163,0) 60%);
  transition:background 1.6s linear;
}

/* ---------------------------------------------------------------------
   String lights — reusable warm garland, twinkles gently, no two alike
--------------------------------------------------------------------- */
.lights-strand{ display:block; width:100%; height:auto; overflow:visible; }
.lights-strand .wire{ fill:none; stroke:rgba(230,184,238,0.35); stroke-width:1; }
.lights-strand .bulb{
  fill:var(--olive);
  filter:drop-shadow(0 0 4px rgba(255,210,122,0.9));
  animation:bulb-twinkle 3.2s ease-in-out infinite;
}
@keyframes bulb-twinkle{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* ---------------------------------------------------------------------
   Balloon arch — hand-drawn cluster, festive but never a stock asset
--------------------------------------------------------------------- */
.balloon-arch{ display:block; width:100%; height:auto; overflow:visible; }
.balloon-arch .balloon{ transform-origin:center; animation:balloon-sway 6s ease-in-out infinite; }
.balloon-arch .balloon:nth-child(odd){ animation-duration:7.2s; }
.balloon-arch .balloon:nth-child(3n){ animation-duration:5.4s; animation-delay:.6s; }
@keyframes balloon-sway{
  0%,100%{ transform:translateY(0) rotate(-1.5deg); }
  50%{ transform:translateY(-6px) rotate(1.5deg); }
}

/* ---------------------------------------------------------------------
   Header
--------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:26px clamp(20px,5vw,64px);
  transition:padding .6s var(--ease-slow), background-color .6s var(--ease-slow), backdrop-filter .6s var(--ease-slow);
}
.site-header.is-scrolled{
  padding:14px clamp(20px,5vw,64px);
  background-color:rgba(18,10,36,0.62);
  backdrop-filter:blur(14px);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1400px; margin:0 auto;
}

.brand-mark{ display:flex; flex-direction:column; gap:2px; }
.brand-main{
  font-size:12px; letter-spacing:.28em; font-weight:600;
  color:var(--text-on-dark);
  text-shadow:0 0 12px rgba(255,79,163,0.55);
}
.brand-sub{
  font-size:9px; letter-spacing:.2em; color:var(--text-on-dark-soft); font-style:italic;
}

.main-nav{ display:flex; gap:clamp(16px,2.4vw,40px); }
.main-nav a{
  position:relative; font-size:13px; font-weight:400; letter-spacing:.02em;
  color:var(--text-on-dark-soft); transition:color .5s var(--ease-slow);
}
.main-nav a::after{
  content:''; position:absolute; right:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .5s var(--ease-slow);
}
.main-nav a:hover{ color:var(--text-on-dark); }
.main-nav a:hover::after{ width:100%; }

.house-mark span{
  font-size:11px; letter-spacing:.18em; color:var(--text-on-dark-soft); font-weight:400;
}

@media (max-width:760px){
  .main-nav{ display:none; }
}

/* ---------------------------------------------------------------------
   Generic scene scaffolding
--------------------------------------------------------------------- */
.scene{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px clamp(20px,6vw,80px);
  text-align:center;
  scroll-margin-top:0;
}
.scene-moment-wrap{ scroll-margin-top:0; }

.eyebrow{
  font-size:11px; letter-spacing:.32em; color:var(--bronze); font-weight:500;
  margin-bottom:18px;
}
.eyebrow.center{ text-align:center; }
.eyebrow-sep{ opacity:.5; margin:0 6px; }

.scene-title{
  font-size:clamp(22px,3vw,32px); font-weight:600; line-height:1.6;
  color:var(--text-ink); max-width:720px; margin:0 auto 8px;
  text-shadow:0 0 18px rgba(255,79,163,0.35);
}
.scene-title.center{ text-align:center; }

.scene-whisper{
  font-size:14px; line-height:2; color:var(--text-soft); font-weight:300;
  max-width:520px; margin:56px auto 0;
}
.scene-whisper.center{ text-align:center; }

/* fade-up reveal, applied via JS IntersectionObserver */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease-slow), transform var(--dur-slow) var(--ease-slow); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------------
   Dust field — quiet floating particles, shared component
--------------------------------------------------------------------- */
.dust-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.dust{
  position:absolute; width:3px; height:3px; border-radius:50%;
  opacity:0;
  animation:dust-float linear infinite;
}
@keyframes dust-float{
  0%{ opacity:0; transform:translateY(0) translateX(0) rotate(0deg); }
  10%{ opacity:.85; }
  90%{ opacity:.55; }
  100%{ opacity:0; transform:translateY(-160px) translateX(24px) rotate(180deg); }
}

/* =====================================================================
   SCENE 01 — HERO
   ===================================================================== */
.scene-hero{ min-height:100vh; padding-top:0; overflow:hidden; }
.hero-lights{ position:absolute; top:78px; left:0; width:100%; z-index:2; opacity:.9; }
.hero-balloons{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85; }
.hero-stage{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.hero-door{ width:min(46vw,420px); height:auto; opacity:.9; }
.door-leaf{ transition:transform 1.8s var(--ease-slow); }
.hero-stage.is-open .door-leaf{ transform:rotateY(0deg) skewY(0); }
.light-seam{ transition:opacity 1.6s var(--ease-slow), width 1.6s var(--ease-slow); opacity:.55; }
.light-seam-side{ opacity:.35; }

.hero-copy{ position:relative; z-index:3; margin-bottom:8vh; }
.hero-title{
  font-size:clamp(22px,3.4vw,34px); font-weight:600; line-height:1.75;
  color:var(--text-ink); max-width:560px;
  text-shadow:0 0 22px rgba(255,79,163,0.4);
}

.scroll-cue{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:3;
}
.scroll-cue-line{
  width:1px; height:46px; background:linear-gradient(var(--bronze),transparent);
  animation:cue-pulse 2.6s ease-in-out infinite;
}
@keyframes cue-pulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
.scroll-cue-text{ font-size:11px; letter-spacing:.2em; color:var(--text-soft); }

/* =====================================================================
   SCENE 02 — THE INVITATION
   THE FIRST SIGN OF LIFE
===================================================================== */

.scene-invitation{

  position:relative;

  min-height:220vh;

  padding:0;

  overflow:visible;

  background:

    radial-gradient(
      circle at 72% 48%,
      rgba(199,151,82,.075),
      transparent 29%
    ),

    radial-gradient(
      circle at 12% 82%,
      rgba(177,61,115,.045),
      transparent 25%
    ),

    linear-gradient(
      145deg,
      #10051d 0%,
      #130720 48%,
      #0c0415 100%
    );

  color:var(--text-on-dark);

}


/* =====================================================
   STICKY CINEMATIC STAGE
===================================================== */

.invitation-stage{

  position:sticky;

  top:0;

  width:100%;

  height:100vh;

  min-height:680px;

  overflow:hidden;

  isolation:isolate;

}


/* =====================================================
   AMBIENT RINGS
===================================================== */

.invitation-ambient{

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  overflow:hidden;

}


.invitation-orbit{

  position:absolute;

  display:block;

  border:

    1px solid

    rgba(235,208,161,.08);

  border-radius:50%;

  opacity:0;

  transform:

    scale(.85)

    rotate(-10deg);

  transition:

    opacity 1.8s ease,

    transform 2.2s

    cubic-bezier(.22,1,.36,1);

}


.scene-invitation.is-awake

.invitation-orbit{

  opacity:1;

  transform:

    scale(1)

    rotate(0);

}


.invitation-orbit--one{

  width:520px;

  height:520px;

  top:-250px;

  right:-120px;

}


.invitation-orbit--two{

  width:720px;

  height:720px;

  top:-350px;

  right:-220px;

  transition-delay:.15s;

}


.invitation-orbit--three{

  width:420px;

  height:420px;

  bottom:-260px;

  left:-170px;

  border-color:

    rgba(192,62,129,.08);

  transition-delay:.3s;

}


/* =====================================================
   SMALL SCENE LABEL
===================================================== */

.invitation-scene-label{

  position:absolute;

  top:clamp(
    100px,
    13vh,
    145px
  );

  right:clamp(
    28px,
    6vw,
    110px
  );

  z-index:8;

  display:flex;

  align-items:center;

  gap:13px;

  direction:ltr;

  font-family:

    "Cairo",

    sans-serif;

  font-size:9px;

  font-weight:600;

  letter-spacing:.28em;

  color:

    rgba(245,231,207,.55);

  opacity:0;

  transform:

    translateY(12px);

  transition:

    opacity 1s ease,

    transform 1s ease;

}


.scene-invitation.is-awake

.invitation-scene-label{

  opacity:1;

  transform:

    translateY(0);

}


.invitation-scene-label span{

  color:

    rgba(223,177,102,.92);

}


.invitation-scene-label i{

  display:block;

  width:42px;

  height:1px;

  background:

    rgba(223,177,102,.5);

}


/* =====================================================
   TEXT STORY
===================================================== */

.invitation-story{

  position:absolute;

  top:50%;

  right:clamp(
    28px,
    8vw,
    150px
  );

  z-index:7;

  width:min(
    560px,
    42vw
  );

  transform:

    translateY(-50%);

}


.invitation-line{

  position:absolute;

  top:50%;

  right:0;

  width:100%;

  display:grid;

  grid-template-columns:

    34px

    minmax(0,1fr);

  align-items:start;

  gap:22px;

  padding:0;

  color:

    var(--text-on-dark);

  text-align:right;

  opacity:0;

  visibility:hidden;

  transform:

    translateY(34px);

  transition:

    opacity .85s ease,

    transform 1.1s

    cubic-bezier(.22,1,.36,1),

    visibility .85s ease;

}


.invitation-line.is-active{

  opacity:1;

  visibility:visible;

  transform:

    translateY(0);

}


.invitation-line.is-past{

  opacity:0;

  visibility:hidden;

  transform:

    translateY(-30px);

}


.invitation-line__number{

  padding-top:11px;

  font-family:

    "Cairo",

    sans-serif;

  font-size:9px;

  font-weight:600;

  letter-spacing:.2em;

  color:

    rgba(221,173,96,.7);

  direction:ltr;

}


.invitation-line p{

  margin:0;

  font-family:

    "Cairo",

    sans-serif;

  font-size:

    clamp(
      27px,
      3.4vw,
      58px
    );

  font-weight:300;

  line-height:1.55;

  letter-spacing:-.035em;

  color:

    rgba(249,239,220,.55);

}


.invitation-line strong{

  display:block;

  margin-top:3px;

  font-weight:500;

  color:#f7ead4;

}


.invitation-line--three strong{

  color:#dfad66;

}


/* =====================================================
   LIVING DOOR SCENE
===================================================== */

.invitation-door-scene{

  position:absolute;

  top:50%;

  left:clamp(
    40px,
    11vw,
    210px
  );

  z-index:5;

  width:

    clamp(
      270px,
      28vw,
      480px
    );

  height:

    clamp(
      430px,
      66vh,
      650px
    );

  transform:

    translateY(-47%);

}


.invitation-door-glow{

  position:absolute;

  top:13%;

  left:50%;

  width:82%;

  height:75%;

  border-radius:

    48%

    48%

    12%

    12%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(232,180,91,.23),
      rgba(189,68,123,.09) 42%,
      transparent 72%
    );

  filter:blur(40px);

  opacity:.12;

  transform:

    translateX(-50%)

    scale(.75);

  transition:

    opacity 1.2s ease,

    transform 1.8s

    cubic-bezier(.22,1,.36,1);

}


.scene-invitation.is-awake

.invitation-door-glow{

  opacity:.55;

  transform:

    translateX(-50%)

    scale(1);

}


.invitation-door{

  position:absolute;

  inset:0;

}


.invitation-door__arch{

  position:absolute;

  top:2%;

  left:50%;

  width:72%;

  height:83%;

  border:

    1px solid

    rgba(229,198,147,.2);

  border-radius:

    48%

    48%

    5px

    5px;

  transform:

    translateX(-50%);

}


.invitation-door__line{

  position:absolute;

  border:

    1px solid

    rgba(220,176,104,.14);

  border-bottom:0;

  border-radius:

    50%

    50%

    0

    0;

}


.invitation-door__line--one{

  inset:-13px -13px 0;

}


.invitation-door__line--two{

  inset:-27px -27px 0;

  border-color:

    rgba(220,176,104,.09);

}


.invitation-door__line--three{

  inset:-42px -42px 0;

  border-color:

    rgba(220,176,104,.055);

}


.invitation-door__inside{

  position:absolute;

  inset:10px;

  overflow:hidden;

  border-radius:

    47%

    47%

    2px

    2px;

  background:

    linear-gradient(
      180deg,
      #08030d,
      #0d0614
    );

}


.invitation-door__light{

  position:absolute;

  top:0;

  left:50%;

  width:3px;

  height:100%;

  display:block;

  background:

    linear-gradient(
      180deg,
      rgba(255,238,198,.5),
      #ffd98d 38%,
      rgba(217,84,139,.72)
    );

  box-shadow:

    0 0 12px

    rgba(255,213,133,.7),

    0 0 42px

    rgba(225,137,79,.42);

  transform:

    translateX(-50%);

  transition:

    width 1.4s

    cubic-bezier(.22,1,.36,1),

    box-shadow 1.4s ease;

}


.scene-invitation.is-awake

.invitation-door__light{

  width:18%;

  box-shadow:

    0 0 24px

    rgba(255,219,151,.82),

    0 0 90px

    rgba(215,91,133,.45);

}


/* =====================================================
   WORLD BEHIND THE DOOR
===================================================== */

.invitation-door__world{

  position:absolute;

  inset:0;

  opacity:0;

  transition:

    opacity 1.5s ease;

}


.scene-invitation.is-alive

.invitation-door__world{

  opacity:1;

}


.invitation-world-light{

  position:absolute;

  top:35%;

  width:6px;

  height:6px;

  display:block;

  border-radius:50%;

  background:#ffe5a5;

  box-shadow:

    0 0 15px

    rgba(255,220,143,.9);

  animation:

    invitationTwinkle

    2.5s

    ease-in-out

    infinite;

}


.invitation-world-light--one{

  left:24%;

}


.invitation-world-light--two{

  left:49%;

  top:29%;

  animation-delay:.5s;

}


.invitation-world-light--three{

  right:23%;

  top:39%;

  animation-delay:1s;

}


.invitation-world-flag{

  position:absolute;

  bottom:15%;

  width:13%;

  height:38%;

  display:block;

  border-radius:

    50%

    50%

    8px

    8px;

  background:

    linear-gradient(
      90deg,
      rgba(201,58,129,.25),
      rgba(221,83,146,.78),
      rgba(246,188,212,.35)
    );

  transform-origin:bottom;

  animation:

    invitationFlag

    4s

    ease-in-out

    infinite;

}


.invitation-world-flag--one{

  left:16%;

  transform:

    rotate(-7deg);

}


.invitation-world-flag--two{

  right:16%;

  transform:

    rotate(7deg);

  animation-delay:-1.5s;

}


.invitation-world-balloon{

  position:absolute;

  display:block;

  width:15px;

  height:20px;

  border-radius:

    50%

    50%

    48%

    48%;

  background:

    linear-gradient(
      135deg,
      #efc57f,
      #a85a82
    );

  box-shadow:

    inset -4px -4px 8px

    rgba(37,6,36,.25);

  animation:

    invitationBalloon

    4.5s

    ease-in-out

    infinite;

}


.invitation-world-balloon::after{

  content:"";

  position:absolute;

  top:19px;

  left:50%;

  width:1px;

  height:45px;

  background:

    rgba(240,217,180,.25);

}


.invitation-world-balloon--one{

  left:37%;

  top:50%;

}


.invitation-world-balloon--two{

  left:53%;

  top:43%;

  width:12px;

  height:17px;

  animation-delay:-1.2s;

}


.invitation-world-balloon--three{

  left:62%;

  top:55%;

  width:13px;

  height:18px;

  animation-delay:-2.3s;

}


/* =====================================================
   FLOOR LIGHT
===================================================== */

.invitation-door__floor-light{

  position:absolute;

  bottom:14%;

  left:50%;

  width:6%;

  height:95px;

  display:block;

  background:

    linear-gradient(
      180deg,
      rgba(255,218,142,.45),
      transparent
    );

  clip-path:

    polygon(
      40% 0,
      60% 0,
      100% 100%,
      0 100%
    );

  filter:blur(4px);

  opacity:.3;

  transform:

    translateX(-50%);

  transition:

    width 1.6s

    cubic-bezier(.22,1,.36,1),

    opacity 1.3s ease;

}


.scene-invitation.is-awake

.invitation-door__floor-light{

  width:68%;

  opacity:.7;

}


/* =====================================================
   DOOR CAPTION
===================================================== */

.invitation-door-caption{

  position:absolute;

  right:0;

  bottom:0;

  left:0;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:11px;

  direction:ltr;

  font-family:

    "Cairo",

    sans-serif;

  font-size:8px;

  letter-spacing:.24em;

  color:

    rgba(245,229,202,.43);

}


.invitation-door-caption span{

  color:

    rgba(226,180,106,.78);

}


.invitation-door-caption i{

  display:block;

  width:24px;

  height:1px;

  background:

    rgba(226,180,106,.32);

}


/* =====================================================
   PROGRESS
===================================================== */

.invitation-progress{

  position:absolute;

  right:

    clamp(
      28px,
      6vw,
      110px
    );

  bottom:

    clamp(
      32px,
      6vh,
      70px
    );

  left:

    clamp(
      28px,
      6vw,
      110px
    );

  z-index:8;

  display:grid;

  grid-template-columns:

    auto

    minmax(70px,1fr)

    auto;

  align-items:center;

  gap:18px;

  direction:ltr;

  font-family:

    "Cairo",

    sans-serif;

  font-size:8px;

  font-weight:600;

  letter-spacing:.23em;

  color:

    rgba(245,229,202,.34);

}


.invitation-progress > div{

  position:relative;

  height:1px;

  overflow:hidden;

  background:

    rgba(245,229,202,.1);

}


.invitation-progress > div i{

  position:absolute;

  top:0;

  left:0;

  width:0;

  height:100%;

  display:block;

  background:

    linear-gradient(
      90deg,
      #c74d89,
      #e3b56d
    );

}


/* =====================================================
   QUIET PARTICLES
===================================================== */

.invitation-particles{

  position:absolute;

  inset:0;

  z-index:2;

  overflow:hidden;

  pointer-events:none;

}


.invitation-particles i{

  position:absolute;

  display:block;

  width:3px;

  height:8px;

  border-radius:2px;

  background:

    rgba(225,177,101,.45);

  opacity:0;

  animation:

    invitationParticle

    8s

    linear

    infinite;

}


.invitation-particles i:nth-child(1){

  left:9%;

  top:30%;

}


.invitation-particles i:nth-child(2){

  left:18%;

  top:73%;

  background:

    rgba(198,68,132,.5);

  animation-delay:-2s;

}


.invitation-particles i:nth-child(3){

  left:35%;

  top:16%;

  animation-delay:-4s;

}


.invitation-particles i:nth-child(4){

  left:48%;

  top:79%;

  background:

    rgba(245,231,207,.35);

  animation-delay:-1s;

}


.invitation-particles i:nth-child(5){

  left:62%;

  top:22%;

  animation-delay:-6s;

}


.invitation-particles i:nth-child(6){

  left:76%;

  top:69%;

  background:

    rgba(194,63,128,.42);

  animation-delay:-3s;

}


.invitation-particles i:nth-child(7){

  left:87%;

  top:35%;

  animation-delay:-5s;

}


.invitation-particles i:nth-child(8){

  left:94%;

  top:81%;

  background:

    rgba(245,231,207,.3);

  animation-delay:-7s;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes invitationTwinkle{

  0%,
  100%{

    opacity:.25;

    transform:scale(.75);

  }

  50%{

    opacity:1;

    transform:scale(1.15);

  }

}


@keyframes invitationFlag{

  0%,
  100%{

    rotate:-2deg;

  }

  50%{

    rotate:3deg;

  }

}


@keyframes invitationBalloon{

  0%,
  100%{

    transform:

      translateY(0)

      rotate(-2deg);

  }

  50%{

    transform:

      translateY(-10px)

      rotate(3deg);

  }

}


@keyframes invitationParticle{

  0%{

    opacity:0;

    transform:

      translateY(40px)

      rotate(0);

  }

  18%{

    opacity:.45;

  }

  78%{

    opacity:.18;

  }

  100%{

    opacity:0;

    transform:

      translateY(-100px)

      rotate(170deg);

  }

}


/* =====================================================
   TABLET
===================================================== */

@media(
  max-width:1000px
){

  .scene-invitation{

    min-height:210vh;

  }


  .invitation-stage{

    min-height:650px;

  }


  .invitation-story{

    right:6vw;

    width:46vw;

  }


  .invitation-door-scene{

    left:5vw;

    width:37vw;

  }


  .invitation-line p{

    font-size:

      clamp(
        25px,
        4.2vw,
        43px
      );

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(
  max-width:700px
){

  .scene-invitation{

    min-height:235vh;

  }


  .invitation-stage{

    min-height:620px;

  }


  .invitation-scene-label{

    top:92px;

    right:24px;

  }


  .invitation-story{

    top:31%;

    right:24px;

    left:24px;

    width:auto;

    transform:none;

  }


  .invitation-line{

    grid-template-columns:

      25px

      minmax(0,1fr);

    gap:12px;

  }


  .invitation-line__number{

    padding-top:7px;

    font-size:7px;

  }


  .invitation-line p{

    font-size:

      clamp(
        25px,
        8vw,
        38px
      );

    line-height:1.48;

  }


  .invitation-door-scene{

    top:auto;

    bottom:75px;

    left:50%;

    width:min(
      66vw,
      290px
    );

    height:42vh;

    min-height:300px;

    max-height:390px;

    transform:

      translateX(-50%);

  }


  .invitation-door-caption{

    font-size:6px;

  }


  .invitation-progress{

    right:24px;

    bottom:24px;

    left:24px;

    gap:10px;

    font-size:6px;

  }


  .invitation-orbit--one{

    width:330px;

    height:330px;

  }


  .invitation-orbit--two{

    width:460px;

    height:460px;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(
  prefers-reduced-motion:reduce
){

  .invitation-particles i,

  .invitation-world-light,

  .invitation-world-flag,

  .invitation-world-balloon{

    animation:none;

  }

}

/* =====================================================================
   SCENE 03 — TRANSFORMATION
   A QUIET PLACE BECOMES ALIVE
===================================================================== */


.scene-transform{

  position:relative;

  overflow:hidden;

  background:

    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.82),
      transparent 43%
    ),

    var(--cream);

  transition:

    background-color 1.2s
    var(--ease-slow);

}


/* =====================================================
   INTRO
===================================================== */


.transform-heading{

  position:relative;

  z-index:2;

}


.transform-heading
.scene-title em{

  color:var(--pink);

  font-style:normal;

}


.transform-intro{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  margin:

    25px

    auto

    0;

  color:

    rgba(
      35,
      22,
      42,
      .55
    );

  font-size:12px;

  font-weight:500;

}


.transform-intro span{

  width:35px;

  height:1px;

  background:

    linear-gradient(

      90deg,

      var(--pink),

      var(--gold)

    );

}


/* =====================================================
   OUTER STAGE
===================================================== */


.transform-stage{

  position:relative;

  width:

    min(
      92vw,
      1120px
    );

  margin:

    65px

    auto

    0;

  overflow:hidden;

  border:

    1px

    solid

    rgba(
      35,
      22,
      42,
      .16
    );

  border-radius:5px;

  background:#130b20;

  box-shadow:

    0

    45px

    100px

    rgba(
      32,
      13,
      48,
      .16
    );

}


/* =====================================================
   TOP CAMERA BAR
===================================================== */


.transform-stage__top{

  position:relative;

  z-index:8;

  display:grid;

  grid-template-columns:

    1fr

    auto

    1fr;

  align-items:center;

  min-height:48px;

  padding:

    0

    22px;

  border-bottom:

    1px

    solid

    rgba(
      255,
      255,
      255,
      .07
    );

  color:

    rgba(
      255,
      255,
      255,
      .5
    );

  font-size:8px;

  font-weight:700;

  letter-spacing:.2em;

  direction:ltr;

}


.transform-stage__top
> span:last-child{

  text-align:right;

}


.transform-stage__top
div{

  display:flex;

  align-items:center;

  gap:8px;

  color:

    rgba(
      255,
      255,
      255,
      .78
    );

  direction:rtl;

  letter-spacing:0;

  font-size:10px;

}


.transform-stage__top
i{

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--pink);

  box-shadow:

    0

    0

    12px

    var(--pink);

  animation:

    transformRec

    1.7s

    ease-in-out

    infinite;

}


@keyframes
transformRec{

  50%{

    opacity:.3;

  }

}


/* =====================================================
   VISUAL
===================================================== */


.transform-visual{

  position:relative;

  overflow:hidden;

  background:#130b20;

}


.transform-scene{

  display:block;

  width:100%;

  height:auto;

}


/* =====================================================
   ALIVE REVEAL
===================================================== */


.alive-layer{

  clip-path:

    inset(
      0
      100%
      0
      0
    );

  transition:

    clip-path

    .05s

    linear;

}


/* =====================================================
   MOVING DIVIDER
===================================================== */


.transform-divider{

  position:absolute;

  z-index:10;

  top:0;

  bottom:0;

  left:0;

  width:1px;

  pointer-events:none;

  background:

    linear-gradient(

      transparent,

      rgba(
        255,
        233,
        166,
        .9
      ),

      transparent

    );

  box-shadow:

    0

    0

    20px

    rgba(
      255,
      215,
      124,
      .7
    );

  opacity:.8;

}


.transform-divider span{

  position:absolute;

  top:50%;

  left:50%;

  width:35px;

  height:35px;

  border:

    1px

    solid

    rgba(
      255,
      244,
      205,
      .7
    );

  border-radius:50%;

  transform:

    translate(
      -50%,
      -50%
    );

  background:

    rgba(
      25,
      12,
      35,
      .72
    );

  backdrop-filter:

    blur(
      7px
    );

}


.transform-divider span::before,

.transform-divider span::after{

  content:"";

  position:absolute;

  top:50%;

  width:7px;

  height:7px;

  border-top:

    1px

    solid

    #fff4ce;

  border-right:

    1px

    solid

    #fff4ce;

}


.transform-divider span::before{

  left:7px;

  transform:

    translateY(-50%)

    rotate(-135deg);

}


.transform-divider span::after{

  right:7px;

  transform:

    translateY(-50%)

    rotate(45deg);

}


/* =====================================================
   LABELS
===================================================== */


.transform-labels{

  position:absolute;

  z-index:12;

  right:0;

  bottom:25px;

  left:0;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  padding:

    0

    27px;

  pointer-events:none;

}


.transform-labels span{

  display:flex;

  flex-direction:column;

  gap:3px;

  min-width:120px;

  padding:

    10px

    15px;

  border:

    1px

    solid

    rgba(
      255,
      255,
      255,
      .14
    );

  border-radius:2px;

  background:

    rgba(
      17,
      9,
      27,
      .68
    );

  color:#fff8ec;

  font-size:12px;

  font-weight:600;

  backdrop-filter:

    blur(
      9px
    );

}


.transform-labels small{

  color:var(--gold);

  font-size:7px;

  font-weight:700;

  letter-spacing:.2em;

  direction:ltr;

}


.label-after{

  align-items:flex-end;

  text-align:left;

  opacity:.25;

  transition:

    opacity

    .6s

    ease;

}


/* =====================================================
   SCROLL NOTE
===================================================== */


.transform-scroll-note{

  position:absolute;

  z-index:12;

  right:50%;

  bottom:28px;

  display:flex;

  align-items:center;

  gap:9px;

  color:

    rgba(
      255,
      255,
      255,
      .66
    );

  font-size:9px;

  transform:

    translateX(
      50%
    );

  pointer-events:none;

}


.transform-scroll-note i{

  position:relative;

  width:15px;

  height:24px;

  border:

    1px

    solid

    rgba(
      255,
      255,
      255,
      .45
    );

  border-radius:10px;

}


.transform-scroll-note i::after{

  content:"";

  position:absolute;

  top:5px;

  left:50%;

  width:2px;

  height:5px;

  border-radius:2px;

  background:var(--gold);

  transform:

    translateX(
      -50%
    );

  animation:

    transformScroll

    1.8s

    ease

    infinite;

}


@keyframes
transformScroll{

  70%{

    top:13px;

    opacity:0;

  }

}


/* =====================================================
   BOTTOM BAR
===================================================== */


.transform-stage__bottom{

  position:relative;

  z-index:8;

  display:flex;

  align-items:center;

  justify-content:space-between;

  min-height:43px;

  padding:

    0

    22px;

  border-top:

    1px

    solid

    rgba(
      255,
      255,
      255,
      .07
    );

  color:

    rgba(
      255,
      255,
      255,
      .38
    );

  font-size:7px;

  font-weight:700;

  letter-spacing:.2em;

  direction:ltr;

}


.transform-stage__bottom
div{

  display:flex;

  gap:6px;

}


.transform-stage__bottom
i{

  width:6px;

  height:6px;

  border-radius:50%;

  background:

    rgba(
      255,
      255,
      255,
      .2
    );

}


.transform-stage__bottom
i:nth-child(2){

  background:var(--pink);

}


.transform-stage__bottom
i:nth-child(3){

  background:var(--gold);

}


/* =====================================================
   FINAL MESSAGE
===================================================== */


.scene-transform
.scene-whisper{

  margin-top:55px;

}


/* =====================================================
   TRANSFORMATION — FINAL MESSAGE
===================================================== */

.scene-transform
.scene-whisper strong{

  color:var(--pink);

  font-weight:600;

  text-shadow:

    0 0 24px

    rgba(
      255,
      79,
      163,
      .14
    );

}


/* =====================================================
   TABLET
===================================================== */


@media(
  max-width:900px
){


  .transform-stage{

    width:94vw;

    margin-top:45px;

  }


  .transform-stage__top{

    grid-template-columns:

      1fr

      auto;

  }


  .transform-stage__top
  > span:last-child{

    display:none;

  }


  .transform-scroll-note{

    display:none;

  }


}


/* =====================================================
   MOBILE
===================================================== */


@media(
  max-width:620px
){


  .transform-stage{

    width:

      calc(
        100vw
        -
        24px
      );

    border-radius:3px;

  }


  .transform-stage__top{

    min-height:39px;

    padding:

      0

      12px;

  }


  .transform-stage__top
  > span:first-child{

    font-size:6px;

  }


  .transform-stage__top
  div{

    font-size:8px;

  }


  .transform-labels{

    bottom:10px;

    padding:

      0

      10px;

  }


  .transform-labels span{

    min-width:auto;

    padding:

      7px

      9px;

    font-size:8px;

  }


  .transform-labels small{

    font-size:5px;

  }


  .transform-stage__bottom{

    min-height:35px;

    padding:

      0

      12px;

    font-size:5px;

  }


  .scene-transform
  .scene-whisper{

    margin-top:38px;

  }


}

/* =====================================================================
   SCENE 04 — FOUR WORLDS
   THE FOUR DOORS OF A LIVING PLACE
===================================================================== */


.scene-worlds{

  position:relative;

  overflow:hidden;

  min-height:100vh;

  padding-top:

    clamp(
      100px,
      11vw,
      170px
    );

  padding-bottom:

    clamp(
      90px,
      10vw,
      150px
    );

  background:

    radial-gradient(

      circle at 50% 30%,

      rgba(
        194,
        63,
        208,
        .11
      ),

      transparent 43%

    ),

    linear-gradient(

      180deg,

      #38205f 0%,

      #291849 100%

    );

}


/* QUIET ARCHITECTURAL LINES */


.scene-worlds::before{

  content:"";

  position:absolute;

  width:720px;

  height:720px;

  top:-470px;

  left:50%;

  transform:

    translateX(-50%);

  border:

    1px solid

    rgba(
      255,
      255,
      255,
      .045
    );

  border-radius:50%;

  pointer-events:none;

}


.scene-worlds::after{

  content:"";

  position:absolute;

  inset:0;

  opacity:.18;

  pointer-events:none;

  background-image:

    linear-gradient(

      90deg,

      transparent 49.9%,

      rgba(
        255,
        255,
        255,
        .035
      )

      50%,

      transparent 50.1%

    );

}


/* =====================================================
   INTRO
===================================================== */


.worlds-intro{

  position:relative;

  z-index:2;

  width:min(

    760px,

    calc(
      100% - 40px
    )

  );

  margin:

    0 auto;

  text-align:center;

}


.scene-worlds
.eyebrow{

  color:

    rgba(
      255,
      79,
      163,
      .92
    );

}


.scene-worlds
.scene-title{

  margin-top:20px;

  color:#fff8f1;

  font-weight:400;

  line-height:1.65;

}


.scene-worlds
.scene-title
strong{

  color:#ff8fc5;

  font-weight:600;

}


.worlds-intro__text{

  margin:

    24px auto 0;

  color:

    rgba(
      255,
      248,
      241,
      .55
    );

  font-size:13px;

  font-weight:300;

  line-height:2;

}


/* =====================================================
   DOORS GRID
===================================================== */


.worlds-row{

  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:

    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:

    clamp(
      18px,
      2.5vw,
      38px
    );

  width:

    min(
      1180px,
      calc(
        100% - 64px
      )
    );

  margin:

    clamp(
      65px,
      7vw,
      105px
    )

    auto 0;

  align-items:stretch;

}


/* =====================================================
   ONE WORLD
===================================================== */


.world-door{

  position:relative;

  display:grid;

  grid-template-rows:

    22px

    285px

    180px;

  width:100%;

  min-width:0;

  padding:

    0 12px;

  border:0;

  color:inherit;

  text-align:center;

  background:none;

  cursor:pointer;

  isolation:isolate;

}


/* NUMBER */


.world-door__number{

  display:block;

  color:

    rgba(
      255,
      255,
      255,
      .28
    );

  font-size:9px;

  font-weight:600;

  letter-spacing:.28em;

  transition:

    color .7s ease;

}


/* =====================================================
   DOOR SCENE
===================================================== */


.world-door__scene{

  position:relative;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  width:100%;

  height:285px;

  perspective:900px;

}


/* LIGHT BEHIND DOOR */


.world-door__glow{

  position:absolute;

  width:145px;

  height:210px;

  bottom:8px;

  border-radius:

    74px

    74px

    8px

    8px;

  opacity:.18;

  filter:blur(24px);

  transform:

    scale(.72);

  transition:

    opacity 1s ease,

    transform 1.2s

    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );

  background:

    radial-gradient(

      circle at 50% 45%,

      rgba(
        255,
        222,
        153,
        .95
      ),

      rgba(
        255,
        79,
        163,
        .48
      )

      48%,

      transparent 76%

    );

}


/* FRAME */


.world-door__frame{

  position:absolute;

  bottom:0;

  width:150px;

  height:230px;

  overflow:hidden;

  border:

    1px solid

    rgba(
      255,
      143,
      197,
      .72
    );

  border-bottom:0;

  border-radius:

    76px

    76px

    0

    0;

  box-shadow:

    inset

    0 0 0 6px

    rgba(
      255,
      255,
      255,
      .018
    ),

    0 0 0 1px

    rgba(
      255,
      255,
      255,
      .025
    );

}


/* ACTUAL DOOR */


.world-door__leaf{

  position:absolute;

  inset:7px;

  overflow:hidden;

  border-radius:

    69px

    69px

    0

    0;

  transform-origin:left center;

  transform:

    rotateY(0deg);

  transition:

    transform

    1.15s

    cubic-bezier(
      .18,
      .78,
      .22,
      1
    ),

    box-shadow 1s ease;

  background:

    linear-gradient(

      125deg,

      #2c194c 0%,

      #43216a 48%,

      #25143f 100%

    );

  box-shadow:

    inset

    -12px 0 25px

    rgba(
      0,
      0,
      0,
      .18
    );

}


/* DOOR DETAILS */


.world-door__line{

  position:absolute;

  inset:

    25px

    20px

    22px;

  border:

    1px solid

    rgba(
      255,
      255,
      255,
      .075
    );

  border-radius:

    52px

    52px

    4px

    4px;

}


.world-door__handle{

  position:absolute;

  top:58%;

  right:18px;

  width:7px;

  height:7px;

  border-radius:50%;

  background:#ffd27a;

  box-shadow:

    0 0 15px

    rgba(
      255,
      210,
      122,
      .5
    );

}


/* =====================================================
   WORLD VISUALS
===================================================== */


.world-visual{

  position:absolute;

  z-index:-1;

  width:130px;

  height:195px;

  bottom:13px;

  overflow:hidden;

  border-radius:

    65px

    65px

    3px

    3px;

  opacity:.15;

  transform:

    scale(.88);

  transition:

    opacity 1s ease,

    transform 1.1s ease;

  background:

    linear-gradient(

      180deg,

      #ffacd5,

      #ba42c7 56%,

      #4c236d

    );

}


/* IDENTITY */


.identity-paper{

  position:absolute;

  width:42px;

  height:57px;

  border-radius:2px;

  background:#fff8ef;

  box-shadow:

    0 6px 18px

    rgba(
      40,
      16,
      62,
      .24
    );

}


.identity-paper::after{

  content:"";

  position:absolute;

  width:21px;

  height:2px;

  top:14px;

  left:10px;

  background:#ff4fa3;

  box-shadow:

    0 8px 0

    rgba(
      66,
      31,
      94,
      .32
    ),

    0 15px 0

    rgba(
      66,
      31,
      94,
      .18
    );

}


.identity-paper--one{

  left:22px;

  bottom:28px;

  transform:

    rotate(-9deg);

}


.identity-paper--two{

  right:19px;

  bottom:39px;

  transform:

    rotate(8deg);

}


.identity-flag{

  position:absolute;

  width:4px;

  height:94px;

  left:62px;

  top:26px;

  background:#fff4e4;

}


.identity-flag::after{

  content:"";

  position:absolute;

  width:34px;

  height:51px;

  top:0;

  left:4px;

  border-radius:

    2px

    14px

    14px

    2px;

  background:

    linear-gradient(

      145deg,

      #ff4fa3,

      #8b2db4

    );

}


.identity-shirt{

  position:absolute;

  width:35px;

  height:43px;

  left:48px;

  bottom:17px;

  border-radius:

    8px

    8px

    3px

    3px;

  background:#43235f;

}


/* PLACE */


.place-light{

  position:absolute;

  width:5px;

  height:5px;

  top:30px;

  border-radius:50%;

  background:#fff1a8;

  box-shadow:

    0 0 13px

    #fff1a8;

}


.place-light::before{

  content:"";

  position:absolute;

  width:1px;

  height:30px;

  bottom:4px;

  left:2px;

  background:

    rgba(
      255,
      255,
      255,
      .42
    );

}


.place-light--one{

  left:27px;

}


.place-light--two{

  left:63px;

  top:43px;

}


.place-light--three{

  right:25px;

}


.place-table{

  position:absolute;

  width:76px;

  height:8px;

  left:27px;

  bottom:37px;

  border-radius:50%;

  background:#ffe0c1;

}


.place-table::after{

  content:"";

  position:absolute;

  width:4px;

  height:37px;

  top:5px;

  left:36px;

  background:#ffe0c1;

}


.place-flower{

  position:absolute;

  width:16px;

  height:16px;

  bottom:47px;

  border-radius:

    50%

    50%

    45%

    55%;

  background:#ff4fa3;

  box-shadow:

    8px 2px 0

    #fff3e8,

    -6px 3px 0

    #d249c9;

}


.place-flower--one{

  left:48px;

}


.place-flower--two{

  right:39px;

  transform:

    scale(.75);

}


/* MOVEMENT */


.movement-flag{

  position:absolute;

  width:3px;

  height:115px;

  bottom:18px;

  background:#fff3e8;

}


.movement-flag::after{

  content:"";

  position:absolute;

  width:30px;

  height:67px;

  top:0;

  border-radius:

    2px

    15px

    15px

    2px;

  background:

    linear-gradient(

      160deg,

      #ff4fa3,

      #7d31a9

    );

}


.movement-flag--one{

  left:23px;

  transform:

    rotate(-5deg);

}


.movement-flag--two{

  right:25px;

  transform:

    rotate(5deg);

}


.movement-person{

  position:absolute;

  width:12px;

  height:38px;

  bottom:18px;

  border-radius:

    7px

    7px

    3px

    3px;

  background:#362050;

}


.movement-person::before{

  content:"";

  position:absolute;

  width:11px;

  height:11px;

  top:-9px;

  left:.5px;

  border-radius:50%;

  background:#f2c4ae;

}


.movement-person--one{

  left:53px;

}


.movement-person--two{

  right:43px;

  transform:

    scale(.86);

}


.movement-paper{

  position:absolute;

  width:24px;

  height:15px;

  bottom:47px;

  left:66px;

  transform:

    rotate(-12deg);

  background:#fff7ed;

}


/* CELEBRATION */


.celebration-balloon{

  position:absolute;

  border-radius:

    50%

    50%

    46%

    54%;

}


.celebration-balloon::after{

  content:"";

  position:absolute;

  width:1px;

  height:58px;

  top:100%;

  left:50%;

  background:

    rgba(
      255,
      255,
      255,
      .48
    );

}


.celebration-balloon--one{

  width:32px;

  height:41px;

  left:23px;

  top:55px;

  background:#ff4fa3;

}


.celebration-balloon--two{

  width:38px;

  height:48px;

  left:50px;

  top:32px;

  background:#ffd27a;

}


.celebration-balloon--three{

  width:29px;

  height:38px;

  right:20px;

  top:67px;

  background:#fff5eb;

}


.celebration-confetti{

  position:absolute;

  width:4px;

  height:11px;

  border-radius:3px;

}


.celebration-confetti--one{

  left:26px;

  top:30px;

  transform:

    rotate(30deg);

  background:#fff;

}


.celebration-confetti--two{

  right:24px;

  top:35px;

  transform:

    rotate(-35deg);

  background:#ff4fa3;

}


.celebration-confetti--three{

  left:65px;

  top:112px;

  transform:

    rotate(65deg);

  background:#ffd27a;

}


/* =====================================================
   COPY — FIXED HEIGHT
===================================================== */


.world-door__copy{

  display:grid;

  grid-template-rows:

    35px

    78px

    42px;

  align-content:start;

  width:100%;

  padding-top:20px;

}


.world-name{

  display:block;

  color:#fff8f1;

  font-size:17px;

  font-weight:600;

  transition:

    color .7s ease;

}


.world-whisper{

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  max-width:220px;

  height:78px;

  margin:auto;

  overflow:hidden;

  color:

    rgba(
      255,
      248,
      241,
      .65
    );

  font-size:12px;

  font-weight:300;

  line-height:1.9;

  opacity:0;

  transform:

    translateY(8px);

  transition:

    opacity .65s ease,

    transform .8s ease;

}


.world-items{

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  height:42px;

  color:#ffd27a;

  font-size:10px;

  font-weight:500;

  line-height:1.8;

  opacity:0;

  transform:

    translateY(7px);

  transition:

    opacity .65s ease .08s,

    transform .8s ease .08s;

}


/* =====================================================
   INTERACTION
===================================================== */


.world-door:hover
.world-door__leaf,

.world-door:focus-visible
.world-door__leaf,

.world-door.is-open
.world-door__leaf{

  transform:

    rotateY(-58deg);

  box-shadow:

    20px 7px 30px

    rgba(
      12,
      5,
      23,
      .32
    );

}


.world-door:hover
.world-door__glow,

.world-door:focus-visible
.world-door__glow,

.world-door.is-open
.world-door__glow{

  opacity:.9;

  transform:

    scale(1.05);

}


.world-door:hover
.world-visual,

.world-door:focus-visible
.world-visual,

.world-door.is-open
.world-visual{

  opacity:1;

  transform:

    scale(1);

}


.world-door:hover
.world-whisper,

.world-door:focus-visible
.world-whisper,

.world-door.is-open
.world-whisper,

.world-door:hover
.world-items,

.world-door:focus-visible
.world-items,

.world-door.is-open
.world-items{

  opacity:1;

  transform:

    translateY(0);

}


.world-door:hover
.world-name,

.world-door:focus-visible
.world-name,

.world-door.is-open
.world-name{

  color:#ff8fc5;

}


.world-door:hover
.world-door__number,

.world-door:focus-visible
.world-door__number,

.world-door.is-open
.world-door__number{

  color:#ffd27a;

}


/* ACCESSIBLE FOCUS */


.world-door:focus-visible{

  outline:

    1px solid

    rgba(
      255,
      210,
      122,
      .75
    );

  outline-offset:10px;

}


/* =====================================================
   BOTTOM LINE
===================================================== */


.worlds-closing{

  position:relative;

  z-index:3;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:22px;

  width:

    min(
      600px,
      calc(
        100% - 40px
      )
    );

  margin:

    clamp(
      45px,
      6vw,
      85px
    )

    auto 0;

}


.worlds-closing > span{

  width:70px;

  height:1px;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(
        255,
        143,
        197,
        .52
      )

    );

}


.worlds-closing > span:last-child{

  transform:

    scaleX(-1);

}


.worlds-closing p{

  color:

    rgba(
      255,
      248,
      241,
      .52
    );

  font-size:12px;

  font-weight:300;

  white-space:nowrap;

}


.worlds-closing strong{

  color:#fff8f1;

  font-weight:600;

}


/* =====================================================
   TABLET
===================================================== */


@media(
  max-width:950px
){

  .worlds-row{

    grid-template-columns:

      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:

      min(
        680px,
        calc(
          100% - 40px
        )
      );

    row-gap:55px;

  }

}


/* =====================================================
   MOBILE
===================================================== */


@media(
  max-width:560px
){

  .scene-worlds{

    padding-top:95px;

    padding-bottom:90px;

  }


  .worlds-row{

    grid-template-columns:1fr;

    width:

      min(
        330px,
        calc(
          100% - 32px
        )
      );

    gap:38px;

    margin-top:60px;

  }


  .world-door{

    grid-template-rows:

      22px

      265px

      165px;

  }


  .world-door__scene{

    height:265px;

  }


  .world-door__copy{

    grid-template-rows:

      35px

      72px

      38px;

  }


  .world-whisper{

    opacity:.72;

    transform:none;

  }


  .world-items{

    opacity:.78;

    transform:none;

  }


  .worlds-closing{

    gap:13px;

  }


  .worlds-closing > span{

    width:28px;

  }


  .worlds-closing p{

    white-space:normal;

    text-align:center;

    line-height:1.9;

  }

}

/* =====================================================
   SCENE 05 + 06
   JOURNEY / SEASONS EXPERIENCE
===================================================== */

.scene-experience{

  position:relative;

  overflow:hidden;

  padding:

  clamp(110px,12vw,180px)

  clamp(24px,6vw,90px);

  background:

  radial-gradient(

    circle at 20% 12%,

    rgba(255,79,163,.09),

    transparent 30%

  ),

  linear-gradient(

    180deg,

    #3a235d 0%,

    #281746 48%,

    #170d2d 100%

  );

  color:#fff;

}


.scene-experience::before{

  content:"";

  position:absolute;

  width:680px;

  height:680px;

  top:24%;

  left:-380px;

  border:

  1px solid

  rgba(255,79,163,.11);

  border-radius:50%;

  box-shadow:

  0 0 0 70px

  rgba(255,79,163,.035),

  0 0 0 150px

  rgba(255,79,163,.02);

  pointer-events:none;

}


.experience-shell{

  position:relative;

  z-index:2;

  width:min(1180px,100%);

  margin:auto;

}


.experience-intro{

  width:min(760px,100%);

  margin:0 auto;

  text-align:center;

}


.experience-intro .scene-title{

  color:#fff;

  margin-top:18px;

  line-height:1.55;

}


.experience-intro .scene-title em,

.season-experience__intro em{

  color:#ff69b5;

  font-style:normal;

}


.experience-intro__text{

  max-width:670px;

  margin:

  28px auto 0;

  color:

  rgba(255,255,255,.63);

  font-size:

  clamp(14px,1.3vw,17px);

  font-weight:300;

  line-height:2.05;

}


/* PROMISE */


.experience-promise{

  display:grid;

  grid-template-columns:

  minmax(280px,.8fr)

  minmax(420px,1.2fr);

  align-items:center;

  gap:

  clamp(60px,9vw,130px);

  margin-top:

  clamp(90px,11vw,150px);

}


/* MAIN DOOR */


.experience-promise__door{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

}


.promise-door__halo{

  position:absolute;

  width:360px;

  height:360px;

  top:30px;

  border-radius:50%;

  background:

  radial-gradient(

    circle,

    rgba(255,79,163,.2),

    transparent 68%

  );

  filter:blur(15px);

}


.promise-door__frame{

  position:relative;

  width:

  clamp(210px,22vw,280px);

  height:

  clamp(340px,35vw,430px);

  padding:10px;

  border:

  1px solid

  rgba(255,105,181,.48);

  border-radius:

  145px 145px 8px 8px;

  box-shadow:

  0 0 45px

  rgba(255,79,163,.08);

}


.promise-door__frame::before,

.promise-door__frame::after{

  content:"";

  position:absolute;

  inset:-12px;

  border:

  1px solid

  rgba(255,255,255,.07);

  border-radius:

  155px 155px 10px 10px;

}


.promise-door__frame::after{

  inset:-23px;

  opacity:.55;

}


.promise-door__light{

  position:absolute;

  inset:20px;

  border-radius:

  125px 125px 4px 4px;

  background:

  radial-gradient(

    circle at 50% 18%,

    #ffd59a,

    #ff69b5 43%,

    #7e267f 74%,

    #24123d 100%

  );

  box-shadow:

  0 0 50px

  rgba(255,79,163,.25);

}


.promise-door__leaf{

  position:absolute;

  inset:20px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:

  125px 125px 4px 4px;

  background:

  linear-gradient(

    145deg,

    #24143d,

    #10091e

  );

  transform-origin:left center;

  transform:

  perspective(900px)

  rotateY(-19deg);

  box-shadow:

  20px 10px 35px

  rgba(0,0,0,.4);

  transition:

  transform 1.4s

  cubic-bezier(.22,1,.36,1);

}


.experience-promise__door:hover

.promise-door__leaf{

  transform:

  perspective(900px)

  rotateY(-38deg);

}


.promise-door__logo{

  color:

  rgba(255,255,255,.68);

  font-size:12px;

  font-weight:500;

  letter-spacing:.28em;

  line-height:1.9;

  text-align:center;

}


.promise-door__handle{

  position:absolute;

  left:20px;

  top:57%;

  width:8px;

  height:8px;

  border-radius:50%;

  background:#ffd27a;

  box-shadow:

  0 0 15px

  rgba(255,210,122,.65);

}


.experience-promise__door p{

  position:relative;

  margin-top:46px;

  color:

  rgba(255,255,255,.5);

  font-size:14px;

  text-align:center;

}


.experience-promise__door p strong{

  display:block;

  margin-top:7px;

  color:#fff;

  font-size:

  clamp(18px,2vw,24px);

  font-weight:600;

}


/* STEPS */


.experience-steps{

  position:relative;

}


.experience-steps::before{

  content:"";

  position:absolute;

  top:22px;

  bottom:22px;

  right:25px;

  width:1px;

  background:

  linear-gradient(

    #ff4fa3,

    rgba(255,79,163,.12)

  );

}


.experience-step{

  position:relative;

  display:grid;

  grid-template-columns:

  52px 1fr;

  gap:25px;

  min-height:150px;

  padding-bottom:35px;

}


.experience-step__number{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:center;

  width:52px;

  height:52px;

  border:

  1px solid

  rgba(255,79,163,.55);

  border-radius:50%;

  color:#ff69b5;

  background:#281746;

  font-size:10px;

  letter-spacing:.15em;

  transition:

  .6s ease;

}


.experience-step:hover

.experience-step__number{

  color:#281746;

  background:#ff69b5;

  box-shadow:

  0 0 30px

  rgba(255,79,163,.28);

}


.experience-step small{

  color:#ff69b5;

  font-size:10px;

  letter-spacing:.18em;

}


.experience-step h3{

  margin-top:7px;

  color:#fff;

  font-size:

  clamp(17px,1.8vw,22px);

  font-weight:600;

}


.experience-step p{

  max-width:490px;

  margin-top:10px;

  color:

  rgba(255,255,255,.52);

  font-size:13px;

  font-weight:300;

  line-height:1.9;

}


/* ASSURANCE */


.experience-assurance{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin-top:90px;

  padding:

  30px 35px;

  border-top:

  1px solid

  rgba(255,255,255,.1);

  border-bottom:

  1px solid

  rgba(255,255,255,.1);

  color:

  rgba(255,255,255,.55);

  font-size:12px;

}


.experience-assurance i{

  width:4px;

  height:4px;

  border-radius:50%;

  background:#ff4fa3;

}


.experience-assurance strong{

  width:100%;

  margin-top:8px;

  color:#fff;

  font-size:

  clamp(18px,2.2vw,27px);

  font-weight:500;

  text-align:center;

}


/* SEASONS */


.season-experience{

  margin-top:

  clamp(140px,17vw,230px);

}


.season-experience__intro{

  width:min(680px,100%);

  margin:auto;

  text-align:center;

}


.season-experience__intro

.scene-title{

  margin-top:18px;

  color:#fff;

  line-height:1.55;

}


.season-experience__intro > p:last-child{

  max-width:580px;

  margin:

  26px auto 0;

  color:

  rgba(255,255,255,.55);

  font-size:14px;

  font-weight:300;

  line-height:2;

}


.season-showcase{

  display:grid;

  grid-template-columns:

  repeat(4,1fr);

  gap:1px;

  margin-top:75px;

  border:

  1px solid

  rgba(255,255,255,.1);

  background:

  rgba(255,255,255,.1);

}


.season-story{

  position:relative;

  min-height:440px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  align-items:flex-start;

  overflow:hidden;

  padding:34px 27px;

  text-align:right;

  background:#21133b;

  isolation:isolate;

}


.season-story::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-2;

  opacity:.08;

  transform:scale(.94);

  transition:

  opacity 1s ease,

  transform 1.2s

  cubic-bezier(.22,1,.36,1);

}


.season-story::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  background:

  linear-gradient(

    180deg,

    transparent 10%,

    rgba(15,7,28,.3) 48%,

    rgba(15,7,28,.96) 100%

  );

}


.season-story--ramadan::before{

  background:

  radial-gradient(

    circle at 50% 18%,

    #ffd27a,

    #653087 58%,

    #21133b 100%

  );

}


.season-story--christmas::before{

  background:

  radial-gradient(

    circle at 50% 18%,

    #ff9eaf,

    #8e183e 55%,

    #21133b 100%

  );

}


.season-story--summer::before{

  background:

  radial-gradient(

    circle at 50% 18%,

    #ffe98f,

    #e64e92 56%,

    #21133b 100%

  );

}


.season-story--celebration::before{

  background:

  radial-gradient(

    circle at 50% 18%,

    #ffc7e8,

    #843b9d 56%,

    #21133b 100%

  );

}


.season-story:hover::before,

.season-story.is-active::before{

  opacity:1;

  transform:scale(1);

}


.season-story__number{

  position:absolute;

  top:25px;

  right:25px;

  color:

  rgba(255,255,255,.35);

  font-size:10px;

  letter-spacing:.2em;

}


.season-story__icon{

  position:absolute;

  top:80px;

  left:50%;

  color:

  rgba(255,255,255,.86);

  font-size:66px;

  font-weight:200;

  transform:

  translateX(-50%);

  text-shadow:

  0 0 35px

  rgba(255,255,255,.35);

  transition:

  transform 1s

  cubic-bezier(.22,1,.36,1);

}


.season-story:hover

.season-story__icon,

.season-story.is-active

.season-story__icon{

  transform:

  translateX(-50%)

  translateY(-8px)

  scale(1.08);

}


.season-story__name{

  color:#fff;

  font-size:

  clamp(18px,2vw,25px);

  font-weight:600;

}


.season-story__details{

  min-height:55px;

  margin-top:13px;

  color:

  rgba(255,255,255,.58);

  font-size:12px;

  font-weight:300;

  line-height:1.9;

  opacity:.55;

  transition:

  opacity .7s ease;

}


.season-story:hover

.season-story__details,

.season-story.is-active

.season-story__details{

  opacity:1;

}


.season-message{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;

  margin-top:55px;

}


.season-message > span{

  color:#ff69b5;

  font-size:9px;

  letter-spacing:.32em;

}


.season-message strong{

  color:#fff;

  font-size:

  clamp(17px,2vw,25px);

  font-weight:400;

}


.season-message em{

  color:#ff69b5;

  font-style:normal;

}


/* RESPONSIVE */


@media(max-width:900px){


  .experience-promise{

    grid-template-columns:1fr;

  }


  .experience-promise__door{

    margin-bottom:30px;

  }


  .season-showcase{

    grid-template-columns:

    repeat(2,1fr);

  }


}


@media(max-width:600px){


  .scene-experience{

    padding-inline:18px;

  }


  .experience-intro__text br{

    display:none;

  }


  .experience-promise{

    margin-top:80px;

  }


  .experience-step{

    grid-template-columns:

    46px 1fr;

    gap:18px;

  }


  .experience-step__number{

    width:46px;

    height:46px;

  }


  .experience-steps::before{

    right:22px;

  }


  .experience-assurance{

    gap:11px;

    padding-inline:12px;

  }


  .season-showcase{

    grid-template-columns:1fr;

  }


  .season-story{

    min-height:320px;

  }


  .season-message{

    flex-direction:column;

    text-align:center;

  }


}

/* =====================================================
   SCENE 07 — THE OPENING MOMENT
===================================================== */

.opening-story{

  position:relative;

  height:650vh;

  background:#140923;

}


.opening-story__sticky{

  position:sticky;

  top:0;

  width:100%;

  height:100vh;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  padding:

  82px

  clamp(18px,5vw,70px)

  28px;

}


.opening-story__header{

  position:absolute;

  z-index:20;

  top:clamp(90px,11vh,125px);

  left:50%;

  width:100%;

  text-align:center;

  transform:translateX(-50%);

}


.opening-story__header .eyebrow{

  color:

  rgba(255,255,255,.48);

}


.opening-story__header h2{

  margin-top:10px;

  color:#fff;

  font-size:

  clamp(25px,3.2vw,46px);

  font-weight:500;

}


.opening-story__header h2 em{

  color:#ff62b3;

  font-style:normal;

}


/* VISUAL */


.opening-visual{

  position:relative;

  width:min(1080px,94vw);

  height:min(58vh,570px);

  margin-top:75px;

  overflow:hidden;

  border:

  1px solid

  rgba(255,255,255,.08);

  background:

  linear-gradient(

    180deg,

    #160b2b 0%,

    #251342 65%,

    #12091f 100%

  );

  box-shadow:

  0 45px 100px

  rgba(0,0,0,.28);

}


.opening-sky{

  position:absolute;

  inset:0;

  opacity:0;

  background:

  radial-gradient(

    circle at 50% 28%,

    rgba(255,187,225,.75),

    rgba(168,53,150,.32) 35%,

    transparent 70%

  );

}


.opening-light{

  position:absolute;

  z-index:3;

  top:0;

  width:200px;

  height:100%;

  opacity:0;

  filter:blur(25px);

  background:

  linear-gradient(

    180deg,

    rgba(255,218,158,.55),

    transparent 75%

  );

}


.opening-light--one{

  left:12%;

  transform:

  rotate(16deg);

}


.opening-light--two{

  right:12%;

  transform:

  rotate(-16deg);

}


/* BUILDING */


.opening-building{

  position:absolute;

  z-index:5;

  right:10%;

  bottom:13%;

  width:80%;

  height:61%;

  opacity:.14;

  background:

  linear-gradient(

    180deg,

    #35234d,

    #1b102e

  );

  border-top:

  1px solid

  rgba(255,255,255,.13);

}


.building-line{

  position:absolute;

  top:0;

  bottom:0;

  width:1px;

  background:

  rgba(255,255,255,.07);

}


.building-line--right{

  right:25%;

}


.building-line--left{

  left:25%;

}


.building-sign{

  position:absolute;

  top:11%;

  left:50%;

  display:flex;

  align-items:center;

  gap:12px;

  color:

  rgba(255,255,255,.9);

  transform:

  translateX(-50%);

}


.building-sign__icon{

  position:relative;

  width:26px;

  height:34px;

  border:

  2px solid #ff68b7;

  border-bottom:0;

  border-radius:

  15px 15px 0 0;

}


.building-sign strong{

  white-space:nowrap;

  font-size:

  clamp(11px,1.4vw,18px);

  font-weight:500;

  letter-spacing:.14em;

}


.building-sign em{

  color:#ff62b3;

  font-style:normal;

}


/* ENTRANCE */


.opening-entrance{

  position:absolute;

  bottom:0;

  left:50%;

  width:30%;

  height:66%;

  overflow:hidden;

  border:

  1px solid

  rgba(255,255,255,.24);

  transform:

  translateX(-50%);

}


.entrance-glow{

  position:absolute;

  inset:0;

  opacity:.1;

  background:

  radial-gradient(

    circle at 50% 45%,

    #fff4d0,

    #ff72bb 42%,

    #8a347f 100%

  );

}


.entrance-door{

  position:absolute;

  z-index:2;

  top:0;

  width:50%;

  height:100%;

  background:

  linear-gradient(

    160deg,

    rgba(30,17,49,.95),

    rgba(13,7,24,.97)

  );

  transition:none;

}


.entrance-door--right{

  right:0;

  transform-origin:right;

}


.entrance-door--left{

  left:0;

  transform-origin:left;

}


.entrance-welcome{

  position:absolute;

  z-index:4;

  left:50%;

  bottom:13%;

  color:#fff;

  font-size:

  clamp(8px,1vw,12px);

  white-space:nowrap;

  opacity:0;

  transform:

  translateX(-50%);

}


/* BALLOONS */


.opening-balloons{

  position:absolute;

  z-index:10;

  left:50%;

  bottom:-3%;

  width:38%;

  height:72%;

  opacity:0;

  transform:

  translateX(-50%)

  translateY(35px);

}


.opening-balloons i{

  position:absolute;

  width:12%;

  aspect-ratio:1;

  border-radius:50%;

  background:#ff5eae;

  box-shadow:

  inset -6px -5px 12px

  rgba(75,10,62,.22);

}


.opening-balloons i:nth-child(2n){

  background:#f7d7e9;

}


.opening-balloons i:nth-child(3n){

  background:#d89bd0;

}


.opening-balloons i:nth-child(1){

  right:4%;

  bottom:1%;

}


.opening-balloons i:nth-child(2){

  right:0;

  bottom:15%;

}


.opening-balloons i:nth-child(3){

  right:3%;

  bottom:30%;

}


.opening-balloons i:nth-child(4){

  right:10%;

  bottom:44%;

}


.opening-balloons i:nth-child(5){

  right:21%;

  bottom:55%;

}


.opening-balloons i:nth-child(6){

  right:34%;

  bottom:61%;

}


.opening-balloons i:nth-child(7){

  right:46%;

  bottom:63%;

}


.opening-balloons i:nth-child(8){

  left:32%;

  bottom:61%;

}


.opening-balloons i:nth-child(9){

  left:20%;

  bottom:55%;

}


.opening-balloons i:nth-child(10){

  left:9%;

  bottom:44%;

}


.opening-balloons i:nth-child(11){

  left:2%;

  bottom:30%;

}


.opening-balloons i:nth-child(12){

  left:0;

  bottom:15%;

}


.opening-balloons i:nth-child(13){

  left:4%;

  bottom:1%;

}


.opening-balloons i:nth-child(14){

  left:43%;

  bottom:61%;

}


/* FLOWERS */


.opening-flowers{

  position:absolute;

  z-index:9;

  bottom:0;

  width:15%;

  height:40%;

  opacity:0;

  transform:

  translateY(30px);

}


.opening-flowers--right{

  right:25%;

}


.opening-flowers--left{

  left:25%;

}


.opening-flowers i{

  position:absolute;

  bottom:0;

  width:38%;

  aspect-ratio:1;

  border-radius:

  50% 50% 46% 54%;

  background:#ff68b7;

}


.opening-flowers i:nth-child(2){

  right:25%;

  bottom:18%;

  background:#f4d3e8;

}


.opening-flowers i:nth-child(3){

  left:7%;

  bottom:29%;

  background:#d59acb;

}


.opening-flowers i:nth-child(4){

  right:3%;

  bottom:36%;

  background:#ff86c6;

}


.opening-flowers i:nth-child(5){

  left:31%;

  bottom:48%;

  background:#f6d49b;

}


/* FLAGS */


.opening-flag{

  position:absolute;

  z-index:12;

  bottom:12%;

  width:12%;

  height:56%;

  opacity:0;

  transform:

  translateY(50px);

}


.opening-flag--right{

  right:7%;

}


.opening-flag--left{

  left:7%;

}


.opening-flag::before{

  content:"";

  position:absolute;

  left:50%;

  top:0;

  bottom:0;

  width:2px;

  background:

  rgba(255,255,255,.45);

}


.opening-flag__fabric{

  position:absolute;

  top:4%;

  left:50%;

  width:72%;

  height:70%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  color:#35173e;

  background:

  linear-gradient(

    135deg,

    #fff1f8,

    #efbad8

  );

  border-radius:

  50% 50% 8px 8px;

  font-size:

  clamp(5px,.65vw,8px);

  font-weight:600;

  letter-spacing:.12em;

  transform:

  translateX(-50%)

  rotate(-3deg);

}


.opening-flag__fabric b{

  color:#e23f99;

}


/* TEAM */


.opening-team{

  position:absolute;

  z-index:14;

  inset:0;

  pointer-events:none;

}


.opening-person{

  position:absolute;

  bottom:9%;

  width:6%;

  height:29%;

  opacity:0;

  transform:

  translateY(40px);

}


.opening-person--one{

  right:17%;

}


.opening-person--two{

  left:17%;

}


.person-head{

  position:absolute;

  top:0;

  left:50%;

  width:31%;

  aspect-ratio:1;

  border-radius:50%;

  background:#e4ae85;

  transform:

  translateX(-50%);

}


.person-body{

  position:absolute;

  top:20%;

  left:17%;

  width:66%;

  height:64%;

  border-radius:

  15px 15px 5px 5px;

  background:

  linear-gradient(

    #17111f,

    #06040a

  );

  border:

  1px solid

  rgba(255,104,183,.4);

}


.person-arm{

  position:absolute;

  top:31%;

  width:75%;

  height:8px;

  border-radius:8px;

  background:#121018;

  transform:

  rotate(-24deg);

}


.opening-person--one

.person-arm{

  right:45%;

}


.opening-person--two

.person-arm{

  left:45%;

  transform:

  rotate(24deg);

}


.opening-person b{

  position:absolute;

  z-index:4;

  top:43%;

  left:50%;

  color:#ff62b3;

  font-size:

  clamp(4px,.55vw,7px);

  letter-spacing:.12em;

  transform:

  translateX(-50%);

}


/* GUESTS */


.opening-guests{

  position:absolute;

  z-index:15;

  left:50%;

  bottom:0;

  width:52%;

  height:23%;

  opacity:0;

  transform:

  translateX(-50%)

  translateY(60px);

}


.opening-guests span{

  position:absolute;

  bottom:-14%;

  width:12%;

  height:75%;

  border-radius:

  45% 45% 0 0;

  background:#11091d;

}


.opening-guests span::before{

  content:"";

  position:absolute;

  left:50%;

  top:-22%;

  width:58%;

  aspect-ratio:1;

  border-radius:50%;

  background:#160c24;

  transform:

  translateX(-50%);

}


.opening-guests span:nth-child(1){

  left:0;

  height:62%;

}


.opening-guests span:nth-child(2){

  left:18%;

  height:84%;

}


.opening-guests span:nth-child(3){

  left:36%;

  height:68%;

}


.opening-guests span:nth-child(4){

  right:36%;

  height:78%;

}


.opening-guests span:nth-child(5){

  right:18%;

  height:65%;

}


.opening-guests span:nth-child(6){

  right:0;

  height:82%;

}


/* CONFETTI */


.opening-confetti{

  position:absolute;

  z-index:30;

  inset:0;

  opacity:0;

}


.opening-confetti i{

  position:absolute;

  width:7px;

  height:15px;

  background:#ff61b3;

  transform:

  rotate(25deg);

}


.opening-confetti i:nth-child(2n){

  width:6px;

  height:6px;

  border-radius:50%;

  background:#ffd477;

}


.opening-confetti i:nth-child(3n){

  background:#fff;

}


.opening-confetti i:nth-child(1){

  left:8%;

  top:17%;

}


.opening-confetti i:nth-child(2){

  left:17%;

  top:31%;

}


.opening-confetti i:nth-child(3){

  left:26%;

  top:12%;

}


.opening-confetti i:nth-child(4){

  left:34%;

  top:25%;

}


.opening-confetti i:nth-child(5){

  left:42%;

  top:10%;

}


.opening-confetti i:nth-child(6){

  left:48%;

  top:30%;

}


.opening-confetti i:nth-child(7){

  left:55%;

  top:15%;

}


.opening-confetti i:nth-child(8){

  left:62%;

  top:26%;

}


.opening-confetti i:nth-child(9){

  left:70%;

  top:11%;

}


.opening-confetti i:nth-child(10){

  left:78%;

  top:31%;

}


.opening-confetti i:nth-child(11){

  left:87%;

  top:17%;

}


.opening-confetti i:nth-child(12){

  left:92%;

  top:38%;

}


.opening-confetti i:nth-child(13){

  left:12%;

  top:49%;

}


.opening-confetti i:nth-child(14){

  left:38%;

  top:43%;

}


.opening-confetti i:nth-child(15){

  left:67%;

  top:47%;

}


.opening-confetti i:nth-child(16){

  left:84%;

  top:52%;

}


.opening-floor{

  position:absolute;

  z-index:2;

  right:0;

  bottom:0;

  left:0;

  height:13%;

  background:

  linear-gradient(

    180deg,

    #25133d,

    #100719

  );

}


/* PROGRESS */


.opening-progress{

  position:absolute;

  z-index:40;

  right:

  clamp(20px,5vw,70px);

  bottom:24px;

  display:grid;

  grid-template-columns:

  38px minmax(160px,300px);

  align-items:center;

  gap:15px;

}


.opening-progress__number{

  color:#ff62b3;

  font-size:11px;

  letter-spacing:.2em;

}


.opening-progress small{

  color:

  rgba(255,255,255,.4);

  font-size:9px;

  letter-spacing:.12em;

}


.opening-progress p{

  margin-top:3px;

  color:#fff;

  font-size:

  clamp(11px,1vw,13px);

  font-weight:300;

}


.opening-progress__line{

  grid-column:1 / -1;

  position:relative;

  width:100%;

  height:1px;

  overflow:hidden;

  background:

  rgba(255,255,255,.14);

}


.opening-progress__line i{

  position:absolute;

  top:0;

  right:0;

  width:0;

  height:100%;

  background:#ff62b3;

}


/* =====================================================
   SCENE 08 — BEYOND THE OPENING
===================================================== */

.beyond-opening{

  position:relative;

  overflow:hidden;

  padding:

  clamp(130px,15vw,210px)

  clamp(20px,6vw,90px);

  background:

  radial-gradient(

    circle at 85% 10%,

    rgba(255,79,163,.12),

    transparent 25%

  ),

  linear-gradient(

    180deg,

    #170c2c,

    #2d174a 48%,

    #180c2d

  );

  color:#fff;

}


.beyond-opening__intro{

  width:min(850px,100%);

  margin:auto;

  text-align:center;

}


.beyond-opening__intro .eyebrow{

  color:#ff62b3;

}


.beyond-opening__intro h2{

  margin-top:18px;

  color:#fff;

  font-size:

  clamp(28px,4.2vw,57px);

  font-weight:500;

  line-height:1.55;

}


.beyond-opening__intro h2 em{

  color:#ff62b3;

  font-style:normal;

}


.beyond-opening__intro > p:last-child{

  max-width:650px;

  margin:

  28px auto 0;

  color:

  rgba(255,255,255,.56);

  font-size:

  clamp(13px,1.25vw,16px);

  font-weight:300;

  line-height:2;

}


/* EDITORIAL */


.activation-editorial{

  width:min(1180px,100%);

  margin:

  clamp(100px,13vw,180px)

  auto 0;

}


.activation-feature{

  display:grid;

  grid-template-columns:

  minmax(0,1.15fr)

  minmax(300px,.85fr);

  align-items:center;

  gap:

  clamp(55px,9vw,130px);

  min-height:610px;

  padding:

  90px 0;

  border-top:

  1px solid

  rgba(255,255,255,.1);

}


.activation-feature--people{

  grid-template-columns:

  minmax(300px,.85fr)

  minmax(0,1.15fr);

}


.activation-art{

  position:relative;

  min-height:450px;

  overflow:hidden;

  background:

  linear-gradient(

    145deg,

    rgba(255,255,255,.055),

    rgba(255,255,255,.015)

  );

  border:

  1px solid

  rgba(255,255,255,.08);

}


.activation-art::after{

  content:"";

  position:absolute;

  right:8%;

  bottom:8%;

  left:8%;

  height:1px;

  background:

  rgba(255,255,255,.12);

}


.activation-art__glow{

  position:absolute;

  width:360px;

  height:360px;

  top:50%;

  left:50%;

  border-radius:50%;

  background:

  radial-gradient(

    circle,

    rgba(255,79,163,.32),

    transparent 68%

  );

  filter:blur(20px);

  transform:

  translate(-50%,-50%);

}


.activation-copy{

  position:relative;

}


.activation-copy__number{

  display:block;

  margin-bottom:45px;

  color:

  rgba(255,255,255,.25);

  font-size:11px;

  letter-spacing:.25em;

}


.activation-copy .eyebrow{

  color:#ff62b3;

}


.activation-copy h3{

  margin-top:13px;

  color:#fff;

  font-size:

  clamp(27px,3.3vw,45px);

  font-weight:500;

  line-height:1.55;

}


.activation-copy h3 em{

  display:block;

  color:#ff62b3;

  font-style:normal;

}


.activation-copy > p:not(.eyebrow){

  max-width:470px;

  margin-top:25px;

  color:

  rgba(255,255,255,.55);

  font-size:14px;

  font-weight:300;

  line-height:2;

}


.activation-tags{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:12px;

  margin-top:35px;

  color:

  rgba(255,255,255,.43);

  font-size:10px;

}


.activation-tags i{

  width:4px;

  height:4px;

  border-radius:50%;

  background:#ff62b3;

}


/* TRUCK */


.brand-truck{

  position:absolute;

  z-index:4;

  left:50%;

  bottom:19%;

  width:78%;

  height:34%;

  transform:

  translateX(-50%);

}


.brand-truck__body{

  position:absolute;

  right:4%;

  bottom:16%;

  width:65%;

  height:64%;

  display:flex;

  align-items:center;

  gap:18px;

  padding:0 25px;

  color:#fff;

  background:

  linear-gradient(

    130deg,

    #ff62b3,

    #8c2e92

  );

  border-radius:

  7px 4px 4px 7px;

  box-shadow:

  0 25px 45px

  rgba(0,0,0,.28);

}


.brand-truck__body b{

  font-size:

  clamp(16px,2.3vw,29px);

  line-height:.95;

}


.brand-truck__body small{

  padding-right:18px;

  border-right:

  1px solid

  rgba(255,255,255,.4);

  font-size:

  clamp(6px,.8vw,9px);

  letter-spacing:.12em;

}


.brand-truck__front{

  position:absolute;

  left:4%;

  bottom:16%;

  width:31%;

  height:58%;

  background:#f4d9e8;

  clip-path:

  polygon(

    0 30%,

    25% 0,

    100% 0,

    100% 100%,

    0 100%

  );

  border-radius:5px;

}


.brand-truck__front::before{

  content:"";

  position:absolute;

  top:12%;

  left:12%;

  width:47%;

  height:31%;

  background:#281642;

  clip-path:

  polygon(

    0 45%,

    30% 0,

    100% 0,

    100% 100%,

    0 100%

  );

}


.brand-truck__wheel{

  position:absolute;

  bottom:0;

  width:14%;

  aspect-ratio:1;

  border:

  8px solid #08050c;

  border-radius:50%;

  background:#4a3a55;

}


.brand-truck__wheel--one{

  left:16%;

}


.brand-truck__wheel--two{

  right:13%;

}


/* PEOPLE ART */


.activation-flag{

  position:absolute;

  z-index:2;

  top:7%;

  right:14%;

  width:28%;

  height:75%;

}


.activation-flag::before{

  content:"";

  position:absolute;

  top:0;

  bottom:0;

  right:0;

  width:2px;

  background:

  rgba(255,255,255,.42);

}


.activation-flag span{

  position:absolute;

  top:0;

  right:3px;

  width:84%;

  height:72%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  color:#32183e;

  background:

  linear-gradient(

    145deg,

    #fff,

    #efb7d8

  );

  border-radius:

  70% 30% 45% 55%;

  font-size:

  clamp(6px,.75vw,10px);

  font-weight:600;

  letter-spacing:.13em;

  transform:

  rotate(-4deg);

}


.activation-flag b{

  color:#e03d98;

}


.activation-person{

  position:absolute;

  z-index:5;

  bottom:8%;

  width:18%;

  height:57%;

}


.activation-person--left{

  left:22%;

}


.activation-person--right{

  left:43%;

  height:62%;

}


.activation-person__head{

  position:absolute;

  top:0;

  left:50%;

  width:35%;

  aspect-ratio:1;

  border-radius:50%;

  background:#dca67f;

  transform:

  translateX(-50%);

}


.activation-person__body{

  position:absolute;

  top:18%;

  left:10%;

  width:80%;

  height:71%;

  border-radius:

  25px 25px 7px 7px;

  background:

  linear-gradient(

    160deg,

    #21132f,

    #07050b

  );

  border:

  1px solid

  rgba(255,98,179,.55);

}


.activation-person__arm{

  position:absolute;

  top:30%;

  left:65%;

  width:63%;

  height:9px;

  border-radius:10px;

  background:#130d19;

  transform:

  rotate(-24deg);

}


.activation-person--right

.activation-person__arm{

  right:65%;

  left:auto;

  transform:

  rotate(24deg);

}


.activation-person > b{

  position:absolute;

  z-index:7;

  top:42%;

  left:50%;

  color:#ff62b3;

  font-size:

  clamp(6px,.75vw,10px);

  letter-spacing:.12em;

  transform:

  translateX(-50%);

}


/* PRINT ART */


.flying-print{

  position:absolute;

  z-index:4;

  width:38%;

  aspect-ratio:1.45;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:

  clamp(14px,2vw,25px);

  color:#2b1538;

  background:

  linear-gradient(

    145deg,

    #fff,

    #efd5e5

  );

  box-shadow:

  0 28px 45px

  rgba(0,0,0,.25);

}


.flying-print::after{

  content:"";

  position:absolute;

  right:10%;

  bottom:16%;

  width:30%;

  height:3px;

  background:#ff62b3;

}


.flying-print span{

  font-size:

  clamp(7px,.8vw,10px);

  letter-spacing:.16em;

}


.flying-print strong{

  font-size:

  clamp(15px,2vw,27px);

  line-height:1;

}


.flying-print--one{

  top:18%;

  left:14%;

  transform:

  rotate(-8deg);

}


.flying-print--two{

  top:31%;

  right:11%;

  color:#fff;

  background:

  linear-gradient(

    145deg,

    #ff62b3,

    #8e2e91

  );

  transform:

  rotate(9deg);

}


.flying-print--three{

  bottom:10%;

  left:31%;

  width:30%;

  color:#fff;

  background:#281642;

  transform:

  rotate(-3deg);

}


/* ENDING */


.beyond-opening__ending{

  width:min(950px,100%);

  margin:

  clamp(110px,14vw,190px)

  auto 0;

  padding-top:60px;

  border-top:

  1px solid

  rgba(255,255,255,.1);

  text-align:center;

}


.beyond-opening__ending small{

  color:#ff62b3;

  font-size:9px;

  letter-spacing:.32em;

}


.beyond-opening__ending p{

  margin-top:22px;

  color:

  rgba(255,255,255,.55);

  font-size:

  clamp(22px,3.5vw,46px);

}


.beyond-opening__ending strong{

  color:#fff;

  font-weight:500;

}


/* RESPONSIVE */


@media(max-width:850px){


  .activation-feature,

  .activation-feature--people{

    grid-template-columns:1fr;

    gap:55px;

  }


  .activation-feature--people

  .activation-copy{

    order:2;

  }


  .activation-feature--people

  .activation-art{

    order:1;

  }


  .activation-art{

    min-height:390px;

  }


}


@media(max-width:600px){


  .opening-story{

    height:570vh;

  }


  .opening-story__sticky{

    justify-content:center;

    padding-inline:10px;

  }


  .opening-story__header{

    top:90px;

  }


  .opening-visual{

    width:100%;

    height:48vh;

    margin-top:55px;

  }


  .opening-building{

    right:2%;

    width:96%;

  }


  .opening-flag{

    width:16%;

  }


  .opening-flag--right{

    right:1%;

  }


  .opening-flag--left{

    left:1%;

  }


  .opening-person{

    width:9%;

  }


  .opening-person--one{

    right:15%;

  }


  .opening-person--two{

    left:15%;

  }


  .opening-progress{

    right:15px;

    bottom:17px;

  }


  .activation-feature{

    min-height:0;

    padding:75px 0;

  }


  .activation-art{

    min-height:310px;

  }


  .activation-copy__number{

    margin-bottom:28px;

  }


}

/* =====================================================================
   SCENE 09 — THE OPEN DOOR
   ===================================================================== */

.scene-closing{
  position:relative;
  min-height:1180px;
  padding:
    clamp(120px,12vw,180px)
    clamp(20px,6vw,90px)
    110px;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(116,44,138,.22) 0%,
      rgba(34,13,61,.08) 35%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      #140923 0%,
      #1b0c32 48%,
      #11071f 100%
    );

  color:var(--text-on-dark);
  overflow:hidden;
  text-align:center;
}


/* subtle atmospheric light */

.scene-closing::before{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  left:50%;
  top:36%;
  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,105,183,.12),
      rgba(194,63,208,.05) 36%,
      transparent 68%
    );

  pointer-events:none;
}


/* intro */

.closing-intro{
  position:relative;
  z-index:5;
  max-width:780px;
  margin:0 auto 70px;
}


.closing-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;

  margin-bottom:24px;

  color:#d99bcf;

  font-size:11px;
  font-weight:400;

  letter-spacing:.1em;
}


.closing-eyebrow::before,
.closing-eyebrow::after{
  content:"";

  width:28px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,105,183,.75)
    );
}


.closing-eyebrow::after{
  transform:scaleX(-1);
}


.closing-title{
  margin:0;

  color:#fff8fc;

  font-size:
    clamp(34px,5vw,66px);

  font-weight:300;

  line-height:1.42;

  letter-spacing:-.035em;
}


.closing-title span{
  color:#ff69b7;

  font-weight:600;

  text-shadow:
    0 0 34px
    rgba(255,79,163,.24);
}


.closing-sub{
  max-width:660px;

  margin:
    28px auto 0;

  color:
    rgba(244,226,242,.62);

  font-size:
    clamp(13px,1.3vw,16px);

  font-weight:300;

  line-height:2.15;
}


/* complete door scene */

.closing-door-stage{
  position:relative;

  z-index:4;

  width:
    min(94vw,680px);

  margin:
    0 auto;
}


.closing-door-glow{
  position:absolute;

  width:125%;
  height:100%;

  left:50%;
  top:48%;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255,157,214,.28) 0%,
      rgba(185,86,190,.13) 32%,
      transparent 70%
    );

  filter:blur(25px);

  pointer-events:none;
}


.closing-door-frame{
  position:relative;

  width:
    min(92vw,570px);

  min-height:700px;

  margin:auto;

  padding:
    86px 52px 55px;

  border:
    1px solid
    rgba(255,99,184,.75);

  border-bottom:none;

  border-radius:
    285px 285px 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,176,222,.13),
      rgba(70,25,91,.19) 45%,
      rgba(17,7,31,.48)
    );

  box-shadow:

    0 0 0 10px
    rgba(255,79,163,.018),

    0 0 0 20px
    rgba(255,79,163,.012),

    inset 0 0 80px
    rgba(255,130,203,.08),

    0 40px 110px
    rgba(0,0,0,.3);

  overflow:hidden;
}


/* additional door outlines */

.closing-frame-line{
  position:absolute;

  pointer-events:none;

  border:
    1px solid
    rgba(255,105,183,.17);

  border-bottom:none;

  border-radius:
    300px 300px 0 0;
}


.closing-frame-line-1{
  inset:-12px -12px 0;
}


.closing-frame-line-2{
  inset:-24px -24px 0;

  opacity:.55;
}


/* inner light */

.closing-door-inside{
  position:relative;

  z-index:3;

  display:flex;

  flex-direction:column;

  align-items:center;

  min-height:555px;

  padding:
    54px 30px 42px;

  border:

    1px solid
    rgba(255,255,255,.08);

  background:

    radial-gradient(
      circle at 50% 14%,
      rgba(255,218,240,.36),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      rgba(136,76,145,.28),
      rgba(29,12,50,.62)
    );

  box-shadow:

    inset 0 0 90px
    rgba(255,159,216,.08);
}


.door-small-line{
  margin-bottom:20px;

  color:#e8afd7;

  font-size:10px;

  letter-spacing:.22em;
}


.closing-door-inside h3{
  margin:0;

  color:#fff;

  font-size:
    clamp(29px,4vw,45px);

  font-weight:500;

  line-height:1.55;
}


.closing-door-inside p{
  margin:
    20px 0 34px;

  color:
    rgba(246,228,243,.64);

  font-size:13px;

  font-weight:300;

  line-height:2;
}


/* primary conversion button */

.closing-main-cta{
  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:25px;

  width:
    min(100%,340px);

  min-height:62px;

  padding:
    14px 28px;

  color:#25102e;

  background:

    linear-gradient(
      110deg,
      #ffe3f4,
      #ff91cc 55%,
      #ff65b7
    );

  border-radius:2px;

  font-size:13px;

  font-weight:700;

  box-shadow:

    0 15px 45px
    rgba(255,79,163,.23);

  transition:

    transform .6s var(--ease-slow),

    box-shadow .6s var(--ease-slow);
}


.closing-main-cta::before{
  content:"";

  position:absolute;

  inset:5px;

  border:

    1px solid
    rgba(62,20,70,.14);

  pointer-events:none;
}


.closing-main-cta:hover{

  transform:
    translateY(-4px);

  box-shadow:

    0 23px 65px
    rgba(255,79,163,.38);
}


.cta-arrow{
  font-size:21px;

  transition:
    transform .5s
    var(--ease-slow);
}


.closing-main-cta:hover
.cta-arrow{

  transform:
    translateX(-6px);
}


/* divider */

.closing-contact-note{
  display:flex;

  align-items:center;

  width:100%;

  gap:14px;

  margin:
    40px 0 24px;

  color:
    rgba(241,218,238,.38);

  font-size:9px;
}


.closing-contact-note span{

  flex:1;

  height:1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.1)
    );
}


.closing-contact-note span:last-child{

  transform:
    scaleX(-1);
}


/* secondary contact methods */

.contact-list{

  position:relative;

  z-index:4;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  width:100%;

  gap:8px;
}


.contact-list a{

  display:flex;

  flex-direction:column;

  gap:7px;

  min-height:72px;

  padding:
    15px 8px;

  border:

    1px solid
    rgba(255,255,255,.07);

  background:

    rgba(255,255,255,.018);

  transition:

    border-color .5s
    var(--ease-slow),

    background .5s
    var(--ease-slow),

    transform .5s
    var(--ease-slow);
}


.contact-list a small{

  color:
    rgba(238,211,233,.4);

  font-size:8px;

  font-weight:300;
}


.contact-list a strong{

  color:
    rgba(255,247,252,.78);

  font-size:11px;

  font-weight:500;
}


.contact-list a:hover{

  transform:
    translateY(-3px);

  border-color:
    rgba(255,105,183,.45);

  background:
    rgba(255,105,183,.07);
}


/* final signature */

.closing-final-line{

  position:relative;

  z-index:5;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:16px;

  margin:
    65px 0 0;

  color:
    rgba(242,216,236,.35);

  font-size:8px;

  letter-spacing:.28em;
}


.closing-final-line span{

  width:1px;

  height:18px;

  background:
    rgba(255,105,183,.35);
}


/* floating celebration objects */

.closing-orb{

  position:absolute;

  z-index:1;

  display:block;

  border-radius:50%;

  opacity:.55;

  filter:
    saturate(.75);
}


.closing-orb::after{

  content:"";

  position:absolute;

  width:1px;

  height:58px;

  left:50%;

  top:100%;

  background:

    linear-gradient(
      rgba(255,116,190,.55),
      transparent
    );
}


.closing-orb-1{

  width:90px;

  height:90px;

  left:7%;

  top:18%;

  background:#a63aba;

  animation:
    closingFloat 7s
    ease-in-out infinite;
}


.closing-orb-2{

  width:58px;

  height:58px;

  left:16%;

  top:42%;

  background:#eee4ee;

  animation:
    closingFloat 9s
    ease-in-out infinite reverse;
}


.closing-orb-3{

  width:94px;

  height:94px;

  right:7%;

  top:20%;

  background:#a63aba;

  animation:
    closingFloat 8s
    ease-in-out infinite reverse;
}


.closing-orb-4{

  width:60px;

  height:60px;

  right:16%;

  top:43%;

  background:#eee4ee;

  animation:
    closingFloat 10s
    ease-in-out infinite;
}


@keyframes closingFloat{

  0%,
  100%{

    transform:
      translateY(0)
      rotate(-2deg);

  }

  50%{

    transform:
      translateY(-15px)
      rotate(2deg);

  }

}


/* confetti */

.closing-confetti{

  position:absolute;

  z-index:1;

  width:5px;

  height:5px;

  border-radius:50%;

  background:#ff66b8;

  opacity:.55;

  animation:
    closingDust 5s
    ease-in-out infinite;
}


.confetti-1{
  left:5%;
  top:31%;
}


.confetti-2{
  left:25%;
  top:15%;

  animation-delay:-1s;
}


.confetti-3{
  left:36%;
  top:48%;

  background:#8b51ef;

  animation-delay:-2s;
}


.confetti-4{
  right:8%;
  top:36%;

  background:#dfbb67;
}


.confetti-5{
  right:25%;
  top:19%;

  animation-delay:-3s;
}


.confetti-6{
  right:34%;
  top:55%;

  background:#7442d8;

  animation-delay:-1.5s;
}


@keyframes closingDust{

  0%,
  100%{

    transform:
      translateY(0);

    opacity:.25;

  }

  50%{

    transform:
      translateY(-10px);

    opacity:.75;

  }

}


/* mobile */

@media(max-width:700px){

  .scene-closing{

    min-height:auto;

    padding:

      110px 18px
      80px;

  }


  .closing-intro{

    margin-bottom:52px;

  }


  .closing-title{

    font-size:35px;

  }


  .closing-sub br{

    display:none;

  }


  .closing-door-frame{

    width:100%;

    min-height:650px;

    padding:

      62px 18px
      32px;

    border-radius:

      190px 190px
      0 0;

  }


  .closing-door-inside{

    min-height:520px;

    padding:

      48px 17px
      28px;

  }


  .closing-door-inside h3{

    font-size:31px;

  }


  .contact-list{

    gap:5px;

  }


  .contact-list a{

    padding:

      14px 4px;

  }


  .closing-orb-1,
  .closing-orb-3{

    width:48px;

    height:48px;

    opacity:.28;

  }


  .closing-orb-2,
  .closing-orb-4{

    display:none;

  }

}

/* =====================================================================
   FOOTER — THE LAST LIGHT
   ===================================================================== */

.site-footer{

  position:relative;

  min-height:760px;

  padding:
    0
    clamp(22px,6vw,90px)
    45px;

  overflow:hidden;

  text-align:center;

  color:
    rgba(247,230,243,.7);

  background:

    radial-gradient(
      ellipse at 50% 0%,
      rgba(185,70,166,.16),
      transparent 46%
    ),

    linear-gradient(
      180deg,
      #11071f 0%,
      #0c0516 52%,
      #08030e 100%
    );

}


/* soft light coming from the final door */

.footer-light-path{

  position:absolute;

  z-index:1;

  top:0;

  left:50%;

  width:300px;

  height:220px;

  transform:
    translateX(-50%);

  overflow:hidden;

  pointer-events:none;

}


.footer-light-path::before{

  content:"";

  position:absolute;

  top:-80px;

  left:50%;

  width:230px;

  height:280px;

  transform:

    translateX(-50%)

    perspective(300px)

    rotateX(54deg);

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(255,103,185,.05),

      rgba(255,201,231,.19),

      rgba(255,103,185,.05),

      transparent

    );

  filter:
    blur(8px);

}


.footer-light-core{

  position:absolute;

  top:0;

  left:50%;

  width:1px;

  height:150px;

  background:

    linear-gradient(

      rgba(255,178,220,.75),

      rgba(255,105,183,.24),

      transparent

    );

  box-shadow:

    0 0 12px
    rgba(255,105,183,.7),

    0 0 38px
    rgba(255,105,183,.35);

}


/* celebration light strand */

.footer-celebration-lights{

  position:relative;

  z-index:3;

  width:

    min(100%,1000px);

  height:115px;

  margin:

    0 auto 28px;

}


.footer-wire{

  position:absolute;

  top:22px;

  left:0;

  width:100%;

  height:70px;

  border-top:

    1px solid

    rgba(232,177,217,.18);

  border-radius:

    50%;

  transform:

    rotate(-1deg);

}


.footer-bulb{

  position:absolute;

  width:6px;

  height:6px;

  border-radius:50%;

  background:#f1c66f;

  box-shadow:

    0 0 7px
    #f1c66f,

    0 0 19px
    rgba(241,198,111,.58);

  animation:

    footerLightBreath

    3.8s

    ease-in-out

    infinite;

}


.footer-bulb::before{

  content:"";

  position:absolute;

  left:50%;

  bottom:100%;

  width:1px;

  height:18px;

  transform:

    translateX(-50%);

  background:

    rgba(232,177,217,.2);

}


.bulb-1{

  left:7%;

  top:38px;

}


.bulb-2{

  left:21%;

  top:57px;

  animation-delay:-1.2s;

}


.bulb-3{

  left:35%;

  top:68px;

  animation-delay:-2.4s;

}


.bulb-4{

  left:50%;

  top:72px;

  animation-delay:-.7s;

}


.bulb-5{

  left:65%;

  top:64px;

  animation-delay:-1.8s;

}


.bulb-6{

  left:79%;

  top:49px;

  animation-delay:-3s;

}


.bulb-7{

  left:93%;

  top:31px;

  animation-delay:-2s;

}


@keyframes footerLightBreath{

  0%,
  100%{

    opacity:.45;

    transform:
      scale(.85);

  }


  50%{

    opacity:1;

    transform:
      scale(1.18);

  }

}


/* content */

.footer-content{

  position:relative;

  z-index:4;

  display:flex;

  flex-direction:column;

  align-items:center;

  width:

    min(100%,1050px);

  margin:auto;

}


/* identity */

.footer-identity{

  display:flex;

  flex-direction:column;

  align-items:center;

}


.footer-small-line{

  margin-bottom:17px;

  color:

    rgba(235,193,224,.42);

  font-size:8px;

  letter-spacing:.48em;

}


.footer-logo{

  margin:0;

  color:#fff9fd;

  font-family:inherit;

  font-size:

    clamp(36px,6vw,78px);

  font-weight:300;

  line-height:1;

  letter-spacing:.14em;

  text-indent:.14em;

}


.footer-logo span{

  color:#ff68b8;

  font-weight:600;

  text-shadow:

    0 0 32px

    rgba(255,79,163,.28);

}


.footer-meaning{

  margin:

    28px 0 0;

  color:

    rgba(240,217,235,.52);

  font-size:

    clamp(12px,1.3vw,15px);

  font-weight:300;

  line-height:2.1;

}


/* decorative living door divider */

.footer-divider{

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  gap:25px;

  margin:

    42px 0 35px;

  color:

    rgba(255,104,184,.68);

}


.footer-divider span{

  width:

    min(25vw,180px);

  height:1px;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(255,104,184,.25)

    );

}


.footer-divider span:last-child{

  transform:

    scaleX(-1);

}


.footer-divider svg{

  width:27px;

  height:auto;

  filter:

    drop-shadow(

      0 0 8px

      rgba(255,79,163,.25)

    );

}


/* navigation */

.footer-navigation{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:

    clamp(20px,4vw,52px);

}


.footer-navigation a{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  padding:

    5px 0 10px;

  color:

    rgba(246,229,242,.6);

  font-size:11px;

  font-weight:400;

  transition:

    color .5s

    var(--ease-slow),

    transform .5s

    var(--ease-slow);

}


.footer-navigation a span{

  color:

    rgba(255,104,184,.42);

  font-size:7px;

  letter-spacing:.16em;

}


.footer-navigation a::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:0;

  width:0;

  height:1px;

  transform:

    translateX(-50%);

  background:#ff68b8;

  box-shadow:

    0 0 10px

    rgba(255,104,184,.6);

  transition:

    width .55s

    var(--ease-slow);

}


.footer-navigation a:hover{

  color:#fff;

  transform:

    translateY(-3px);

}


.footer-navigation a:hover::after{

  width:28px;

}


/* creator signature */

.footer-signature{

  margin-top:58px;

}


.footer-created{

  display:block;

  margin-bottom:11px;

  color:

    rgba(238,210,231,.28);

  font-size:7px;

  letter-spacing:.36em;

}


.footer-signature strong{

  color:

    rgba(255,248,253,.82);

  font-size:

    clamp(11px,1.4vw,14px);

  font-weight:500;

  letter-spacing:.23em;

}


.footer-signature p{

  display:flex;

  align-items:center;

  justify-content:center;

  flex-wrap:wrap;

  gap:11px;

  margin:

    17px 0 0;

  color:

    rgba(235,210,230,.36);

  font-size:9px;

  font-weight:300;

}


.footer-signature p span{

  width:3px;

  height:3px;

  border-radius:50%;

  background:

    rgba(255,104,184,.65);

  box-shadow:

    0 0 7px

    rgba(255,104,184,.45);

}


/* copyright */

.footer-bottom{

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  gap:18px;

  margin-top:46px;

  color:

    rgba(233,207,227,.22);

  font-size:7px;

  letter-spacing:.25em;

}


.footer-bottom-line{

  width:

    min(42vw,330px);

  height:1px;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(235,189,221,.1),

      transparent

    );

}


/* mobile */

@media(max-width:600px){

  .site-footer{

    min-height:700px;

    padding:

      0 20px

      36px;

  }


  .footer-celebration-lights{

    height:90px;

  }


  .footer-logo{

    font-size:38px;

    letter-spacing:.08em;

    text-indent:.08em;

  }


  .footer-small-line{

    letter-spacing:.3em;

  }


  .footer-navigation{

    display:grid;

    grid-template-columns:

      repeat(3,1fr);

    width:100%;

    gap:

      24px 10px;

  }


  .footer-navigation a{

    font-size:10px;

  }


  .footer-signature{

    margin-top:48px;

  }


  .footer-signature strong{

    font-size:10px;

    letter-spacing:.15em;

  }


  .footer-bottom{

    gap:10px;

  }


  .footer-bottom-line{

    width:70px;

  }

}

/* =====================================================================
   Responsive base tuning
   ===================================================================== */
@media (max-width:560px){
  .scene{ padding:96px 20px; }
  .hero-title{ font-size:20px; }
  .journey-list{ gap:30px; }
}



/* =====================================================
   SCENE 02 — COMPOSITION & TIMING FIX
   Keep the story visible from the first frame
===================================================== */

/* نقل الباب لأعلى ليظهر داخل الكادر من البداية */

.invitation-door-scene{

  top:54%;

  bottom:auto;

  transform:
    translateY(-50%);

}


/* ضبط النص في منتصف المشهد */

.invitation-story{

  top:52%;

  transform:
    translateY(-50%);

}


/* تقليل المسافة البصرية الفارغة أعلى المشهد */

.invitation-stage::before{

  content:"";

  position:absolute;

  top:12%;

  right:8%;

  left:8%;

  height:1px;

  z-index:1;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(225,177,101,.08),
      transparent
    );

}


/* =====================================================
   TABLET
===================================================== */

@media(
  max-width:1000px
){

  .invitation-door-scene{

    top:54%;

    bottom:auto;

    transform:
      translateY(-50%);

  }


  .invitation-story{

    top:51%;

    transform:
      translateY(-50%);

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(
  max-width:700px
){

  .invitation-story{

    top:22%;

    transform:none;

  }


  .invitation-door-scene{

    top:48%;

    bottom:auto;

    left:50%;

    transform:
      translateX(-50%);

  }

}