/* The daily intro on passport.tomko.dk (index.html #intro + js/intro.js). Only shown when the inline <head> script set
   html.intro (first visit of the local day). Timeline: lamp flickers on, the passport drops onto the desk (0.1-0.75 s),
   the rubber stamp slams today's ENTRY stamp on it (1.0 s), the wordmark lands, everything fades at 2.35 s.
   CSS only (transform / opacity / clip-path), so it starts on the first frame and ends even if the script never runs. */
#intro { display:none; }
html.intro body { overflow:hidden; }
html.intro #intro { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; align-content:center; gap:clamp(16px, 4vh, 34px); padding:16px; background:#07080a; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; animation:in-out .45s 2.35s forwards; }
html.intro #intro.skip { animation:in-out .25s forwards; }
@keyframes in-out { to { opacity:0; visibility:hidden; } }

/* the desk lamp */
.in-light { position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(58vmax 44vmax at 50% 34%, rgba(255,196,120,.22), rgba(245, 130, 31,.08) 45%, transparent 70%),
  radial-gradient(130vmax 95vmax at 50% 50%, transparent 52%, rgba(0,0,0,.65)); animation:in-lamp .5s steps(1) both; }
@keyframes in-lamp { 0% { opacity:0; } 28% { opacity:.75; } 40% { opacity:.12; } 54% { opacity:1; } 66% { opacity:.55; } 76%, 100% { opacity:1; } }

/* the passport */
.in-stage { position:relative; width:clamp(170px, 42vw, 260px); aspect-ratio:200 / 284; animation:in-shake .34s 1s both, in-zoom .45s 2.35s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes in-shake { 18% { transform:translate(-6px, 5px) rotate(-.7deg); } 42% { transform:translate(5px, -3px) rotate(.5deg); } 68% { transform:translate(-2px, 2px); } }
@keyframes in-zoom { to { transform:scale(1.16) translateY(-10px); } }
.in-book { position:absolute; inset:0; animation:in-drop .64s .1s both; }
@keyframes in-drop {
  0% { transform:translateY(-100vh) rotate(-26deg); animation-timing-function:cubic-bezier(.45, 0, .9, .45); }
  62% { transform:translateY(0) rotate(-2deg) scale(1.07, .91); animation-timing-function:cubic-bezier(.2, .8, .3, 1); }
  80% { transform:translateY(-9px) rotate(-4.6deg) scale(.98, 1.03); }
  100% { transform:rotate(-4deg); }
}
.in-cover { display:block; width:100%; height:100%; overflow:visible; }
.in-shadow { position:absolute; left:6%; right:6%; bottom:-6%; height:10%; border-radius:50%; background:rgba(0,0,0,.6); filter:blur(7px); animation:in-shad .64s .1s both; }
@keyframes in-shad { 0% { opacity:0; transform:scale(.25); } 62% { opacity:1; transform:scale(1.05); } }
.in-gloss { position:absolute; inset:1.5%; border-radius:6% / 4.2%; overflow:hidden; pointer-events:none; }
.in-gloss::after { content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:42%; background:linear-gradient(100deg, transparent, rgba(255,244,216,.5), transparent); transform:translateX(-150%) skewX(-12deg); animation:in-gloss .75s 1.18s ease-in-out both; }
@keyframes in-gloss { to { transform:translateX(330%) skewX(-12deg); } }

/* the stamp + its imprint (centre of the imprint = 50% / 61.6% of the cover) */
.in-imp { transform-box:fill-box; transform-origin:center; animation:in-imp .32s 1s cubic-bezier(.3, 1.6, .4, 1) both; }
@keyframes in-imp { 0% { opacity:0; transform:scale(1.35); } 1% { opacity:.96; } 100% { opacity:.9; transform:none; } }
.in-stamp { position:absolute; width:54%; left:23%; bottom:38.4%; overflow:visible; transform-origin:50% 100%; animation:in-stamp 1.5s both; }
@keyframes in-stamp {
  0%, 44% { opacity:0; transform:translateY(-110vh) rotate(-10deg); }
  45% { opacity:1; transform:translateY(-100vh) rotate(-10deg); animation-timing-function:cubic-bezier(.2, .7, .3, 1); }
  58% { transform:translateY(-24%) rotate(-3deg); animation-timing-function:cubic-bezier(.7, 0, 1, .6); }
  66.7% { transform:translateY(0) scale(1.04, .88); animation-timing-function:ease-out; }
  73% { transform:translateY(0) scale(1); }
  78% { transform:translateY(-5%); animation-timing-function:cubic-bezier(.5, 0, .85, .35); }
  100% { opacity:1; transform:translateY(-110vh) rotate(9deg); }
}
.in-ring { position:absolute; left:50%; top:61.6%; width:90%; aspect-ratio:1; border:3px solid rgba(255,244,216,.75); border-radius:50%; opacity:0; transform:translate(-50%, -50%) scale(.25); animation:in-ring .5s 1s ease-out both; pointer-events:none; }
@keyframes in-ring { 1% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -50%) scale(1.45); } }
.in-splat i { position:absolute; left:calc(50% + var(--x)); top:calc(61.6% + var(--y)); width:var(--s); aspect-ratio:1; border-radius:50%; background:#1d2b57; mix-blend-mode:multiply; transform:translate(-50%, -50%) scale(0); animation:in-pop .22s 1s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes in-pop { to { transform:translate(-50%, -50%) scale(1); } }
.in-dust { position:absolute; left:0; right:0; bottom:-3%; height:0; }
.in-dust i { position:absolute; bottom:0; width:20px; height:20px; border-radius:50%; background:rgba(236,226,200,.55); opacity:0; animation:in-dust .55s .5s ease-out both; }
.in-dust i:nth-child(1) { left:-4%; } .in-dust i:nth-child(2) { left:16%; } .in-dust i:nth-child(3) { right:16%; } .in-dust i:nth-child(4) { right:-4%; }
@keyframes in-dust { 0% { opacity:.75; transform:scale(.3); } 100% { opacity:0; transform:translate(var(--dx), -16px) scale(1.9); } }

/* the wordmark */
.in-word { position:relative; display:grid; justify-items:center; text-align:center; }
.in-brand { font:800 clamp(32px, 8.5vw, 50px)/1 var(--display); letter-spacing:-.02em; color:#eceef1; white-space:nowrap; }
.in-brand b { color:var(--accent); }
.in-brand span { display:inline-block; animation:in-letter .44s calc(1.18s + var(--i) * 42ms) cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes in-letter { from { opacity:0; transform:translateY(-.7em) rotate(-12deg) scale(1.3); } }
.in-pp { position:relative; margin-top:-.12em; font:700 clamp(32px, 8.5vw, 48px)/1 var(--hand); color:var(--gold); transform:rotate(-4deg); clip-path:inset(-20% 100% -40% 0); animation:in-write .55s 1.55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes in-write { to { clip-path:inset(-20% -6% -40% 0); } }
.in-pp svg { position:absolute; left:-4%; right:-4%; bottom:-.16em; width:108%; height:.32em; overflow:visible; }
.in-pp path { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:220; stroke-dashoffset:220; animation:in-line .4s 1.95s ease-out forwards; }
@keyframes in-line { to { stroke-dashoffset:0; } }
.in-hi { margin:14px 0 0; font:600 13px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); animation:in-fade .45s 1.9s both; }
@keyframes in-fade { from { opacity:0; transform:translateY(6px); } }

@media (max-height:520px) { .in-stage { width:clamp(110px, 26vh, 170px); } html.intro #intro { gap:10px; } }