/* ============================================================
   THE INTRO (assets/js/intro.js)
   A dark table under a warm lamp. The photos are drawn on the
   canvas; the words, the year and the buttons sit on top.
   ============================================================ */

.intro{
  --cream:#f6efe3; --cream-rgb:246,239,227;
  --gold:#d2ad6a; --gold-soft:#e8cc94; --gold-rgb:210,173,106;
  position:fixed; inset:0; z-index:85;
  overflow:hidden;
  color:var(--cream);
  background:radial-gradient(ellipse 85% 75% at 50% 44%, #2c2219 0%, #17110c 58%, #0a0806 100%);
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility 0s linear .7s;
  -webkit-tap-highlight-color:transparent;
}
.intro[hidden]{ display:none; }
.intro:focus{ outline:none; }
.intro.is-on{ opacity:1; visibility:visible; transition:opacity .7s var(--ease); }
.intro.is-leaving{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 1.1s var(--ease), visibility 0s linear 1.1s; }

/* a warm light drifting slowly over the table */
.intro::before{
  content:""; position:absolute; inset:-25%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, rgba(232,204,148,.13), transparent 42%);
  animation:introLamp 16s ease-in-out infinite alternate;
}
@keyframes introLamp{ to{ transform:translate(16%,10%); } }
/* and the dark edges of the frame, over the photos */
.intro::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 78% 72% at 50% 46%, transparent 52%, rgba(6,5,4,.6));
}

.intro__stage{ position:absolute; left:0; top:0; display:block; }

/* today's photo, behind the pile: it appears on the last hit and slowly settles */
.intro__today{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.16);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.intro.is-on .intro__today{ will-change:transform, opacity; }
.intro.is-end .intro__today{
  opacity:1; transform:none;
  transition:opacity .1s linear, transform 2.8s cubic-bezier(.2,.7,.25,1);
}

/* "Kids, let us tell you a story." */
.intro__pre{
  position:absolute; z-index:2; left:50%; top:47%;
  width:min(88vw,36rem); margin:0;
  transform:translate(-50%,-50%) scale(.98);
  text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem); line-height:1.22;
  color:var(--cream); text-wrap:balance;
  opacity:0;
  transition:opacity .22s var(--ease), transform .3s var(--ease);
}
.intro.is-pre .intro__pre{
  opacity:1; transform:translate(-50%,-50%);
  transition:opacity .6s var(--ease), transform 1.6s var(--ease-out);
}

/* the year, ticking up as the photos land */
.intro__year{
  position:absolute; z-index:2; left:0; right:0;
  bottom:max(clamp(1.4rem,6vh,3.6rem), env(safe-area-inset-bottom));
  height:1em; pointer-events:none;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.4rem,2rem + 6vw,7.5rem); line-height:1;
  letter-spacing:.06em; text-align:center;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--gold-soft);
  text-shadow:0 1px 14px rgba(0,0,0,.45);
  transition:opacity .25s var(--ease);
}
.intro__year span{ position:absolute; left:0; right:0; animation:yearIn .34s var(--ease-out) both; }
.intro__year span.is-out{ animation:yearOut .3s var(--ease) both; }
.intro__year span.is-warm{ opacity:0; animation:none; }
@keyframes yearIn{ from{ opacity:0; transform:translateY(.32em); } }
@keyframes yearOut{ to{ opacity:0; transform:translateY(-.32em); } }
.intro.is-end .intro__year{ opacity:0; }

/* the names, over today's photo */
.intro__end{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:0 var(--gutter) max(clamp(2.6rem,9vh,5.5rem), env(safe-area-inset-bottom));
  text-align:center; pointer-events:none;
}
.intro__end::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:max(62vh,26rem); z-index:-1;
  background:linear-gradient(to top, rgba(12,9,6,.86), rgba(12,9,6,.5) 48%, rgba(12,9,6,0));
  opacity:0; transition:opacity .5s var(--ease);
}
.intro__end > *{
  opacity:0; transform:translateY(18px); filter:blur(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.intro.is-end .intro__end::before{ opacity:1; }
.intro.is-end .intro__end > *{
  opacity:1; transform:none; filter:none;
  transition:opacity 1s var(--ease), transform 1.3s var(--ease-out), filter 1.1s var(--ease);
}
.intro.is-end .intro__kicker{ transition-delay:.12s; }
.intro.is-end .intro__title{ transition-delay:.3s; }
.intro.is-end .intro__line{ transition-delay:.85s; }
.intro.is-end .intro__when{ transition-delay:1.05s; }

.intro__kicker{
  margin:0 0 .7rem;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem); color:var(--cream);
}
.intro__title{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,13vw,8rem); line-height:.95; letter-spacing:.01em; white-space:nowrap;
  color:var(--cream);
}
.intro__title i{ font-style:italic; color:var(--gold-soft); }
.intro__line, .intro__when{
  margin:1.2rem 0 0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(.74rem,.68rem + .3vw,.9rem); letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-soft); text-wrap:balance;
}
@media (max-width:480px){ .intro__line, .intro__when{ letter-spacing:.2em; } }
.intro__when{ margin-top:.55rem; color:rgba(var(--cream-rgb),.8); letter-spacing:.24em; }

/* the flash on the last hit */
.intro__flash{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#fff6e6; opacity:0;
}
.intro.is-end .intro__flash{ animation:introFlash .6s var(--ease) both; }
@keyframes introFlash{ 0%{ opacity:.6; } 100%{ opacity:0; } }

/* only if the files are slow: a thin line breathing in the middle */
.intro__wait{
  position:absolute; z-index:2; left:50%; top:50%;
  width:5rem; height:1px; margin-left:-2.5rem;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  opacity:0; transition:opacity .3s var(--ease);
}
.intro.is-on:not(.is-ready) .intro__wait{ opacity:1; transition-delay:.8s; animation:introWait 1.4s ease-in-out infinite; }
@keyframes introWait{ 50%{ transform:scaleX(.35); } }

.intro__ctrl{
  position:absolute; z-index:4;
  top:max(1rem, env(safe-area-inset-top)); right:max(1rem, env(safe-area-inset-right));
  display:flex; gap:.5rem;
}
.intro__ctrl button{
  appearance:none; cursor:pointer;
  min-height:2.75rem; padding:.55rem 1rem .55rem calc(1rem + .22em);
  font-family:var(--sans); font-size:.68rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(var(--cream-rgb),.8);
  background:rgba(16,12,8,.38);
  border:1px solid rgba(var(--gold-rgb),.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.intro__ctrl button:hover{ color:#fff; border-color:rgba(var(--gold-rgb),.65); background:rgba(16,12,8,.55); }
.intro__ctrl button.is-muted{ color:var(--gold-soft); }

@media (prefers-reduced-motion:reduce){
  .intro::before{ animation:none; }
  .intro.is-end .intro__flash{ animation:none; }
  .intro__today{ transform:none; }
  .intro.is-end .intro__today{ transition:opacity .6s var(--ease); }
}

/* ============================================================
   THE FRIENDS INTRO (assets/js/intro-friends.js)
   Black, white lettering, red, blue and yellow dots.
   ============================================================ */
.intro--friends{ background:#000; }
.intro--friends::before{ display:none; }
.intro--friends::after{ background:radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(0,0,0,.5)); }
.intro--friends .intro__pre, .intro--friends .intro__year, .intro--friends .intro__end,
.intro--friends .intro__today, .intro--friends .intro__flash{ display:none; }

.fr{ position:absolute; inset:0; z-index:2; pointer-events:none; color:#fff; }
.fr svg{ display:block; overflow:visible; }
.fr__plain{ font-family:var(--sans); font-weight:500; letter-spacing:.12em; text-transform:uppercase; }

/* the name, like the actors' names in the credits */
.fr__cap{
  position:absolute; left:4vw; right:4vw;
  bottom:max(clamp(2.4rem,11vh,6.5rem), env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; column-gap:.45em; row-gap:.3em;
  font-size:clamp(1.6rem,1rem + 3.2vw,3.6rem);
  opacity:0; transform:translateY(12px);
  transition:opacity .2s var(--ease), transform .3s var(--ease);
}
/* a soft dark glow behind the name, so it reads on any photo (cheaper than a shadow filter) */
.fr__cap::before{
  content:""; position:absolute; inset:-60% -8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.fr__cap span{ display:block; }
.fr__cap svg{ height:1em; width:auto; max-width:92vw; }
.fr__cap.is-on{ opacity:1; transform:none; transition:opacity .35s var(--ease), transform .7s var(--ease-out); }

/* the four claps: four dots, popping in one by one */
.fr__dots{
  position:absolute; left:50%; top:46%;
  display:flex; gap:clamp(1.1rem,5vw,3rem);
  transform:translate(-50%,-50%);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.fr__dots i{
  display:block; width:clamp(1.8rem,1rem + 4vw,4rem); aspect-ratio:1; border-radius:50%;
  transform:scale(0); box-shadow:0 6px 30px rgba(0,0,0,.45);
}
.fr__dots i.is-on{ animation:frPop .38s cubic-bezier(.3,1.7,.5,1) both; }
.fr__dots.is-gone{ opacity:0; transform:translate(-50%,-50%) scale(1.8); }
@keyframes frPop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* the logo at the end */
.fr__logo{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 5vw; text-align:center;
  visibility:hidden;
}
.intro.is-end .fr__logo{ visibility:visible; }
.fr__mark svg{ width:min(88vw,64rem); height:auto; }
.fr__mark.is-flown{ visibility:hidden; }   /* its letters are flying into the website's title */
/* on a narrow screen: A.D.A.M, &, K.A.R.I.N on three lines, much bigger */
.fr__mark--tall{ display:none; }
.fr__mark--tall svg{ width:auto; height:clamp(3rem,15vw,6rem); max-width:90vw; margin:0 auto; }
.fr__mark--tall svg + svg{ margin-top:clamp(.6rem,3vw,1.2rem); }
.fr__mark--tall svg:nth-child(2){ height:clamp(2.2rem,11vw,4.4rem); }
@media (max-aspect-ratio:4/5){
  .fr__mark--wide{ display:none; }
  .fr__mark--tall{ display:block; }
}
.fr__mark .fr__bit{ opacity:0; transform-box:fill-box; transform-origin:50% 60%; }
.intro.is-end .fr__mark .fr__bit{ animation:frLetter .55s cubic-bezier(.3,1.5,.5,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
@keyframes frLetter{ from{ opacity:0; transform:translateY(18%) scale(.55); } to{ opacity:1; transform:none; } }
.fr__one, .fr__line, .fr__when{ opacity:0; transform:translateY(10px); }
.intro.is-end .fr__one, .intro.is-end .fr__line, .intro.is-end .fr__when{
  opacity:1; transform:none; transition:opacity .9s var(--ease), transform 1.1s var(--ease-out);
}
.fr__one{ margin-top:clamp(1.6rem,5vh,3rem); }
.fr__one svg{ height:clamp(1.1rem,.8rem + 1.6vw,2rem); width:auto; max-width:88vw; margin:0 auto; color:rgba(255,255,255,.9); }
.intro.is-end .fr__one{ transition-delay:var(--hit, 1s); }
.fr__line, .fr__when{
  margin:1.1rem 0 0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(.72rem,.66rem + .3vw,.9rem); letter-spacing:.3em; text-transform:uppercase;
  color:#fde21c; text-wrap:balance;
}
.fr__when{ margin-top:.5rem; color:rgba(255,255,255,.78); letter-spacing:.22em; }
.intro.is-end .fr__line{ transition-delay:calc(var(--hit, 1s) + .5s); }
.intro.is-end .fr__when{ transition-delay:calc(var(--hit, 1s) + .7s); }
@media (max-width:480px){ .fr__line, .fr__when{ letter-spacing:.18em; } }