/* ─────────────────────────────────────────────────────────────
   Настя · японский язык — одностраничник
   Ванильный CSS, без сборки. Правится руками.
   Палитра и все настройки — в @layer tokens ниже.
   ───────────────────────────────────────────────────────────── */

@layer tokens, base, backdrop, layout, components, motion;

/* ── ТОКЕНЫ ────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;   /* сайт всегда светлый, системную тёмную тему не подхватывает */

    /* Бумага и тушь — спокойный розовый */
    --paper:      #fbeef0;
    --paper-2:    #f7e3e7;
    --paper-3:    #f2d7dd;
    --ink:        #281b25;
    --ink-soft:   #524050;
    --ink-faint:  #85707e;
    --line:       #e2c6cd;

    /* Живая палитра: у каждой секции свой цвет */
    --c-sakura:    #c74a79;   /* затемнён под розовый фон — контраст текста на кнопках */
    --c-mizu:      #2f93b3;
    --c-vermilion: #cf5238;
    --c-matcha:    #4f8f5c;
    --c-gold:      #bd8218;
    --c-fuji:      #7460ae;
    --c-ai:        #3d5aa0;

    --accent: var(--c-sakura);

    --radius:     3px;
    --radius-lg:  6px;

    --font-display: "Cormorant Garamond", "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-jp:      "Zen Old Mincho", "Yu Mincho", serif;

    --measure: 62ch;
    --progress-h: 2.1rem;   /* высота дорожки, по которой бежит котёнок */
    --gutter: clamp(1.25rem, 5vw, 5rem);
    --rhythm: clamp(4.5rem, 11vw, 9rem);
    --rail-w: 4.25rem;

    --ease: cubic-bezier(.22, .61, .36, 1);
  }

  /* Цвет раздела — подхватывают номер, подпись, кнопки и рамки внутри */
  #about   { --accent: var(--c-sakura); }
  #self    { --accent: var(--c-mizu); }
  #jlpt    { --accent: var(--c-vermilion); }
  #how     { --accent: var(--c-matcha); }
  #prices  { --accent: var(--c-gold); }
  #signup  { --accent: var(--c-fuji); }
  #faq     { --accent: var(--c-ai); }
  #reviews { --accent: var(--c-sakura); }
}

/* ── БАЗА ──────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;   /* плавная высота для height:auto */
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 clamp(1rem, .96rem + .2vw, 1.075rem)/1.75 var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: var(--progress-h);   /* место под дорожку котёнка */
  }

  /* Зерно бумаги поверх фона */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: .005em;
    text-wrap: balance;
    margin: 0;
  }

  p { text-wrap: pretty; margin: 0 0 1.1em; }
  p:last-child { margin-bottom: 0; }

  em { font-style: italic; color: var(--ink-faint); }

  a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent); text-underline-offset: .28em; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

  ::selection { background: color-mix(in oklab, var(--c-sakura) 32%, transparent); }

  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* ── ФОН: НЕБО, ПЕЙЗАЖ, ВЕТКИ, ЛЕПЕСТКИ ───────────────────── */
@layer backdrop {
  .backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      url("scenery.svg") bottom -1rem center / clamp(56rem, 104%, 112rem) auto no-repeat,
      radial-gradient(58rem 40rem at 12% -6%,  color-mix(in oklab, var(--c-sakura) 15%, transparent), transparent 70%),
      radial-gradient(52rem 34rem at 88% 4%,   color-mix(in oklab, var(--c-gold)   11%, transparent), transparent 70%),
      radial-gradient(64rem 44rem at 72% 42%,  color-mix(in oklab, var(--c-mizu)    9%, transparent), transparent 70%),
      radial-gradient(56rem 40rem at 18% 74%,  color-mix(in oklab, var(--c-matcha)  9%, transparent), transparent 70%),
      radial-gradient(46rem 34rem at 96% 88%,  color-mix(in oklab, var(--c-fuji)   11%, transparent), transparent 70%),
      var(--paper);
  }

  /* ветки сливы по верхним углам */
  .backdrop::before,
  .backdrop::after {
    content: "";
    position: absolute;
    top: -3.5rem;
    width: clamp(18rem, 32vw, 34rem);
    aspect-ratio: 600 / 420;
    background: url("branch.svg") no-repeat center / contain;
  }
  .backdrop::before { left: -3rem; }
  .backdrop::after  { right: -3rem; scale: -1 1; }

  @media (max-width: 47.99rem) {
    .backdrop::after { display: none; }
    .backdrop::before { width: 22rem; left: -6rem; }
  }

  /* Падающие лепестки сливы — круглые, без выемки */
  .petals {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .petals i {
    position: absolute;
    top: -8vh;
    left: var(--x);
    width: 13px;
    height: 14px;
    scale: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 75%, color-mix(in oklab, var(--c-sakura) 25%, white), var(--c-sakura));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-sakura) 55%, transparent);
    opacity: .6;
    animation: petal-fall var(--t) linear var(--d) infinite;
  }

  @keyframes petal-fall {
    0%   { translate: 0 0;      rotate: 0deg;   opacity: 0; }
    8%   { opacity: .55; }
    50%  { translate: 6vw 55vh; rotate: 220deg; }
    92%  { opacity: .5; }
    100% { translate: -3vw 112vh; rotate: 520deg; opacity: 0; }
  }
}

/* ── РАСКЛАДКА ─────────────────────────────────────────────── */
@layer layout {
  main, .site-footer, .site-header { position: relative; z-index: 1; }

  .section {
    max-width: 74rem;
    margin-inline: auto;
    padding: var(--rhythm) var(--gutter);
    scroll-margin-top: calc(5.5rem + var(--progress-h));
  }

  .grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
  @media (min-width: 56rem) {
    .grid--2 { grid-template-columns: 1.15fr .85fr; align-items: start; }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 36rem) and (max-width: 55.99rem) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
  }

  .lead {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + .85vw, 1.7rem);
    line-height: 1.55;
    max-width: var(--measure);
  }

  .hint {
    margin-top: 1.5rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
  }

  /* место под боковой рейл на широких экранах */
  @media (min-width: 68rem) {
    main, .site-footer { padding-inline-end: var(--rail-w); }
  }
}

/* ── КОМПОНЕНТЫ ────────────────────────────────────────────── */
@layer components {

  /* Индикатор чтения: котёнок гонит клубок, за ним разматывается нить */
  .progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: var(--progress-h);
    z-index: 60;
    background: color-mix(in oklab, var(--paper) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
    pointer-events: none;
  }

  /* размотанная нить = пройденная часть страницы */
  .progress__thread {
    position: absolute;
    left: 0;
    bottom: .45rem;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-sakura), var(--c-gold), var(--c-mizu), var(--c-fuji));
    transform-origin: 0 50%;
    scale: 0 1;
  }

  .progress__runner {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: .15rem;
  }
  .runner__cat  { width: 2.6rem; height: auto; display: block; animation: cat-hop .42s ease-in-out infinite; }
  .runner__yarn { width: 1.05rem; height: auto; display: block; margin-bottom: .12rem; animation: yarn-roll .6s linear infinite; }

  @supports (animation-timeline: scroll()) {
    .progress__thread {
      animation: thread-out linear both;
      animation-timeline: scroll(root block);
    }
    .progress__runner {
      animation: cat-run linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes thread-out { to { scale: 1 1; } }
  /* 1rem запаса — чтобы котёнок не уехал под полосу прокрутки */
  @keyframes cat-run    { to { translate: calc(100vw - 100% - 1rem) 0; } }
  @keyframes cat-hop {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -.12rem; }
  }
  @keyframes yarn-roll { to { rotate: 360deg; } }

  .cat-run__tail { transform-box: fill-box; transform-origin: 100% 100%; animation: run-tail .5s ease-in-out infinite alternate; }
  @keyframes run-tail { from { rotate: -8deg; } to { rotate: 10deg; } }

  .cat-run__legs { transform-box: fill-box; transform-origin: 50% 0; animation: run-legs .28s linear infinite alternate; }
  .cat-run__legs--b { animation-direction: alternate-reverse; }
  @keyframes run-legs { from { rotate: -16deg; } to { rotate: 16deg; } }

  /* — Шапка — */
  .site-header {
    position: sticky;
    top: var(--progress-h);   /* под дорожкой котёнка */
    z-index: 50;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: .7rem var(--gutter);
    background: color-mix(in oklab, var(--paper) 74%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    flex: none;
  }
  .brand__mark {
    width: 2rem;
    height: 2rem;
    display: block;
    transition: rotate .7s var(--ease), scale .35s var(--ease);
  }
  .brand:hover .brand__mark { rotate: 72deg; scale: 1.08; }

  .brand__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
  }
  .brand__sub {
    font-family: var(--font-jp);
    font-size: .7rem;
    color: var(--c-sakura);
    letter-spacing: .12em;
  }

  .nav {
    display: flex;
    gap: clamp(.75rem, 1.8vw, 1.6rem);
    margin-inline-start: auto;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav a {
    position: relative;
    white-space: nowrap;
    padding: .35rem 0;
    font-size: .875rem;
    letter-spacing: .02em;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .3s var(--ease);
  }
  .nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-sakura), var(--c-gold));
    scale: 0 1;
    transform-origin: 0 50%;
    transition: scale .35s var(--ease);
  }
  .nav a:hover,
  .nav a.is-active { color: var(--ink); }
  .nav a:hover::after,
  .nav a.is-active::after { scale: 1 1; }

  @media (max-width: 47.99rem) {
    .site-header { flex-wrap: wrap; gap: .5rem; }
    .nav { margin-inline-start: 0; width: 100%; padding-bottom: .2rem; }
  }

  /* — Боковой рейл: путь по разделам + токийская башня — */
  .rail {
    position: fixed;
    z-index: 40;
    top: 50%;
    right: 1.25rem;
    translate: 0 -50%;
    display: grid;
    justify-items: center;
    gap: .95rem;
    padding: 1rem .5rem 0;
  }
  @media (max-width: 67.99rem) { .rail { display: none; } }

  /* вертикальная нить, наливающаяся по мере скролла */
  .rail__track {
    position: absolute;
    top: .5rem;
    bottom: 9.5rem;
    width: 1.5px;
    background: color-mix(in oklab, var(--line) 90%, transparent);
    border-radius: 2px;
  }
  .rail__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--c-sakura), var(--c-gold), var(--c-mizu), var(--c-fuji));
    transform-origin: 50% 0;
    scale: 1 0;
  }
  @supports (animation-timeline: scroll()) {
    .rail__fill {
      animation: rail-fill linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes rail-fill { to { scale: 1 1; } }

  .rail__dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--line);
    transition: border-color .3s var(--ease), background-color .3s var(--ease), scale .3s var(--ease);
  }
  .rail__dot span {
    position: absolute;
    right: calc(100% + .75rem);
    top: 50%;
    translate: .5rem -50%;
    white-space: nowrap;
    font-size: .75rem;
    letter-spacing: .03em;
    color: var(--ink);
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .2rem .7rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s var(--ease), translate .28s var(--ease);
  }
  .rail__dot:hover span,
  .rail__dot.is-active span { opacity: 1; translate: 0 -50%; }

  .rail__dot:hover { border-color: var(--c-sakura); scale: 1.25; }
  .rail__dot.is-active {
    background: var(--c-sakura);
    border-color: var(--c-sakura);
    scale: 1.35;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-sakura) 22%, transparent);
  }

  /* башня: тусклый силуэт + подсветка, наливающаяся снизу вверх */
  .tower {
    position: relative;
    display: block;
    width: 3.5rem;
    height: 8.75rem;
    margin-top: .6rem;
  }
  .tower__svg { width: 100%; height: 100%; display: block; }
  .tower > .tower__svg { color: color-mix(in oklab, var(--ink-faint) 55%, transparent); }

  .tower__lit {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0;
    overflow: hidden;
  }
  .tower__lit .tower__svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3.5rem;
    height: 8.75rem;
    color: var(--c-vermilion);
    filter: drop-shadow(0 0 5px color-mix(in oklab, var(--c-gold) 75%, transparent));
  }
  @supports (animation-timeline: scroll()) {
    .tower__lit {
      animation: tower-light linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes tower-light { to { height: 100%; } }

  /* — Маскоты: тайяки, данго, спящий кот, манэки-нэко — */
  .mascot { display: block; flex: none; }
  .mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
  .mascot--taiyaki { width: clamp(3.5rem, 7vw, 5.5rem); animation: bob 4.5s var(--ease) infinite; }
  .mascot--dango   { width: clamp(1.75rem, 3vw, 2.5rem); animation: bob 3.6s var(--ease) infinite .4s; }
  @media (max-width: 47.99rem) { .mascot--taiyaki, .mascot--dango { display: none; } }

  @keyframes bob {
    0%, 100% { translate: 0 0;      rotate: -3deg; }
    50%      { translate: 0 -.4rem; rotate: 3deg; }
  }

  /* шарики данго подпрыгивают по очереди */
  .dango-ball { transform-box: fill-box; transform-origin: 50% 50%; animation: squish 2.4s var(--ease) infinite; }
  .dango-ball:nth-child(2) { animation-delay: .18s; }
  .dango-ball:nth-child(3) { animation-delay: .36s; }
  @keyframes squish {
    0%, 70%, 100% { scale: 1 1; }
    82%           { scale: 1.1 .92; }
  }

  /* спящий кот в подвале */
  .mascot--cat { width: clamp(6rem, 14vw, 9.5rem); margin-top: .5rem; }
  .cat-tail {
    transform-box: fill-box;
    transform-origin: 0% 60%;
    animation: tail 3.8s var(--ease) infinite;
  }
  @keyframes tail {
    0%, 100% { rotate: 0deg; }
    35%      { rotate: -9deg; }
    70%      { rotate: 6deg; }
  }
  .cat-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: ear-twitch 5s var(--ease) infinite; }
  @keyframes ear-twitch {
    0%, 88%, 100% { rotate: 0deg; }
    92%           { rotate: -10deg; }
    96%           { rotate: 6deg; }
  }
  .cat-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: cat-blink 5.5s steps(1, end) infinite; }
  @keyframes cat-blink {
    0%, 90%, 100% { scale: 1 1; }
    93%           { scale: 1 .08; }
    96%           { scale: 1 1; }
    98%           { scale: 1 .08; }
  }

  /* манэки-нэко: зовёт в раздел «Как записаться» */
  .neko {
    position: fixed;
    z-index: 45;
    left: 1.25rem;
    bottom: 1.25rem;
    width: clamp(4.5rem, 8vw, 6.5rem);
    display: block;
    text-decoration: none;
    filter: drop-shadow(0 10px 18px color-mix(in oklab, var(--ink) 30%, transparent));
    transition: translate .35s var(--ease), scale .35s var(--ease);
  }
  .neko svg { display: block; width: 100%; height: auto; }
  .neko:hover { translate: 0 -.35rem; scale: 1.05; }
  @media (max-width: 63.99rem) { .neko { display: none; } }

  /* выходит из-за края, когда хиро прокручен, — чтобы не спорить с кнопкой */
  @supports (animation-timeline: scroll()) {
    .neko {
      animation: neko-in var(--ease) both;
      animation-timeline: scroll(root block);
      animation-range: 2% 10%;
    }
    @keyframes neko-in {
      from { opacity: 0; translate: -3rem .5rem; }
      to   { opacity: 1; translate: 0 0; }
    }
  }

  .neko-paw {
    transform-box: fill-box;
    transform-origin: 80% 100%;
    animation: wave 1.9s var(--ease) infinite;
  }
  @keyframes wave {
    0%, 100% { rotate: -6deg; }
    50%      { rotate: 20deg; }
  }

  .neko-eye { transform-box: fill-box; transform-origin: 50% 100%; animation: blink 6s steps(1, end) infinite; }
  @keyframes blink {
    0%, 92%, 100% { scale: 1 1; }
    94%           { scale: 1 .1; }
  }

  .neko__bubble {
    position: absolute;
    left: 100%;
    bottom: 62%;
    margin-left: .5rem;
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--paper);
    background: var(--c-sakura);
    border-radius: 999px;
    padding: .3rem .85rem;
    opacity: 0;
    translate: -.4rem 0;
    transition: opacity .3s var(--ease), translate .3s var(--ease);
  }
  .neko:hover .neko__bubble,
  .neko:focus-visible .neko__bubble { opacity: 1; translate: 0 0; }

  /* — Хиро — */
  .hero {
    position: relative;
    min-height: min(88svh, 46rem);
    display: grid;
    align-content: center;
    gap: 1.25rem;
    padding: clamp(4rem, 12vh, 8rem) var(--gutter);
    max-width: 74rem;
    margin-inline: auto;
  }

  .hero__kicker {
    font-size: .8125rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-sakura);
    margin: 0;
  }

  .hero__title {
    font-size: clamp(2.75rem, 1.6rem + 5.6vw, 6rem);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.015em;
    margin: 0;
    background: linear-gradient(100deg, var(--ink) 46%, var(--c-fuji) 74%, var(--c-sakura) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__lead {
    max-width: 40ch;
    font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
    color: var(--ink-soft);
  }

  .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }

  .hero__vertical {
    position: absolute;
    bottom: clamp(1.5rem, 6vh, 4rem);
    left: var(--gutter);
    writing-mode: vertical-rl;
    font-family: var(--font-jp);
    font-size: .875rem;
    letter-spacing: .5em;
    color: var(--c-vermilion);
    opacity: .7;
    margin: 0;
  }
  @media (max-width: 47.99rem) { .hero__vertical { display: none; } }

  /* — Кнопки — */
  .btn {
    display: inline-block;
    padding: .8rem 1.7rem;
    font-size: .9375rem;
    letter-spacing: .03em;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background-color .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), translate .3s var(--ease),
                box-shadow .3s var(--ease);
  }
  .btn:hover { translate: 0 -2px; }

  .btn--primary {
    background: var(--accent);
    color: var(--paper);
    box-shadow: 0 10px 26px -18px color-mix(in oklab, var(--accent) 90%, transparent);
  }
  .btn--primary:hover {
    background: color-mix(in oklab, var(--accent) 86%, var(--ink));
    box-shadow: 0 16px 32px -18px color-mix(in oklab, var(--accent) 90%, transparent);
  }

  .btn--ghost { border-color: var(--line); color: var(--ink); background: color-mix(in oklab, var(--paper) 60%, transparent); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

  .btn--lg { padding: 1rem 2.4rem; font-size: 1rem; }

  /* — Заголовок секции — */
  .section__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .section__num {
    font-family: var(--font-display);
    font-size: .875rem;
    letter-spacing: .18em;
    color: var(--accent);
    padding-top: .35rem;
  }
  .section__title {
    font-size: clamp(1.85rem, 1.3rem + 2.1vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
  }
  .section__jp {
    margin-inline-start: auto;
    font-family: var(--font-jp);
    font-size: .8125rem;
    letter-spacing: .28em;
    color: color-mix(in oklab, var(--accent) 72%, var(--ink-faint));
    white-space: nowrap;
  }
  @media (max-width: 35.99rem) { .section__jp { display: none; } }

  .section--accent {
    background: color-mix(in oklab, var(--paper-2) 78%, transparent);
    max-width: none;
    border-block: 1px solid var(--line);
  }
  .section--accent > * { max-width: 74rem; margin-inline: auto; }

  /* — Отбивка с цветком — */
  .divider {
    border: 0;
    height: 1px;
    max-width: 74rem;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
    position: relative;
    overflow: visible;
  }
  .divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 1.5rem;
    height: 1.5rem;
    background: url("ume.svg") no-repeat center / contain;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c-sakura) 45%, transparent));
  }

  /* — Факты — */
  .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .facts li {
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    padding: 1.15rem 1.4rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    transition: background-color .3s var(--ease);
  }
  .facts li:hover { background: color-mix(in oklab, var(--accent) 8%, var(--paper)); }
  .facts__n { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
  .facts__l { font-size: .8125rem; color: var(--ink-faint); text-align: right; }

  /* — Калейдоскоп скриншотов — */
  .kaleidoscope {
    display: flex;
    gap: 1rem;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .shot {
    flex: 0 0 clamp(13rem, 26vw, 19rem);
    aspect-ratio: 4 / 3;
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: grid;
    align-content: end;
    padding: .9rem 1rem;
    color: var(--ink-soft);
    font-size: .8125rem;
    transition: translate .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .shot:hover {
    translate: 0 -6px;
    border-color: var(--accent);
    box-shadow: 0 20px 40px -30px color-mix(in oklab, var(--ink) 80%, transparent);
  }
  .shot[data-tone="a"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-sakura) 26%, var(--paper)), var(--paper-2)); }
  .shot[data-tone="b"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-mizu) 24%, var(--paper)), var(--paper-2)); }
  .shot[data-tone="c"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-gold) 26%, var(--paper)), var(--paper-2)); }
  .shot[data-tone="d"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-matcha) 24%, var(--paper)), var(--paper-2)); }
  .shot[data-tone="e"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-fuji) 24%, var(--paper)), var(--paper-2)); }
  .shot[data-tone="f"] { background: linear-gradient(150deg, color-mix(in oklab, var(--c-vermilion) 22%, var(--paper)), var(--paper-2)); }
  .shot figcaption { opacity: .9; }

  /* — Уровни JLPT — */
  .levels { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 clamp(2rem, 5vw, 3rem); }
  .level {
    padding: .45rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .8125rem;
    letter-spacing: .08em;
    color: var(--ink-soft);
    background: color-mix(in oklab, var(--paper) 70%, transparent);
    transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
  }
  .level:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--paper)); }
  .level--soon { opacity: .45; }

  /* — Карточки — */
  .card {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--paper) 74%, transparent);
    transition: border-color .35s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
  }
  .card:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
    translate: 0 -4px;
    box-shadow: 0 20px 40px -32px color-mix(in oklab, var(--ink) 80%, transparent);
  }
  .card h3 { font-size: 1.35rem; margin-bottom: .6rem; color: var(--accent); }
  .card p { font-size: .9375rem; color: var(--ink-soft); }

  /* — Шаги — */
  .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
  .steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.25rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line);
  }
  .steps li:first-child { border-top: 1px solid var(--line); }
  .steps li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--accent);
    letter-spacing: .1em;
    padding-top: .3rem;
  }
  .steps h3 { font-size: 1.4rem; margin-bottom: .35rem; }
  .steps p { color: var(--ink-soft); font-size: .9375rem; max-width: var(--measure); }
  @media (max-width: 35.99rem) {
    .steps li { grid-template-columns: 2.25rem 1fr; gap: .9rem; }
  }

  /* — Цены — */
  .prices { align-items: stretch; }
  @media (min-width: 56rem) { .prices { grid-template-columns: 1fr 1fr; } }
  .price {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease), translate .35s var(--ease);
  }
  .price:hover {
    border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
    box-shadow: 0 22px 48px -34px color-mix(in oklab, var(--ink) 80%, transparent);
    translate: 0 -4px;
  }
  .price--alt { --accent: var(--c-matcha); background: color-mix(in oklab, var(--c-matcha) 8%, var(--paper)); }
  .price__name {
    font-size: 1.6rem;
    display: flex;
    align-items: baseline;
    gap: .65rem;
  }
  .price__name span {
    font-family: var(--font-jp);
    font-size: .75rem;
    letter-spacing: .2em;
    color: var(--accent);
  }
  .price__value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    line-height: 1;
    color: var(--accent);
    margin: 0;
  }
  .price__value span { font-size: .95rem; color: var(--ink-faint); letter-spacing: .02em; }
  .price__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; flex: 1; }
  .price__list li {
    font-size: .9375rem;
    color: var(--ink-soft);
    padding-inline-start: 1.2rem;
    position: relative;
  }
  .price__list li::before {
    content: "・";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent);
  }
  .price .btn { align-self: start; }

  /* — FAQ — */
  .faq { display: grid; gap: 1rem; align-items: start; }
  .faq__col { display: grid; gap: 1rem; align-content: start; }
  @media (min-width: 56rem) { .faq { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

  .qa {
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
  }
  .qa[open] { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
  .qa:hover,
  .qa[open] { background: color-mix(in oklab, var(--accent) 7%, var(--paper)); }
  .qa summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 3rem 1.25rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    position: relative;
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 1.5rem;
    top: 1.65rem;
    width: .7rem;
    height: .7rem;
    border-inline-end: 1.5px solid var(--accent);
    border-block-end: 1.5px solid var(--accent);
    rotate: 45deg;
    transition: rotate .35s var(--ease);
  }
  .qa[open] summary::after { rotate: -135deg; }
  .qa p {
    margin: 0;
    padding: 0 1.5rem 1.4rem;
    font-size: .9375rem;
    color: var(--ink-soft);
  }
  @supports selector(::details-content) {
    .qa::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: content-visibility .4s allow-discrete, block-size .4s var(--ease), opacity .35s var(--ease);
    }
    .qa[open]::details-content { block-size: auto; opacity: 1; }
  }

  /* — Отзывы (масонри колонками) — */
  .reviews { columns: 1; column-gap: 1.25rem; }
  @media (min-width: 44rem) { .reviews { columns: 2; } }
  @media (min-width: 68rem) { .reviews { columns: 3; } }

  .review {
    break-inside: avoid;
    margin: 0 0 1.25rem;
    padding: 1.5rem 1.4rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    transition: translate .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  }
  .review:nth-child(3n+1) { --accent: var(--c-sakura); }
  .review:nth-child(3n+2) { --accent: var(--c-mizu); }
  .review:nth-child(3n)   { --accent: var(--c-gold); }
  .review:hover {
    translate: 0 -4px;
    border-color: var(--accent);
    box-shadow: 0 20px 40px -32px color-mix(in oklab, var(--ink) 80%, transparent);
  }
  .review blockquote {
    margin: 0 0 .9rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.5;
  }
  .review blockquote::before { content: "「"; color: var(--accent); }
  .review blockquote::after { content: "」"; color: var(--accent); }
  .review figcaption { font-size: .8125rem; letter-spacing: .06em; color: var(--ink-faint); }

  /* — Футер — */
  .site-footer {
    border-top: 1px solid var(--line);
    background: color-mix(in oklab, var(--paper-2) 72%, transparent);
    padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) 2.5rem;
    text-align: center;
    display: grid;
    gap: 1.1rem;
    justify-items: center;
  }
  .footer__jp {
    font-family: var(--font-jp);
    font-size: 1.6rem;
    letter-spacing: .35em;
    color: var(--c-sakura);
    margin: 0;
    padding-inline-start: .35em;
  }
  .footer__line { color: var(--ink-soft); margin: 0; max-width: 34ch; }
  .socials { display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; margin-top: .5rem; }
  .socials a {
    font-size: .875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    padding-bottom: .2rem;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
  }
  .socials a:nth-child(1):hover { color: var(--c-mizu); border-color: var(--c-mizu); }
  .socials a:nth-child(2):hover { color: var(--c-vermilion); border-color: var(--c-vermilion); }
  .socials a:nth-child(3):hover { color: var(--c-fuji); border-color: var(--c-fuji); }
  .footer__note { font-size: .75rem; color: var(--ink-faint); margin: 1.5rem 0 0; }
}

/* ── АНИМАЦИЯ ПОЯВЛЕНИЯ ────────────────────────────────────── */
@layer motion {
  /* Ветка 1: scroll-driven анимации — вообще без JS */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }

  /* Ветка 2: фолбэк через IntersectionObserver (см. main.js) */
  @supports not (animation-timeline: view()) {
    .js .reveal { opacity: 0; translate: 0 1.5rem; transition: opacity .7s var(--ease), translate .7s var(--ease); }
    .js .reveal.is-in { opacity: 1; translate: 0 0; }
  }

  @keyframes rise-in {
    from { opacity: 0; translate: 0 2rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .reveal, .js .reveal { opacity: 1 !important; translate: none !important; }
    .petals { display: none; }
  }
}