/* Yomidori v5 — carries the hero's boldness through the page.
   No pale blue bands, no tinted icon chips: kickers become big red
   mincho glyphs, the worlds block goes deep navy. Load AFTER site-v4.css. */

/* section kickers — a bold glyph, not a chip */
.lbl{align-items:center;gap:13px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--flag-red)}
.lbl::before{display:none}
.lbl .tile{background:none!important;color:currentColor;width:auto;height:auto;border-radius:0;font-family:var(--f-mincho);font-size:38px;line-height:.78;position:relative;top:1px}
.h2 em{font-style:normal;font-family:var(--f-mincho);color:var(--flag-red)}
.sec .h2{letter-spacing:-.025em}

/* grounds: warm paper and blooms instead of tinted bands */
.read,.kanji-sec,.words-sec,.worlds{position:relative;overflow:hidden}
.read .wrap,.kanji-sec .wrap,.words-sec .wrap,.worlds .wrap{position:relative;z-index:1}
.read{background:var(--paper-warm);background-image:linear-gradient(rgba(37,57,86,.045) 1px,transparent 1px);background-size:100% 42px}
.read::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--coral-soft);right:-170px;top:-150px;opacity:.55;pointer-events:none}
.kanji-sec{background:var(--paper)}
.kanji-sec::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:var(--matcha-soft);right:-180px;top:-140px;pointer-events:none}
.words-sec::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:var(--coral-soft);left:-190px;bottom:-160px;opacity:.6;pointer-events:none}

/* source doors — white cards with a bold glyph */
.door{background:var(--card);border:1.5px solid var(--border);box-shadow:0 2px 0 var(--hair);transition:transform .16s,border-color .16s}
.door:hover{transform:translateY(-2px);border-color:var(--flag-red)}
.door .tile{background:none!important;width:auto;height:auto;border-radius:0;font-size:31px;line-height:1}

/* what you can read — the bold centrepiece */
.worlds{background:var(--navy-deep);margin:0 14px;border-radius:var(--r-block)}
.worlds .h2{color:#fff}
.worlds .standfirst{color:rgba(255,255,255,.72)}
.worlds .lbl{color:var(--accent-on-dark)}
.world{--wc:var(--navy);background:var(--card)!important;border:0;padding:32px 30px;min-height:326px;gap:16px;box-shadow:0 16px 38px rgba(0,0,0,.2)}
.world.photo{--wc:var(--flag-red)}.world.pod{--wc:var(--navy)}.world.web{--wc:var(--matcha-ink)}
.world::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--wc)}
.world .tile{background:none!important;color:var(--wc)!important;width:auto;height:auto;border-radius:0;font-size:56px;line-height:.9;margin-top:4px}
.world .bigk{color:var(--wc)!important;opacity:.1;font-size:200px;right:-26px;bottom:-52px}
.world h3{font-size:25px;letter-spacing:-.02em}
.world:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.26)}

/* method — louder */
.method{background:var(--paper-warm)}
.quote{font-size:clamp(30px,4vw,50px);line-height:1.34;letter-spacing:-.02em;max-width:24em}
.quote em{color:var(--flag-red)}
.seal{width:62px;height:62px;font-size:34px;background:var(--flag-red);border-radius:50%;box-shadow:0 10px 22px rgba(188,0,45,.26)}
.beliefs .n{font-size:42px;font-weight:500}
.beliefs h3{font-size:22px}
/* section glyphs drawn in the logo's own hand — KanjiVG strokes, navy, 7.2 weight */
/* hero headline: each word resolves out of a blur in turn */
.h1-blur>span,.h1-blur>em{display:inline-block;opacity:0;filter:blur(13px);transform:translateY(6px) scale(1.03);animation:word-unblur .72s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.08s + var(--i) * .16s)}
@keyframes word-unblur{to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){.h1-blur>span,.h1-blur>em{animation:none;opacity:1;filter:none;transform:none}}

/* hero mark: after the page has settled the 甬 resolves out of a blur, then the road
   strokes draw, then the hinomaru lands last */
.mark--animated{opacity:0;filter:blur(15px);animation:mark-unblur .9s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
@keyframes mark-unblur{from{opacity:0;filter:blur(15px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:none}}
.mark--animated path{stroke-dasharray:none;stroke-dashoffset:0;opacity:1;animation:none}
@keyframes mark-fade{to{opacity:1}}
.mark--animated path:nth-of-type(8),.mark--animated path:nth-of-type(9){opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:mark-road .6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mark-road{0%{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
.mark--animated path:nth-of-type(8){animation-delay:1.95s;animation-duration:.52s}
.mark--animated path:nth-of-type(9){animation-delay:2.38s;animation-duration:.66s}
.mark--animated .mark-dot{animation-delay:3.1s}
@media (prefers-reduced-motion:reduce){.mark--animated{animation:none;opacity:1;filter:none}.mark--animated path{animation:none;opacity:1;stroke-dashoffset:0}}
.glyph-mark{display:inline-flex;align-items:center;justify-content:center;background:none!important;border-radius:0}
.glyph-mark svg{display:block;width:100%;height:100%;overflow:visible}
.glyph-mark .ghost path{stroke:transparent}
.glyph-mark .ink path{stroke:var(--navy)}
.lbl .glyph-mark{width:48px;height:48px;flex:0 0 48px}
.door .glyph-mark{width:36px;height:36px;flex:0 0 36px}
.world .glyph-mark{width:60px;height:60px;flex:0 0 60px;margin-top:2px}
.world .glyph-mark .ink path{stroke:var(--wc)}
.worlds .lbl .glyph-mark .ink path{stroke:var(--accent-on-dark)}
@media (max-width:560px){.lbl .glyph-mark{width:40px;height:40px;flex:0 0 40px}}
@media (max-width:900px){.world{min-height:0}}
