/* =========================================================================
   ЛОГИКА СЦЕНИЧЕСКОЙ РЕЧИ — дизайн-система
   Т. Н. Запорожец (1974) · интерактивный учебный сайт
   Эстетика: театральная сцена + старинный рукописный текст
   ========================================================================= */

/* ---------- Шрифты (без засечек) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Caveat:wght@500;600;700&display=swap');

/* ---------- Палитра и токены ---------- */
:root{
  --stage:            #15100b;   /* глубокая сцена */
  --stage-2:          #1d160f;
  --stage-3:          #261c13;
  --curtain:          #7c1d22;   /* бордовый занавес */
  --curtain-deep:     #591317;
  --curtain-light:    #a3323a;
  --brass:            #c9a24b;   /* латунь / золото софита */
  --brass-light:      #e6c877;
  --brass-dim:        #8f7434;
  --paper:            #f5ecd9;   /* старая бумага */
  --paper-2:          #efe3cb;
  --paper-edge:       #e2d2ad;
  --ink:              #2a2118;   /* чернила */
  --ink-soft:         #4b3d2c;
  --cream-text:       #ece1cf;   /* текст на тёмном */
  --cream-dim:        #b9a988;
  --cream-faint:      #8a7a5e;
  --accent-blue:      #5b7f8c;   /* холодный акцент (пауза/дыхание) */
  --accent-green:     #6f8f5a;
  --danger:          #b6483d;

  --pause1:  #7aa0ab;  /* ' короткая / люфтпауза */
  --pause2:  #d99a3a;  /* I соединительная */
  --pause3:  #c86b3c;  /* II длинная соединительная */
  --pause4:  #b03b34;  /* III разделительная */

  --rise:    #6f9f6a;  /* повышение голоса */
  --fall:    #b0645a;  /* понижение голоса */

  --font-display: 'Manrope', 'PT Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'PT Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', 'Segoe Script', cursive;
  --font-quote:   'PT Sans', 'Manrope', system-ui, sans-serif;
  --font-mono:    'PT Sans', 'Manrope', system-ui, sans-serif;

  --maxw: 1160px;
  --readw: 720px;
  --radius: 14px;
  --shadow-soft: 0 18px 50px -20px rgba(0,0,0,.65);
  --shadow-paper: 0 22px 60px -24px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.25) inset;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- База ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--cream-text);
  background:var(--stage);
  line-height:1.72;
  font-size:19px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* атмосфера сцены: тёплый софит + виньетка + зерно */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 50% -8%, rgba(201,162,75,.16), transparent 60%),
    radial-gradient(900px 900px at 85% 12%, rgba(124,29,34,.20), transparent 55%),
    radial-gradient(1000px 800px at 8% 90%, rgba(124,29,34,.14), transparent 60%),
    linear-gradient(180deg,#160f09 0%, #15100b 40%, #120d08 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- Типографика ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;color:#f3e7cf}
h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:0}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:2.4em 0 .7em}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:1.8em 0 .5em;color:var(--brass-light)}
h4{font-size:1.15rem;color:var(--brass-light);margin:1.4em 0 .4em;font-weight:600}
p{margin:0 0 1.1em}
a{color:var(--brass-light);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.35);transition:color .2s,border-color .2s}
a:hover{color:#fff;border-color:var(--brass-light)}
strong{color:#fff8ea}
em{color:var(--brass-light)}
::selection{background:var(--curtain);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,42px)}
.read{max-width:var(--readw);margin-left:auto;margin-right:auto}
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:0;text-transform:uppercase;
  color:var(--brass);display:inline-block;margin-bottom:1.1em
}
.lead{font-size:1.22rem;color:var(--cream-text);font-style:italic;font-family:var(--font-quote);line-height:1.6}

/* ================= ЗАНАВЕС / ШАПКА САЙТА ================= */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(18,12,8,.92), rgba(18,12,8,.55));
  border-bottom:1px solid rgba(201,162,75,.18);
}
.topbar .wrap{display:flex;align-items:center;gap:8px 20px;min-height:62px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brandmark{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#f3e7cf;border:0;letter-spacing:0;white-space:nowrap}
.brandmark b{color:var(--brass-light)}
.topnav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.topnav a{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:0;text-transform:uppercase;
  color:var(--cream-dim);border:0;padding:6px 10px;border-radius:8px
}
.topnav a:hover,.topnav a[aria-current="page"]{color:#fff;background:rgba(124,29,34,.35)}
.menu-toggle{display:none}

/* ================= HERO / СЦЕНА ================= */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.curtain{position:absolute;top:0;bottom:0;width:16vw;min-width:120px;z-index:2;pointer-events:none}
.curtain::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--curtain-deep) 0,var(--curtain) 4%,var(--curtain-light) 8%,var(--curtain) 12%,var(--curtain-deep) 16%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.curtain.left{left:0;transform-origin:left;border-right:3px solid var(--brass-dim)}
.curtain.right{right:0;transform-origin:right;border-left:3px solid var(--brass-dim)}
.curtain::after{content:"";position:absolute;top:0;left:0;right:0;height:44px;background:linear-gradient(180deg,#3a0d10,transparent);}
.no-motion .curtain{display:none}

.hero-inner{position:relative;z-index:5;text-align:center;width:100%;padding:80px 0}
.hero h1{margin:.1em 0 .2em;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero .subtitle{font-family:var(--font-quote);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--brass-light)}
.hero .author{font-family:var(--font-mono);letter-spacing:0;text-transform:uppercase;font-size:.8rem;color:var(--cream-dim);margin-top:1.6em}
.spotlight{position:absolute;left:50%;top:-10%;width:60vw;height:80vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at top,rgba(230,200,119,.22),transparent 62%);z-index:1;pointer-events:none}

/* ================= КАРТОЧКИ ГЛАВ ================= */
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:2em 0}
.chapter-card{
  position:relative;display:block;padding:26px 24px 24px;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--stage-3),var(--stage-2));
  border:1px solid rgba(201,162,75,.16);color:var(--cream-text);
  box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s
}
.chapter-card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.5);box-shadow:0 30px 60px -22px rgba(0,0,0,.8)}
.chapter-card .num{font-family:var(--font-display);font-size:3rem;font-weight:800;color:rgba(201,162,75,.28);line-height:1;position:absolute;top:14px;right:18px}
.chapter-card h3{margin:.1em 0 .3em;color:#f3e7cf}
.chapter-card p{color:var(--cream-dim);font-size:.96rem;margin:0}
.chapter-card .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:0;text-transform:uppercase;color:var(--brass)}

/* ================= РАЗДЕЛ / КОНТЕНТ ================= */
.section{padding:34px 0}
.section-head{border-left:4px solid var(--curtain);padding-left:20px;margin:1.6em 0 1.2em}
.section-head .eyebrow{margin-bottom:.4em}
.section-head h2,.section-head h3{margin-top:.15em}

/* Буквица */
.dropcap:first-letter,.dropcap.on:first-letter{
  float:left;font-family:var(--font-display);font-weight:800;font-size:4.6rem;line-height:.78;
  padding:.06em .12em 0 0;color:var(--curtain-light);text-shadow:0 2px 0 rgba(0,0,0,.3)
}

/* ================= ЛИТЕРАТУРНЫЙ ПРИМЕР (бумага) ================= */
.passage{
  position:relative;margin:1.7em 0;padding:30px 34px;border-radius:8px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  color:var(--ink);font-size:1.16rem;line-height:2.05;
  box-shadow:var(--shadow-paper);
  border:1px solid var(--paper-edge);
}
.passage::before{content:"«";position:absolute;top:-6px;left:14px;font-family:var(--font-display);font-size:3.4rem;color:rgba(124,29,34,.22)}
.passage .src{display:block;margin-top:.9em;text-align:right;font-family:var(--font-quote);font-style:italic;font-size:1rem;color:var(--ink-soft)}
.passage.tight{line-height:1.85;font-size:1.08rem}
.passage-note{font-family:var(--font-hand);font-size:1.28rem;color:var(--curtain-light);line-height:1.35}

/* маленькая «сценическая ремарка» на полях */
.margin-note{
  font-family:var(--font-hand);font-size:1.35rem;color:var(--brass-light);
  border-left:2px dashed rgba(201,162,75,.4);padding-left:14px;margin:1.2em 0
}

/* ================= РАЗМЕТКА ПАУЗ ================= */
.pause{font-family:var(--font-mono);font-weight:700;display:inline-block;padding:0 .12em;cursor:help;position:relative;transform:translateY(-.02em)}
.pause.p1{color:var(--pause1)}
.pause.p2{color:var(--pause2)}
.pause.p3{color:var(--pause3)}
.pause.p4{color:var(--pause4)}
.pause:hover{filter:brightness(1.3)}
.pause[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:135%;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--stage-3);color:var(--cream-text);border:1px solid rgba(201,162,75,.3);
  font-family:var(--font-body);font-weight:400;font-size:.8rem;white-space:nowrap;padding:5px 10px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow-soft);z-index:6
}
.pause[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* внутри бумаги паузы темнее */
.passage .pause.p1{color:#3f6d78}
.passage .pause.p2{color:#b57314}
.passage .pause.p3{color:#a2481d}
.passage .pause.p4{color:#8f241d}

/* ================= РАЗМЕТКА УДАРЕНИЙ ================= */
.stress-main{position:relative;font-weight:700;color:inherit;padding:0 .04em}
.stress-main::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--curtain-light),var(--brass));}
.passage .stress-main{color:#5a120f}
.passage .stress-main::after{background:linear-gradient(90deg,#7c1d22,#c9a24b)}
.stress-tact{border-bottom:2px dotted var(--brass);padding-bottom:1px}
.passage .stress-tact{border-color:#a2481d}

/* ================= ЛЕГЕНДА ЗНАКОВ ================= */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.6em 0}
.legend-item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:10px;
  background:rgba(38,28,19,.6);border:1px solid rgba(201,162,75,.15)}
.legend-glyph{font-family:var(--font-mono);font-weight:700;font-size:1.5rem;line-height:1;min-width:34px;text-align:center}
.legend-item .g1{color:var(--pause1)}.legend-item .g2{color:var(--pause2)}
.legend-item .g3{color:var(--pause3)}.legend-item .g4{color:var(--pause4)}
.legend-item b{display:block;color:#f3e7cf;font-family:var(--font-display)}
.legend-item span{font-size:.9rem;color:var(--cream-dim)}

/* ================= ПРАВИЛО / ВРЕЗКА ================= */
.rule{
  position:relative;margin:1.7em 0;padding:22px 26px 22px 30px;border-radius:12px;
  background:linear-gradient(120deg,rgba(124,29,34,.16),rgba(38,28,19,.5));
  border:1px solid rgba(201,162,75,.28);box-shadow:var(--shadow-soft)
}
.rule::before{content:"ПРАВИЛО";position:absolute;top:-11px;left:22px;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:0;background:var(--curtain);color:#fff;padding:3px 10px;border-radius:20px}
.rule.tip::before{content:"ЗАПОМНИ";background:var(--brass-dim)}
.rule.warn::before{content:"ОШИБКА";background:var(--danger)}
.rule h4{margin-top:.2em}
.rule p:last-child{margin-bottom:0}
.rule .n{font-family:var(--font-display);color:var(--brass-light);font-weight:800;margin-right:.3em}

/* цитата мастера */
.master-quote{
  margin:2em 0;padding:24px 28px;border-left:4px solid var(--brass);
  background:rgba(20,14,9,.5);border-radius:0 12px 12px 0;font-family:var(--font-quote);
  font-size:1.32rem;font-style:italic;line-height:1.5;color:#eadfc9
}
.master-quote .who{display:block;margin-top:.6em;font-family:var(--font-mono);font-style:normal;
  font-size:.72rem;letter-spacing:0;text-transform:uppercase;color:var(--brass)}

/* ================= СРАВНЕНИЕ ВЕРНО/НЕВЕРНО ================= */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.6em 0}
.compare .cell{padding:18px 20px;border-radius:10px;background:rgba(38,28,19,.6);border:1px solid rgba(255,255,255,.06)}
.compare .cell.bad{border-color:rgba(182,72,61,.5)}
.compare .cell.good{border-color:rgba(111,159,90,.5)}
.compare .cell .h{font-family:var(--font-mono);font-size:.7rem;letter-spacing:0;text-transform:uppercase;margin-bottom:.6em;display:flex;align-items:center;gap:8px}
.compare .cell.bad .h{color:var(--danger)}
.compare .cell.good .h{color:var(--accent-green)}

/* ================= ИНТОНАЦИОННАЯ КРИВАЯ (SVG) ================= */
.intonation{margin:1.8em 0;padding:20px;border-radius:12px;background:rgba(20,14,9,.55);border:1px solid rgba(201,162,75,.16)}
.intonation svg{width:100%;height:auto;display:block;overflow:visible}
.intonation .cap{font-family:var(--font-mono);font-size:.72rem;letter-spacing:0;color:var(--cream-dim);text-transform:uppercase;margin-bottom:8px}
.io-path{fill:none;stroke:var(--brass-light);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.io-path.drawn{transition:stroke-dashoffset 1.8s var(--ease);stroke-dashoffset:0}
.io-word{font-family:var(--font-body);font-size:15px;fill:var(--cream-text)}
.io-tick{stroke:rgba(201,162,75,.25);stroke-width:1;stroke-dasharray:3 3}
.io-dot{fill:var(--curtain-light)}
.io-note{font-family:var(--font-mono);font-size:11px;fill:var(--cream-dim)}

/* ================= КАРТОЧКИ ЗНАКОВ ПРЕПИНАНИЯ ================= */
.punct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:1.6em 0}
.punct{padding:20px;border-radius:12px;background:linear-gradient(160deg,var(--stage-3),var(--stage-2));
  border:1px solid rgba(201,162,75,.18);position:relative;transition:transform .3s var(--ease),border-color .3s}
.punct:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.45)}
.punct .mark{font-family:var(--font-display);font-size:2.6rem;color:var(--brass-light);line-height:1}
.punct .arrow{font-size:1.5rem;margin-left:.3em}
.arrow.up{color:var(--rise)}.arrow.down{color:var(--fall)}
.punct b{display:block;color:#f3e7cf;margin:.3em 0}
.punct p{font-size:.92rem;color:var(--cream-dim);margin:0}

/* ================= РЕЧЕВЫЕ ТАКТЫ (цветные группы) ================= */
.tacts{margin:1.6em 0;font-size:1.18rem;line-height:2.2}
.tg{padding:.12em .5em;border-radius:6px;margin:0 1px;display:inline-block;position:relative}
.tg-subj{background:rgba(91,127,140,.28);box-shadow:inset 0 0 0 1px rgba(91,127,140,.5)}
.tg-pred{background:rgba(124,29,34,.28);box-shadow:inset 0 0 0 1px rgba(163,50,58,.5)}
.tg-obj{background:rgba(201,162,75,.22);box-shadow:inset 0 0 0 1px rgba(201,162,75,.5)}
.tg-circ{background:rgba(111,143,90,.24);box-shadow:inset 0 0 0 1px rgba(111,143,90,.5)}
.tacts-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:.8em;font-family:var(--font-mono);font-size:.72rem;color:var(--cream-dim)}
.tacts-key i{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}

/* ================= ПЕРИОД (диаграмма) ================= */
.period-fig{margin:2em 0;padding:24px;border-radius:14px;background:rgba(20,14,9,.55);border:1px solid rgba(201,162,75,.18)}
.period-fig svg{width:100%;height:auto;overflow:visible}

/* ================= ИНТЕРАКТИВ: переключатель ударения ================= */
.stress-lab{margin:1.7em 0;padding:22px 24px;border-radius:12px;background:rgba(38,28,19,.55);border:1px solid rgba(201,162,75,.2)}
.stress-lab .sent{font-size:1.35rem;line-height:1.8;margin:.4em 0 .8em}
.stress-lab .word{cursor:pointer;padding:.05em .18em;border-radius:5px;transition:background .2s,color .2s;border-bottom:2px solid transparent}
.stress-lab .word:hover{background:rgba(201,162,75,.18)}
.stress-lab .word.active{background:var(--curtain);color:#fff;border-color:var(--brass)}
.stress-lab .meaning{min-height:2.4em;font-family:var(--font-quote);font-style:italic;font-size:1.12rem;color:var(--brass-light)}
.stress-lab .hint{font-family:var(--font-mono);font-size:.72rem;letter-spacing:0;text-transform:uppercase;color:var(--cream-faint)}

/* ================= ШАГИ / НУМЕРОВАННЫЙ РАЗБОР ================= */
.steps{counter-reset:st;margin:1.6em 0;padding:0;list-style:none}
.steps li{position:relative;padding:12px 0 12px 52px;border-bottom:1px dashed rgba(201,162,75,.15)}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:10px;
  width:34px;height:34px;border-radius:50%;background:var(--curtain);color:#fff;
  font-family:var(--font-display);font-weight:700;display:grid;place-items:center;font-size:1.05rem}
.steps li:last-child{border-bottom:0}

/* ================= КАЛЛАУТ / ПРИМЕЧАНИЕ / СНОСКА ================= */
.callout{margin:1.5em 0;padding:16px 20px;border-radius:10px;background:rgba(91,127,140,.14);border:1px solid rgba(91,127,140,.3);font-size:.98rem}
.callout .l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-blue);display:block;margin-bottom:.3em}
.footnotes{margin-top:3em;padding-top:1.2em;border-top:1px solid rgba(201,162,75,.2);font-size:.9rem;color:var(--cream-dim)}
.footnotes p{margin:.4em 0}
.footnotes sup{color:var(--brass)}

/* ================= НАВИГАЦИЯ СНИЗУ ================= */
.pager{display:flex;justify-content:space-between;gap:16px;margin:4em 0 2em;flex-wrap:wrap}
.pager a{flex:1;min-width:220px;padding:18px 22px;border-radius:12px;background:rgba(38,28,19,.6);
  border:1px solid rgba(201,162,75,.18);color:var(--cream-text);border-bottom:1px solid rgba(201,162,75,.18)}
.pager a:hover{border-color:rgba(201,162,75,.5)}
.pager .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:0;text-transform:uppercase;color:var(--brass)}
.pager .t{font-family:var(--font-display);font-size:1.1rem;color:#f3e7cf;margin-top:.2em}
.pager a.next{text-align:right}

/* ================= ОГЛАВЛЕНИЕ СБОКУ ================= */
.toc{position:sticky;top:80px;font-size:.9rem}
.toc .l{font-family:var(--font-mono);font-size:.66rem;letter-spacing:0;text-transform:uppercase;color:var(--brass);margin-bottom:.8em}
.toc a{display:block;color:var(--cream-dim);border:0;padding:4px 0 4px 12px;border-left:2px solid transparent}
.toc a:hover,.toc a.active{color:#fff;border-color:var(--brass)}
.layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:1024px){.layout.with-toc{grid-template-columns:220px 1fr}}

/* ================= ПОДВАЛ ================= */
.footer{margin-top:5em;padding:40px 0;border-top:1px solid rgba(201,162,75,.16);color:var(--cream-faint);font-size:.9rem}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ================= АНИМАЦИИ ================= */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@keyframes curtainL{from{transform:scaleX(1)}to{transform:scaleX(.14)}}
@keyframes curtainR{from{transform:scaleX(1)}to{transform:scaleX(.14)}}
.hero .curtain.left{animation:curtainL 2s var(--ease) .25s forwards}
.hero .curtain.right{animation:curtainR 2s var(--ease) .25s forwards}
@keyframes floatUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-inner>*{opacity:0;animation:floatUp 1s var(--ease) forwards}
.hero-inner>*:nth-child(1){animation-delay:1.0s}
.hero-inner>*:nth-child(2){animation-delay:1.2s}
.hero-inner>*:nth-child(3){animation-delay:1.4s}
.hero-inner>*:nth-child(4){animation-delay:1.6s}
.hero-inner>*:nth-child(5){animation-delay:1.8s}
@keyframes pulseP{0%,100%{opacity:.55}50%{opacity:1}}
.breath{animation:pulseP 2.4s ease-in-out infinite}

/* ================= УПРАЖНЕНИЕ СО СПОЙЛЕРОМ-РАЗБОРОМ ================= */
.exercise{cursor:pointer}
.exercise .ex-hint{display:inline-block;margin-top:.6em;font-size:.82rem;font-weight:700;color:#8f241d;user-select:none}
.exercise .ex-hint::after{content:" — наведите или нажмите";font-weight:400;color:#9a8a6a}
.exercise:hover .ex-hint::after,.exercise:focus-within .ex-hint::after,.exercise.open .ex-hint::after{content:""}
.razbor{max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .5s var(--ease),opacity .35s ease,margin-top .35s ease}
.exercise:hover .razbor,.exercise:focus-within .razbor,.exercise.open .razbor{max-height:600px;opacity:1;margin-top:.9em}
.razbor{border-top:1px dashed rgba(124,29,34,.35);padding-top:.8em;font-size:1.06rem;line-height:1.95}
.razbor .l{font-size:.66rem;text-transform:uppercase;color:#8f241d;font-weight:700;display:block;margin-bottom:.4em}
.razbor .note{display:block;margin-top:.6em;font-size:.93rem;font-style:italic;color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .io-path{stroke-dashoffset:0}
  .hero-inner>*{opacity:1}
}

/* ================= АДАПТИВ ================= */
@media(max-width:760px){
  body{font-size:17px}
  .compare{grid-template-columns:1fr}
  .topnav{display:none}
  .topnav.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--stage-2);padding:14px;border-bottom:1px solid rgba(201,162,75,.2)}
  .menu-toggle{display:inline-flex;margin-left:auto;background:transparent;border:1px solid rgba(201,162,75,.4);color:var(--brass-light);border-radius:8px;padding:6px 12px;font-family:var(--font-mono);cursor:pointer}
  .passage{padding:22px 20px;font-size:1.06rem}
  /* диаграммы: не ужимаем до нечитаемости — даём горизонтальную прокрутку */
  .intonation,.period-fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .intonation svg{min-width:600px}
  .period-fig svg{min-width:640px}
}