/* The black-screen intro on kanuko.in: "kanuko" flies in from the dark, becomes
   "search it", then the same idea in Indian languages, then opens onto the home page.
   Only shown when intro.js adds .intro-on to <html>. */

@font-face { font-family: "Intro Telugu"; src: url("/fonts/intro/intro-telugu.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Devanagari"; src: url("/fonts/intro/intro-devanagari.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Tamil"; src: url("/fonts/intro/intro-tamil.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Kannada"; src: url("/fonts/intro/intro-kannada.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Malayalam"; src: url("/fonts/intro/intro-malayalam.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Bengali"; src: url("/fonts/intro/intro-bengali.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Gujarati"; src: url("/fonts/intro/intro-gujarati.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Gurmukhi"; src: url("/fonts/intro/intro-gurmukhi.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Oriya"; src: url("/fonts/intro/intro-oriya.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Intro Urdu"; src: url("/fonts/intro/intro-urdu.woff2") format("woff2"); font-display: block; }

#intro { display: none; }
.intro-on { overflow: hidden; }
/* Until the black lifts, nothing behind it paints (no flash of the page on slow loads). */
.intro-on:not(.intro-reveal) body { background: #000; }
.intro-on:not(.intro-reveal) body > :not(#intro) { visibility: hidden; }
.intro-on #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000;
  background: #000; color: #f3f1ea; perspective: 900px; overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
#intro .stage3d { position: relative; width: 100%; height: 40vh; display: grid; place-items: center; transform-style: preserve-3d; }
#intro .word {
  position: absolute; white-space: nowrap; font: 600 clamp(64px, 15vw, 220px)/1 var(--sans); letter-spacing: -0.06em;
  opacity: 0; will-change: transform, opacity, filter;
}
#intro .word.script { letter-spacing: 0; font-weight: 500; }
#intro .word .dot { color: #ff5a24; }
#intro .label {
  position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; color: #7d7a72;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .25s;
}
#intro .label b { color: #ff5a24; font-weight: 500; }
#intro .meter { position: absolute; left: 50%; bottom: 10vh; width: min(220px, 50vw); height: 1px; background: #222; transform: translateX(-50%); }
#intro .meter i { position: absolute; inset: 0; background: #ff5a24; transform-origin: left; transform: scaleX(0); }
#intro .skip {
  position: absolute; top: 20px; right: var(--gutter); border: 1px solid #333; background: transparent; color: #9a978e;
  font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer;
}
#intro .skip:hover { color: #fff; border-color: #fff; }
#intro .grain { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse at center, transparent 40%, #000 100%); }