/* Introduction page: what Nihongo Renshuu is. A kanji drill-book hero,
   the meaning of the name, the features with small product vignettes, and
   the live content figures and languages on the indigo band (same seigaiha
   wave as the lifetime pass). */
.intro-page{--intro-deep:oklch(40% .17 274);--intro-mid:oklch(53% .2 274);--intro-bright:oklch(60% .19 282);display:grid;gap:20px}
.intro-page>*{min-width:0}
.intro-page h2{margin:0;font-size:18px;font-weight:500}
.intro-page :is(.intro-hero,.intro-name){padding:22px;border-radius:var(--radius-surface);background:var(--color-surface)}

/* Hero: a page of a kanji drill book (練習帳). The model is written in
   ink stroke by stroke, then copied in pencil over a grey guide; the guides
   fade along the row and the last squares are left to fill in. */
.intro-hero{display:grid;gap:clamp(24px,3.4vw,36px)}
.intro-drill{--cells:4;--line:color-mix(in oklch,oklch(86% .035 274),oklch(38% .04 274) var(--dark-mix));display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:36rem){.intro-drill{--cells:6}}
@media(min-width:56rem){.intro-drill{--cells:8}}
.intro-drill-row{display:grid;grid-template-columns:clamp(34px,4vw,48px) repeat(var(--cells),minmax(0,1fr))}
.intro-drill-row>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:35.99rem){.intro-drill-cell:nth-child(n+6){display:none}}
@media(min-width:36rem) and (max-width:55.99rem){.intro-drill-cell:nth-child(n+8){display:none}}
.intro-drill-head{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:10px 0 8px;background:var(--color-accent-soft);color:var(--color-accent);font-size:11px}
.intro-drill-kana{writing-mode:vertical-rl;font:500 clamp(13px,1.4vw,16px) var(--font-japanese);letter-spacing:.12em}
.intro-drill-cell{aspect-ratio:1;padding:9%}
.intro-drill-cell svg{display:block;width:100%;height:100%}
.intro-ghost{color:var(--color-paper-3)}
.is-ghost-1 .intro-ghost{color:color-mix(in oklch,oklch(94% .004 265),oklch(26% .008 265) var(--dark-mix))}
.is-ghost-2 .intro-ghost{color:color-mix(in oklch,oklch(96% .003 265),oklch(23.5% .008 265) var(--dark-mix))}
.is-trace .intro-ink{color:var(--color-accent);stroke-width:3.4}
.intro-hero-copy{display:grid;gap:14px;align-items:end}
@media(min-width:56rem){.intro-hero-copy{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px}}
.intro-lead{margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.intro-sub{margin:0;max-width:46ch;color:var(--color-muted);font-size:15px;line-height:1.65}
.intro-ink{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.intro-drill .intro-ink path{stroke-dasharray:1 1.5;stroke-dashoffset:1.25;animation:intro-draw .4s var(--ease-in-out) forwards;animation-delay:calc(.3s + var(--d))}
.intro-drill .is-trace .intro-ink path{animation-duration:.26s;animation-delay:calc(5.1s + var(--d) * .55)}
.intro-drill .s1{--d:0s}.intro-drill .s2{--d:0.17s}.intro-drill .s3{--d:0.34s}.intro-drill .s4{--d:0.51s}.intro-drill .s5{--d:0.68s}.intro-drill .s6{--d:0.85s}.intro-drill .s7{--d:1.02s}.intro-drill .s8{--d:1.19s}.intro-drill .s9{--d:1.36s}.intro-drill .s10{--d:1.53s}.intro-drill .s11{--d:1.7s}.intro-drill .s12{--d:1.87s}.intro-drill .s13{--d:2.04s}.intro-drill .s14{--d:2.21s}.intro-drill .s15{--d:2.68s}.intro-drill .s16{--d:2.85s}.intro-drill .s17{--d:3.02s}.intro-drill .s18{--d:3.19s}.intro-drill .s19{--d:3.36s}.intro-drill .s20{--d:3.53s}.intro-drill .s21{--d:3.7s}.intro-drill .s22{--d:3.87s}.intro-drill .s23{--d:4.04s}.intro-drill .s24{--d:4.21s}.intro-drill .s25{--d:4.38s}
@keyframes intro-draw{to{stroke-dashoffset:0}}

/* The name */
.intro-name{display:grid;gap:24px}
.intro-words{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0}
.intro-words>div{display:flex;align-items:baseline;gap:14px}
.intro-words dt{font:500 28px var(--font-japanese)}
.intro-words rt{font-size:11px;color:var(--color-muted)}
.intro-words dd{margin:0;color:var(--color-muted);font-size:14px}
.intro-kanji-grid{display:grid;gap:16px}
@media(min-width:44rem){.intro-kanji-grid{grid-template-columns:1fr 1fr}}
.intro-kanji{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;padding:18px;border-radius:16px;background:var(--color-paper)}
.intro-kanji-glyph{display:block;padding:10px;border-radius:14px;background:var(--color-surface);color:var(--color-ink);transition:background var(--dur-short)}
.intro-kanji-glyph:hover{background:var(--color-accent-soft)}
.intro-kanji-glyph svg{display:block;width:100%;height:auto}
@media(max-width:30rem){.intro-kanji{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px}.intro-kanji-glyph{padding:6px;border-radius:12px}}
.intro-kanji .intro-ink{stroke-width:4.4}
.intro-kanji .intro-radical{color:var(--color-accent)}
.intro-kanji h3{display:flex;align-items:baseline;gap:8px;margin:2px 0 6px;font:500 20px var(--font-japanese)}
.intro-kanji h3 small{color:var(--color-muted);font:400 13px var(--font-body)}
.intro-kanji p{margin:0;color:var(--color-muted);font-size:13px;line-height:1.65}
.intro-name-close{margin:0;padding-top:20px;border-top:1px dashed var(--color-rule);max-width:64ch;font-size:15px;line-height:1.65}

/* Features */
.intro-features{display:grid;gap:16px}
.intro-features>h2{padding-top:12px}
.intro-feature-grid{display:grid;gap:16px}
@media(min-width:40rem){.intro-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-feature.is-wide{grid-column:1/-1}}
@media(min-width:64rem){.intro-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.intro-feature:is(.is-wide,.is-wide-lg){grid-column:span 2}.intro-feature.is-wide-lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:28px}}
.intro-feature{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:22px;border-radius:var(--radius-surface);background:var(--color-surface);color:var(--color-ink);text-decoration:none;transition:box-shadow var(--dur-short),transform var(--dur-short) var(--ease-out)}
.intro-feature:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.intro-feature-icon{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent)}
.intro-feature h3{margin:14px 0 6px;font-size:16px;font-weight:500}
.intro-feature p{margin:0;color:var(--color-muted);font-size:13px;line-height:1.6}
@media(min-width:40rem){.intro-feature.is-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:28px}}
.intro-demo{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--color-paper-2)}
.intro-demo-search{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-control);background:var(--color-surface);font-size:14px}
.intro-demo-search svg{width:16px;height:16px;color:var(--color-muted)}
.intro-demo-search span::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--color-accent);animation:intro-caret 1.1s steps(1) infinite}
@keyframes intro-caret{50%{opacity:0}}
.intro-demo-entry{padding:14px 16px;border-radius:var(--radius-control);background:var(--color-surface)}
.intro-feature .intro-demo-word{margin:0;color:var(--color-ink);font:500 26px var(--font-japanese);line-height:1.5}
.intro-demo-word rt{font-size:11px;color:var(--color-muted)}
.intro-feature .intro-demo-gloss{margin:2px 0 10px;color:var(--color-ink);font-size:14px}
.intro-feature .intro-demo-sentence{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--color-rule);font-size:12px}
.intro-demo-sentence [lang=ja]{color:var(--color-ink);font-size:14px;font-family:var(--font-japanese)}
.intro-demo-sentence mark{padding:0 2px;border-radius:4px;background:var(--color-accent-soft);color:var(--color-accent)}
.intro-route{position:relative;display:flex;justify-content:space-between;gap:4px;margin:0;padding:0;list-style:none}
.intro-route::before{content:"";position:absolute;inset:50% 12px auto;border-top:2px dashed var(--color-paper-3)}
.intro-route li{position:relative;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-muted);font-size:12px;font-weight:500}
.intro-route li:first-child{background:var(--color-accent-soft);color:var(--color-accent)}
.intro-route li:last-child{background:var(--color-accent);color:var(--color-accent-ink)}

/* Figures and languages */
.intro-band{position:relative;isolation:isolate;display:grid;gap:32px;padding:22px;border-radius:var(--radius-surface);overflow:hidden;background:linear-gradient(160deg,var(--intro-bright),var(--intro-mid) 45%,var(--intro-deep));color:var(--color-on-dark)}
.intro-band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;mix-blend-mode:overlay;pointer-events:none;background-color:#000;
 background-image:radial-gradient(circle at 100% 150%,#000 24%,#fff 24% 28%,#000 28% 36%,#fff 36% 40%,transparent 40%),radial-gradient(circle at 0 150%,#000 24%,#fff 24% 28%,#000 28% 36%,#fff 36% 40%,transparent 40%),radial-gradient(circle at 50% 100%,#fff 10%,#000 10% 23%,#fff 23% 30%,#000 30% 43%,#fff 43% 50%,#000 50% 63%,#fff 63% 71%,transparent 71%),radial-gradient(circle at 100% 50%,#fff 5%,#000 5% 15%,#fff 15% 20%,#000 20% 29%,#fff 29% 34%,#000 34% 44%,#fff 44% 49%,transparent 49%),radial-gradient(circle at 0 50%,#fff 5%,#000 5% 15%,#fff 15% 20%,#000 20% 29%,#fff 29% 34%,#000 34% 44%,#fff 44% 49%,transparent 49%);
 background-size:56px 28px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%)}
@media(min-width:60rem){.intro-band{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px}}
.intro-stats dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;margin:22px 0 0}
@media(min-width:36rem){.intro-stats dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.intro-stats dl>div{display:flex;flex-direction:column-reverse;gap:2px}
.intro-stats dd{margin:0;font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.intro-stats dt{font-size:13px;opacity:.82}
.intro-note{margin:22px 0 0;font-size:12px;opacity:.75}
.intro-langs p{margin:10px 0 18px;font-size:14px;line-height:1.6;opacity:.85}
.intro-langs ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.intro-langs li{padding:8px 12px;border-radius:var(--radius-control);background:oklch(100% 0 0 / .12);font-size:14px;line-height:1.3}

@media(prefers-reduced-motion:reduce){
 .intro-drill .intro-ink path{animation:none;stroke-dashoffset:0}
 .intro-demo-search span::after{animation:none}
 .intro-feature,.intro-feature:hover{transition:none;transform:none}
}
@media(max-width:40rem){.intro-page :is(.intro-hero,.intro-name,.intro-band,.intro-feature){padding:16px}}