/* ==========================================================================
   ARYAN & PRIYA — four invitations, one scroll
   Every colour below was sampled from the cards themselves, so each act's
   background is that card's own palette rather than a guess next to it.
   ========================================================================== */

:root{
  /* ---- Act I — Ring Ceremony: forest at night, warm lantern gold ------- */
  --i-deep:   #070C05;
  --i-mid:    #101A0C;
  --i-lift:   #1C2A14;
  --i-ink:    #E8CE93;
  --i-accent: #C9A227;

  /* ---- Act II — Haldi: marigold, turmeric, deep brown ink ------------- */
  --ii-deep:   #C4700A;
  --ii-mid:    #E8A213;
  --ii-lift:   #F7C23A;
  --ii-ink:    #4A2308;
  --ii-accent: #8C4805;

  /* ---- Act III — Wedding: mandap maroon, sandal gold ------------------ */
  --iii-deep:   #2A1208;
  --iii-mid:    #50210D;
  --iii-lift:   #773F18;
  --iii-ink:    #E4BC7C;
  --iii-accent: #CFA061;

  /* ---- Act IV — Reception: black, rose red, champagne gold ------------ */
  --iv-deep:   #050303;
  --iv-mid:    #14090A;
  --iv-lift:   #3A0D10;
  --iv-ink:    #DFC08A;
  --iv-accent: #8E1B22;

  /* live values, written per act by main.js */
  --ink:    var(--i-ink);
  --accent: var(--i-accent);
  --mote:   255, 214, 140;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-cal: cubic-bezier(0.45, 0, 0.55, 1);

  /* type */
  --caps:   "Cinzel", "Iowan Old Style", serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --sans:   "Outfit", "Avenir Next", "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--i-deep);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:color 900ms ease;
}

/* ==========================================================================
   1. AMBIENCE — four full-screen scenes, fixed, crossfading as you scroll
   ========================================================================== */
.ambience{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.scene{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1100ms ease;
}
.scene::after{                      /* the texture, one per scene */
  content:"";
  position:absolute;
  inset:-6%;
}
[data-scene="engagement"] .scene--engagement,
[data-scene="haldi"]      .scene--haldi,
[data-scene="wedding"]    .scene--wedding,
[data-scene="reception"]  .scene--reception{ opacity:1; }

/* --- Act I: forest dark, with the string lights the card is full of --- */
.scene--engagement{
  background:
    radial-gradient(90% 60% at 50% 8%,  rgba(201,162,39,.20) 0%, rgba(201,162,39,0) 62%),
    radial-gradient(70% 50% at 50% 100%, rgba(28,42,20,.85) 0%, rgba(7,12,5,0) 70%),
    linear-gradient(180deg, var(--i-deep) 0%, var(--i-mid) 45%, var(--i-deep) 100%);
}
.scene--engagement::after{
  background-image:
    radial-gradient(circle, rgba(255,206,120,.55) 0%, rgba(255,206,120,0) 60%),
    radial-gradient(circle, rgba(255,224,160,.40) 0%, rgba(255,224,160,0) 60%);
  background-size:170px 210px, 260px 300px;
  background-position:0 0, 90px 70px;
  animation:twinkle 6.5s var(--ease-cal) infinite alternate;
  opacity:.5;
}
@keyframes twinkle{
  from{ opacity:.34; transform:scale(1);     }
  to  { opacity:.62; transform:scale(1.015); }
}

/* --- Act II: marigold field ------------------------------------------- */
.scene--haldi{
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,214,90,.55) 0%, rgba(255,214,90,0) 60%),
    linear-gradient(180deg, var(--ii-mid) 0%, var(--ii-lift) 38%, var(--ii-deep) 100%);
}
.scene--haldi::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%238C4805' stroke-width='1.4' opacity='.5'%3E%3Ccircle cx='32' cy='32' r='11'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Ccircle cx='96' cy='96' r='11'/%3E%3Ccircle cx='96' cy='96' r='6'/%3E%3Ccircle cx='96' cy='32' r='4'/%3E%3Ccircle cx='32' cy='96' r='4'/%3E%3Cpath d='M0 64h128M64 0v128' stroke-dasharray='2 12' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:128px 128px;
  opacity:.32;
  animation:crawl 70s linear infinite;
}
@keyframes crawl{
  from{ transform:translate3d(0,0,0);       }
  to  { transform:translate3d(-128px,-128px,0); }
}

/* --- Act III: mandap, damask and firelight ---------------------------- */
.scene--wedding{
  background:
    radial-gradient(60% 40% at 50% 62%, rgba(255,170,70,.28) 0%, rgba(255,170,70,0) 70%),
    linear-gradient(180deg, var(--iii-deep) 0%, var(--iii-mid) 50%, var(--iii-deep) 100%);
}
.scene--wedding::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23CFA061' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M80 26c14 12 22 30 22 54s-8 42-22 54c-14-12-22-30-22-54s8-42 22-54z'/%3E%3Cpath d='M26 80c12-14 30-22 54-22s42 8 54 22c-12 14-30 22-54 22s-42-8-54-22z'/%3E%3Ccircle cx='80' cy='80' r='7'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='160' cy='0' r='5'/%3E%3Ccircle cx='0' cy='160' r='5'/%3E%3Ccircle cx='160' cy='160' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.18;
  animation:emberpulse 9s var(--ease-cal) infinite alternate;
}
@keyframes emberpulse{
  from{ opacity:.13; }
  to  { opacity:.24; }
}

/* --- Act IV: black hall, rose walls ----------------------------------- */
.scene--reception{
  background:
    radial-gradient(55% 42% at 12% 58%, rgba(142,27,34,.42) 0%, rgba(142,27,34,0) 70%),
    radial-gradient(55% 42% at 88% 44%, rgba(142,27,34,.36) 0%, rgba(142,27,34,0) 70%),
    linear-gradient(180deg, var(--iv-deep) 0%, var(--iv-mid) 55%, var(--iv-deep) 100%);
}
.scene--reception::after{
  background-image:repeating-linear-gradient(115deg,
      rgba(223,192,138,.05) 0px, rgba(223,192,138,.05) 1px,
      rgba(223,192,138,0)   1px, rgba(223,192,138,0)   9px);
  opacity:.7;
}

/* a single warm pool under whichever card is on screen */
.pool{
  position:absolute;
  inset:0;
  /* one warm pool under whichever card is on screen. Deliberately a fixed
     colour: a gradient built from a custom property cannot interpolate, so
     animating it would snap rather than fade. */
  background:radial-gradient(46% 34% at 50% 52%, rgba(255,201,132,.13) 0%, rgba(255,201,132,0) 72%);
}

/* ==========================================================================
   2. AIR — one particle system, recoloured per act
   ========================================================================== */
.air{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.mote{
  position:absolute;
  bottom:-6vh;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--mote),.95) 0%, rgba(var(--mote),0) 70%);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%   { opacity:0;   transform:translate3d(0,0,0) scale(.7); }
  14%  { opacity:.6;  }
  82%  { opacity:.34; }
  100% { opacity:0;   transform:translate3d(var(--dx,-30px),-108vh,0) scale(1.25); }
}

.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.20;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. THE ACTS
   ========================================================================== */
.stack{
  position:relative;
  z-index:3;
  padding:clamp(3.5rem,10vh,7rem) clamp(1rem,5vw,2rem);
}

.act{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.4rem,4vw,2.2rem);
  padding-block:clamp(3.5rem,11vh,7.5rem);   /* the gap between cards */
}

/* the one line */
.line{
  margin:0;
  max-width:22ch;
  text-align:center;
  color:var(--ink);
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}
.line--caps{
  font-family:var(--caps);
  font-weight:400;
  font-size:clamp(.95rem,3.2vw,1.15rem);
  letter-spacing:.30em;
  text-transform:uppercase;
  line-height:1.7;
  text-indent:.30em;                          /* balances the last tracked letter */
}
.line--script{
  font-family:var(--script);
  font-size:clamp(1.85rem,7vw,2.9rem);
  line-height:1.25;
  max-width:18ch;
}
.line--haldi{ text-shadow:0 1px 12px rgba(255,220,150,.45); }

/* the card */
.card{
  margin:0;
  width:auto;                      /* the image decides the width … */
  position:relative;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(var(--mote),.28);
  box-shadow:
    0 40px 90px -50px rgba(0,0,0,.9),
    0 0 90px -30px rgba(var(--mote),.22);
}
.card img{
  display:block;
  /* … and the image is sized by HEIGHT, so a whole invitation lands inside
     roughly 70% of a phone screen and can be read in a single scroll stop.
     max-width keeps it honest on short, wide screens. */
  width:auto;
  height:auto;
  max-height:70dvh;
  max-width:94vw;
}

/* hairline between acts, drawn from the middle out */
.rule{
  border:0;
  height:1px;
  width:min(78vw,340px);
  margin:0 auto;
  background:linear-gradient(90deg,
    rgba(var(--mote),0) 0%,
    rgba(var(--mote),.55) 50%,
    rgba(var(--mote),0) 100%);
  transform:scaleX(0);
  transition:transform 900ms var(--ease-out);
}
.rule.in{ transform:scaleX(1); }

/* ==========================================================================
   4. SCROLL REVEALS
   ========================================================================== */
.line{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.card{
  opacity:0;
  transform:translateY(30px) scale(.976);
  transition:opacity 820ms var(--ease-out), transform 820ms var(--ease-out);
}
.line.in{ opacity:1; transform:none; }
.card.in{ opacity:1; transform:none; }
.card.in{ transition-delay:110ms; }           /* line lands first, card follows */

/* screen-reader copy of everything printed on the cards */
.sr{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (min-width:900px){
  .card img{ max-height:82dvh; max-width:38vw; }
  .act{ padding-block:clamp(5rem,13vh,9rem); }
}
@media (max-width:700px){
  .mote:nth-child(n+7){ display:none; }
}

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mote,.scene--engagement::after,.scene--haldi::after,.scene--wedding::after{ animation:none !important; }
  .line,.card{ transform:none !important; transition:opacity 260ms ease; }
  .rule{ transform:scaleX(1); transition:none; }
}


/* ==========================================================================
   7. OVERTURE — the two screens before the invitations
   ========================================================================== */
.overture{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.5rem,5vw,2.4rem);
  padding-block:clamp(3rem,8vh,5rem);
  text-align:center;
}

/* "You are invited" — the largest type on the page, and the only time
   the script face is allowed to run this big. */
.line--hero{
  font-family:var(--script);
  font-size:clamp(2.9rem,13vw,5rem);
  line-height:1.1;
  max-width:14ch;
  letter-spacing:.01em;
}

/* the couple, set the way their own cards set them */
.line--names{
  font-family:var(--script);
  font-size:clamp(2.2rem,10vw,3.6rem);
  line-height:1.2;
  max-width:16ch;
}

.line--sub{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.82rem,3.4vw,1rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:2;
  max-width:26ch;
  opacity:.82;
}

/* ==========================================================================
   8. THE DATE SLAB — the four days, set like the date block on the cards
   ========================================================================== */
.slab{
  width:min(94vw,400px);
  padding:clamp(1.5rem,6vw,2.2rem) clamp(1.2rem,5vw,1.8rem);
  border:1px solid rgba(var(--mote),.34);
  border-radius:3px;
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 30px 70px -50px rgba(0,0,0,.9);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 780ms var(--ease-out), transform 780ms var(--ease-out);
}
.slab.in{ opacity:1; transform:none; }

.slab__head{
  margin:0 0 clamp(1rem,4vw,1.4rem);
  font-family:var(--caps);
  font-size:clamp(.78rem,3vw,.92rem);
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:var(--ink);
}

.day{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(.9rem,4vw,1.3rem);
  padding-block:clamp(.8rem,3.2vw,1.05rem);
  text-align:left;
}
.day + .day{ border-top:1px solid rgba(var(--mote),.20); }

.day__num{
  font-family:var(--caps);
  font-weight:500;
  font-size:clamp(1.7rem,7vw,2.1rem);
  line-height:1;
  min-width:2.2ch;
  text-align:center;
  color:var(--ink);
}
.day__mon{
  display:block;
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:.3rem;
}
.day__name{
  display:block;
  font-family:var(--caps);
  font-size:clamp(.82rem,3.4vw,.95rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.day__when{
  display:block;
  margin-top:.28rem;
  font-family:var(--sans);
  font-size:clamp(.7rem,2.9vw,.78rem);
  letter-spacing:.08em;
  opacity:.78;
}

/* ==========================================================================
   9. THE MAP — the closing screen
   ========================================================================== */
.finale{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.2rem,4vw,1.9rem);
  padding-block:clamp(4rem,12vh,8rem) clamp(5rem,14vh,9rem);
  text-align:center;
}

.venue{
  margin:0;
  max-width:30ch;
  font-family:var(--sans);
  font-size:clamp(.82rem,3.3vw,.95rem);
  line-height:1.85;
  letter-spacing:.05em;
  opacity:.85;
}
.venue strong{
  display:block;
  margin-bottom:.5rem;
  font-family:var(--caps);
  font-weight:500;
  font-size:clamp(.95rem,4vw,1.15rem);
  letter-spacing:.20em;
  text-indent:.20em;
  text-transform:uppercase;
  opacity:1;
}

.card--map{
  width:min(94vw,540px);
  background:rgba(0,0,0,.3);
}
.card--map iframe{
  display:block;
  width:100%;
  height:clamp(260px,38dvh,420px);
  border:0;
}

.directions{
  display:inline-block;
  padding:.85rem 1.6rem;
  min-height:44px;
  font-family:var(--caps);
  font-size:clamp(.72rem,3vw,.82rem);
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(var(--mote),.42);
  border-radius:2px;
  transition:border-color 200ms ease, background-color 200ms ease;
}
.directions:focus-visible{
  outline:2px solid rgba(var(--mote),.8);
  outline-offset:3px;
}
.directions:active{ transform:translateY(1px); }
@media (hover:hover) and (pointer:fine){
  .directions:hover{
    border-color:rgba(var(--mote),.8);
    background-color:rgba(var(--mote),.07);
  }
}

@media (prefers-reduced-motion:reduce){
  .slab{ transform:none !important; transition:opacity 260ms ease; }
  .directions:active{ transform:none; }
}

/* ==========================================================================
   10. SOUND TOGGLE — fixed, always reachable, recoloured with the act
   ========================================================================== */
.sound-toggle{
  position:fixed;
  right:clamp(.9rem,3vw,1.4rem);
  bottom:clamp(.9rem,3vw,1.4rem);
  z-index:5;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(var(--mote),.4);
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ink);
  cursor:pointer;
  transition:border-color 900ms ease, color 900ms ease,
             background-color 200ms ease, transform 160ms var(--ease-out);
}
.sound-toggle:active{ transform:scale(.94); }
.sound-toggle:focus-visible{
  outline:2px solid rgba(var(--mote),.85);
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .sound-toggle:hover{ background:rgba(0,0,0,.48); }
}

.sound-toggle__icon{
  width:20px;
  height:20px;
  grid-area:1 / 1;
}
.sound-toggle__icon--on{ opacity:0; }
.sound-toggle.is-on .sound-toggle__icon--off{ opacity:0; }
.sound-toggle.is-on .sound-toggle__icon--on{ opacity:1; }
.sound-toggle__icon{ transition:opacity 180ms ease; }

@media (prefers-reduced-motion:reduce){
  .sound-toggle{ transition:background-color 200ms ease; }
  .sound-toggle:active{ transform:none; }
}

/* ==========================================================================
   11. THE INTRO FILM
   --intro-bg is the edge colour of the film's FIRST frame, so there is never
   a black flash before it paints. --seam-wash is the edge colour of its LAST
   frame, so the page underneath is already that colour when the film clears.
   Both were measured from the file, not picked.
   ========================================================================== */
:root{
  --intro-bg:  #221316;
  --seam-wash: #320E0E;
  --film-red:  #7C1519;
  --film-lit:  #BC3B39;
  --film-gold: #E8C88F;
}

html.intro-active,
html.intro-active body{ overflow:hidden; height:100%; }

.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--intro-bg);
  opacity:1;
  transition:opacity 900ms cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.intro__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform 1200ms cubic-bezier(.4,0,.2,1),
             filter 1000ms ease-out,
             opacity 900ms ease-out;
}
.intro__wash{
  position:absolute;
  inset:0;
  background:var(--seam-wash);
  opacity:0;
  transition:opacity 900ms ease-in;
  pointer-events:none;
}

/* the handoff — begins while the film is still moving */
.intro.is-handing-off .intro__video{
  transform:scale(1.06);
  filter:blur(10px) brightness(1.04);
  opacity:0;
}
.intro.is-handing-off .intro__wash{ opacity:1; }
.intro.is-done{ opacity:0; pointer-events:none; }
.intro.is-removed{ display:none; }

/* --- the tap layer ---------------------------------------------------- */
.intro__veil{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(30,6,8,.55) 100%),
    linear-gradient(180deg, rgba(34,19,22,.35) 0%, rgba(34,19,22,.10) 40%, rgba(28,8,10,.62) 100%);
  transition:opacity 380ms var(--ease-out);
}
.intro.is-playing .intro__veil{ opacity:0; pointer-events:none; }

/* the button itself — gold on the film's own crimson, no glow */
.tap{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(140px,42vw,178px);
  height:clamp(140px,42vw,178px);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--film-gold);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tap__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(232,200,143,.55);
  background:
    radial-gradient(circle at 50% 42%, rgba(188,59,57,.30) 0%, rgba(124,21,25,.20) 55%, rgba(50,14,14,.34) 100%);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:transform 200ms var(--ease-out), border-color 200ms ease;
}
/* a second ring, breathing outward — the only motion on this screen */
.tap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(232,200,143,.32);
  animation:tap-pulse 3.2s var(--ease-cal) infinite;
  pointer-events:none;
}
@keyframes tap-pulse{
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.28); opacity:0;   }
  100% { transform:scale(1.28); opacity:0;   }
}
.tap__label{
  position:relative;
  font-family:var(--caps);
  font-weight:400;
  font-size:clamp(.72rem,3.1vw,.84rem);
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:var(--film-gold);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.tap:active .tap__ring{ transform:scale(.95); }
.tap:focus-visible{ outline:none; }
.tap:focus-visible .tap__ring{
  border-color:rgba(232,200,143,1);
  box-shadow:0 0 0 3px rgba(232,200,143,.28);
}
@media (hover:hover) and (pointer:fine){
  .intro__veil:hover .tap__ring{ border-color:rgba(232,200,143,.85); }
}

/* --- skip ------------------------------------------------------------- */
.intro__skip{
  position:absolute;
  right:clamp(14px,4vw,32px);
  bottom:clamp(14px,4vw,32px);
  z-index:4;
  min-height:44px;
  padding:.7rem 1.1rem;
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:rgba(232,200,143,.9);
  background:rgba(20,6,8,.4);
  border:1px solid rgba(232,200,143,.3);
  border-radius:2px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity 600ms ease;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.intro.is-playing .intro__skip{ opacity:.62; pointer-events:auto; }
.intro__skip:hover{ opacity:1; }

/* --- the seam --------------------------------------------------------- */
/* Sits above the page background, below the content. Starts as the film's
   closing colour so the page IS that colour at the cut, then clears to
   reveal the forest scene the site actually opens on. */
.seam{
  position:fixed;
  inset:0;
  z-index:4;
  background:var(--seam-wash);
  opacity:0;
  pointer-events:none;
}
.intro-active .seam{ opacity:1; }
.seam.is-clearing{
  opacity:0;
  transition:opacity 1500ms ease-out;
}

@media (prefers-reduced-motion:reduce){
  .tap::after{ animation:none; }
  .intro,.intro__video,.seam{ transition-duration:1ms !important; }
}