/* Generated lettering enhances real text; failed images leave the text visible. */
.hero h1{font-size:clamp(3.2rem,5.6vw,5.1rem);line-height:1.08}
.hero-title-line{display:block;white-space:nowrap;color:var(--green);letter-spacing:-.045em;word-spacing:.05em}
.hero-title-tail{display:flex;align-items:center;gap:.1em;margin-top:.08em;color:var(--green)}
.hero-title-prefix{flex-shrink:0;color:inherit;white-space:pre}
.hero-title-prefix[hidden]{display:none}
#hero-title[data-hero=better] .hero-title-prefix{font-size:.62em;letter-spacing:-.04em}
#hero-title[data-hero=better] .lettering-japanese{flex:1;max-width:none}
#hero-title[data-hero=level] .lettering-japanese{max-width:100%}
.lettering{position:relative;display:inline-grid;align-items:center;isolation:isolate;background:var(--paper);vertical-align:middle}
.lettering-text,.lettering-art{grid-area:1/1}
.lettering-text{font-style:italic;white-space:nowrap;color:var(--orange)}
.lettering-art{position:absolute;inset:0;opacity:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.art-ready>.lettering-text{opacity:0}
.art-ready>.lettering-art{opacity:1}
.lettering-japanese{width:5.25em;max-width:78%;aspect-ratio:2.2;min-width:0}
.lettering-japanese .lettering-text{font-size:.95em;letter-spacing:-.06em}
.lettering-phrase{display:grid;width:100%;max-width:490px;aspect-ratio:3.7;background:var(--pale-green);margin-top:-.03em}
.lettering-phrase .lettering-text{font-size:.86em;color:var(--green)}
.lettering-phrase .lettering-art{position:absolute;inset:0}
.hero-description{margin-top:1.35rem}
.preview-label{display:flex;align-items:center;justify-content:center;gap:7px}
.drifting-leaf{position:absolute;width:21px;height:12px;border-radius:2px 14px 2px 14px;pointer-events:none;opacity:0;background:#8c995b;z-index:1}
.drifting-leaf::after{content:'';position:absolute;left:2px;right:2px;top:50%;height:1px;background:#e2d49499;transform:rotate(23deg)}
.leaf-one{left:12%;top:20%}
.leaf-two{right:7%;top:32%;background:#b68347;width:17px;height:10px}
.leaf-three{left:7%;top:47%;width:13px;height:8px;background:#a2ac78}
.motion-ready .phone-frame{animation:phone-drift 8s ease-in-out infinite}
.motion-ready .match-note{animation:note-drift 8s ease-in-out -3s infinite}
.motion-ready .drifting-leaf{animation:leaf-drift 10s ease-in-out infinite}
.motion-ready .leaf-two{animation-delay:-5s;animation-duration:12s}
.motion-ready .leaf-three{animation-delay:-8s;animation-duration:13s}
.motion-ready .tanji-name-art img{animation:tanji-sway 10s ease-in-out infinite;transform-origin:50% 87%}
.motion-ready .sample-tile{animation:tile-kana 7s ease-in-out infinite}
.motion-ready .sample-tile.roman{animation-name:tile-sound}
.motion-ready .pair-line::before{content:'';position:absolute;inset:-1px 0;background:#657a4d;transform-origin:left;animation:pair-connect 7s ease-in-out infinite}
.motion-ready .has-entered [data-reveal]{animation:arrive .7s cubic-bezier(.2,.7,.3,1) both}
.motion-ready .has-entered .art-ready .lettering-art{animation:lettering-arrive .9s cubic-bezier(.2,.7,.3,1) both}
.motion-ready [data-motion-scene]:not(.is-in-view) *,
.motion-ready [data-motion-scene]:not(.is-in-view) *::before,
.motion-ready [data-motion-scene]:not(.is-in-view) *::after,
.motion-ready[data-motion=paused] *,
.motion-ready[data-motion=paused] *::before,
.motion-ready[data-motion=paused] *::after{animation-play-state:paused!important}
/* Pausing while a one-off entrance is incomplete must never leave text hidden. */
.motion-ready[data-motion=paused] [data-reveal],
.motion-ready[data-motion=paused] .art-ready .lettering-art{animation:none!important}
.motion-ready[data-motion=paused] .drifting-leaf{opacity:0}
@keyframes phone-drift{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-7px) rotate(4.25deg)}}
@keyframes note-drift{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(5px) rotate(-5deg)}}
@keyframes leaf-drift{0%{opacity:0;transform:translate3d(0,-12px,0) rotate(-30deg)}15%,70%{opacity:.75}100%{opacity:0;transform:translate3d(28px,70px,0) rotate(130deg)}}
@keyframes tanji-sway{0%,65%,100%{transform:rotate(0)}74%{transform:rotate(-2deg)}82%{transform:rotate(1.4deg)}90%{transform:rotate(-.7deg)}}
@keyframes tile-kana{0%,12%,85%,100%{transform:translateX(0) rotate(-7deg)}32%,67%{transform:translateX(7px) rotate(-3deg)}}
@keyframes tile-sound{0%,12%,85%,100%{transform:translateX(0) rotate(6deg)}32%,67%{transform:translateX(-7px) rotate(2deg)}}
@keyframes pair-connect{0%,18%,88%,100%{transform:scaleX(0);opacity:0}38%,68%{transform:scaleX(1);opacity:1}}
@keyframes arrive{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes lettering-arrive{from{opacity:0;transform:translateY(6px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:1100px){.hero h1{font-size:clamp(3rem,5.45vw,4.5rem)}}
@media(max-width:820px){.hero h1{font-size:clamp(2.6rem,5.4vw,3.8rem)}.lettering-japanese{max-width:76%}}
@media(max-width:640px){.hero h1{font-size:clamp(2.7rem,9.5vw,3.8rem)}.hero-title-tail{margin-top:0}.lettering-japanese{max-width:78%}.hero-description{margin-top:18px}.lettering-phrase{max-width:440px}.drifting-leaf{width:17px;height:10px}}
@media(max-width:380px){.hero h1{font-size:clamp(2.45rem,12vw,2.8rem)}.lettering-japanese{max-width:77%}.lettering-phrase .lettering-text{font-size:.81em}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .drifting-leaf{display:none}
}
@media(forced-colors:active){.lettering-art{display:none}.art-ready>.lettering-text{opacity:1}}
@media print{.lettering-art,.drifting-leaf{display:none}.art-ready>.lettering-text{opacity:1}}