/* motion.css — Ф8 01.10.2026: moving background + translucent surfaces (Requirements №83–84; tokens Design!A56:E58;
   plan Design Update Phases & Actions steps 88–98). Separate file: components.css (Files!H36) is near the Excel cell limit — rule Instructions 5.2.
   Markup of the background — partials/bg.njk. Stagger of the reveal — nav.js. Colours only through tokens.css.
   No blur filters over the animation (cost on phones). !important only in reduced-motion. */

/* ---------- 1. moving background: fixed, under all content (z-index -1 in the root stacking context), no clicks ---------- */
.bg-motion {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--bg-motion-opacity);
  contain: strict;
}
.bg-motion__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bg-motion__svg--portrait { display: none; }

.bg-motion__orbit { fill: none; stroke: var(--color-text-muted); stroke-width: 1; stroke-opacity: .35; vector-effect: non-scaling-stroke; }
.bg-motion__trail { fill: none; stroke-width: 1.5; stroke-dasharray: 5 22; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bg-motion__trail--blue { stroke: var(--color-secondary); }
.bg-motion__trail--red { stroke: var(--color-accent); }

/* soft glows: HTML layers, animated only by transform (GPU, no repaint of the page) */
.bg-motion__glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; will-change: transform; }
.bg-motion__glow--blue {
  left: -14vmax; top: 34%;
  background: radial-gradient(closest-side, var(--bg-glow-blue), transparent);
  animation: bg-drift-blue 23s ease-in-out infinite alternate;
}
.bg-motion__glow--red {
  right: -16vmax; top: 2%;
  background: radial-gradient(closest-side, var(--bg-glow-red), transparent);
  animation: bg-drift-red 19s ease-in-out infinite alternate;
}

@keyframes bg-drift-red { to { transform: translate3d(-6vw, 5vh, 0) scale(1.08); } }
@keyframes bg-drift-blue { to { transform: translate3d(5vw, -4vh, 0) scale(.94); } }
@keyframes bg-flow { to { stroke-dashoffset: -216; } } /* 216 = 8 × (5 + 22): seamless loop */

/* dashed trails move only on large landscape screens with a mouse; on phones/tablets they stay still */
@media (orientation: landscape) and (min-width: 1024px) and (hover: hover) {
  .bg-motion__trail { animation: bg-flow 32s linear infinite; }
  .bg-motion__trail--red { animation-duration: 38s; animation-direction: reverse; }
}

/* vertical screen: own drawing (390×844), not a crop of the wide one */
@media (orientation: portrait) {
  .bg-motion { opacity: var(--bg-motion-opacity-portrait); }
  .bg-motion__svg--wide { display: none; }
  .bg-motion__svg--portrait { display: block; }
  .bg-motion__trail { stroke-width: 1.3; stroke-dasharray: 4 18; }
  .bg-motion__glow { width: 80vmax; height: 80vmax; }
  .bg-motion__glow--blue { left: -40vmax; top: 22%; }
  .bg-motion__glow--red { right: -42vmax; top: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-motion__glow, .bg-motion__trail { animation: none !important; }
}
@media print, (forced-colors: active) {
  .bg-motion { display: none; }
}

/* ---------- 2. translucent surfaces: the background shows through a little (alpha .82–.9) ---------- */
.hero, .page-head { background: var(--gradient-hero-a); }
.page-section,
.address-card,
.page--faq .page-intro__text,
.prose blockquote,
.prose--about-school > p,
.site-footer { background: var(--surface-a); }
.page-sub, .page-section__icon { background: var(--surface-2-a); }
.prose--about-school > p:first-child,
.cta-block .container { background: linear-gradient(135deg, var(--surface-a) 0%, var(--cta-tint-a) 100%); }
.final-cta__inner { background: linear-gradient(135deg, var(--bg-a) 0%, var(--cta-tint-a) 100%); }
/* NOT translucent on purpose: header (own .88 + blur), mobile menu panel, consent dialog, video, form fields — readability first. */


/* ---------- 3. Ф11 01.10.2026: vertical 4:5 player (Requirements №90) — overrides 9:16 + cover from components.css ---------- */
.video--vertical { aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
.video--vertical video, .video--vertical img { object-fit: contain; background: var(--color-video-bg); }
@media (orientation: landscape) and (max-height: 500px) {
  .video--vertical { max-width: min(440px, 64svh); } /* 4:5 → height = 80svh, fits a landscape phone */
}

/* ---------- 4. Ф11: landing /<lang>/new-enrollment/ in the style of the home page (Requirements №89) ---------- */
.hero--landing { min-height: auto; }
.hero--landing .hero__media::after { content: none; } /* no gradient over the video controls */
.hero--landing .hero__media .video { margin-block: 0; }
.hero--solo .hero__grid { grid-template-columns: 1fr; }
.landing-sections { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .hero--landing .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 440px); }
  .hero--solo .hero__grid { grid-template-columns: 1fr; }
  .landing-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- 5. Ф12 02.10.2026: layout regressions (Design Update Phases & Actions №114–120) ---------- */
/* logo: larger and centred in the header row and footer (CSS only, same PNG) */
.site-header__logo { align-self: center; align-items: center; }
.site-header__logo img { display: block; height: 56px; max-height: calc(var(--header-h) - 8px); }
.site-footer__brand img { display: block; height: 88px; }
@media (max-width: 359px) { .site-header__logo img { height: 40px; } }
@media (orientation: landscape) and (max-height: 500px) { .site-header__logo img { height: 44px; } }

/* home hero: logo in the right column while the hero photo is a placeholder */
.hero__media--brand { display: flex; align-items: center; justify-content: center; }
.hero__media--brand::after { content: none; }
.hero__brand { width: min(100%, 420px); height: auto; }
@media (max-width: 1023px) { .hero__brand { width: min(60vw, 240px); } }

/* landing: back link on its own line, wider text column */
.hero__back { margin: 0 0 var(--sp-2); }
.hero__back .back-link { margin-bottom: 0; }
.hero--landing .hero__lead { max-width: 64ch; }
@media (min-width: 1024px) {
  .hero--landing .hero__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 400px); }
  .hero--solo .hero__grid { grid-template-columns: 1fr; }
}

/* new section icons (SECTION_ICONS: book, chat) */
.icon--book { -webkit-mask-image: url(/assets/img/icons/icon-book.svg); mask-image: url(/assets/img/icons/icon-book.svg); }
.icon--chat { -webkit-mask-image: url(/assets/img/icons/icon-chat.svg); mask-image: url(/assets/img/icons/icon-chat.svg); }

/* landing «Contacts» section (## ::chat::): links shown as names with social icons */
.page-section--chat .prose ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.page-section--chat .prose li { margin: 0; padding: 0; }
.page-section--chat .prose li::before { content: none; }
.page-section--chat .prose a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.page-section--chat .prose a::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.page-section--chat .prose a[href*="t.me"]::before { -webkit-mask-image: url(/assets/img/icons/social-telegram.svg); mask-image: url(/assets/img/icons/social-telegram.svg); }
.page-section--chat .prose a[href*="instagram.com"]::before { -webkit-mask-image: url(/assets/img/icons/social-instagram.svg); mask-image: url(/assets/img/icons/social-instagram.svg); }
.page-section--chat .prose a[href*="facebook.com"]::before { -webkit-mask-image: url(/assets/img/icons/social-facebook.svg); mask-image: url(/assets/img/icons/social-facebook.svg); }

/* final CTA: contact icon row under the text (partials/social-row.njk) */
.contact-row { margin-top: var(--sp-4); }
.contact-row__text { margin: 0 0 var(--sp-2); color: var(--color-text-muted); }
.contact-row__list { justify-content: center; }
@media (min-width: 768px) { .contact-row__list { justify-content: flex-start; } }


/* ---------- 6. 02.10.2026: home hero with logo (no photo) — centred on desktop ---------- */
/* Before: 1.1fr / 1fr across the 1200–1320px container → heading pushed left, logo far right.
   Now: two compact columns, the pair is centred in the container; text stays left-aligned. */
@media (min-width: 1024px) {
  .hero--brand .hero__grid {
    grid-template-columns: minmax(0, 600px) minmax(0, 380px);
    justify-content: center;
    column-gap: var(--sp-8);
  }
  .hero--brand .hero__lead { max-width: 46ch; }
}

/* ---------- 7. Ф13 02.10.2026: «What we teach» 9:16 on dance-styles (Design Update Phases & Actions №122–124) ---------- */
/* 9:16 file (name contains 9x16): full frame, no crop; height limited by the screen */
.video--vertical.video--9x16 { aspect-ratio: 9 / 16; max-width: min(420px, calc(80svh * 9 / 16)); }
/* video after the ::play:: card (page.njk, videoOut): phones/tablets — under the card, full container width */
.page--dance-styles .page-video--play { margin-top: 0; }
.page--dance-styles .page-video--play .video--vertical { width: 100%; max-width: min(100%, calc(85svh * 9 / 16)); }
@media (max-width: 1023.98px) {
  .page--dance-styles .page-video--play .video--vertical { max-width: 100%; max-height: 90svh; }
}
@media (min-width: 1024px) {
  /* desktop: card with the text in column 1, video in column 2 of the same row */
  .page--dance-styles .page-sections--content .page-section--play { grid-column: 1; }
  .page--dance-styles .page-sections--content .page-video--play { grid-column: 2; align-self: start; }
  .page--dance-styles .page-section--play .page-section__body { display: block; }
  .page--dance-styles .page-video--play .video--vertical { max-width: min(420px, calc(85svh * 9 / 16)); margin-inline: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .page--dance-styles .page-sections--content .page-section--play { grid-column: 1; }
  .page--dance-styles .page-sections--content .page-video--play { grid-column: 2; }
  .page--dance-styles .page-video--play .video--vertical { max-width: calc(85svh * 9 / 16); max-height: none; margin-inline: auto; }
}

/* ---------- 8. Ф13 02.10.2026: *text* (markdown emphasis, <em>) = red accent, no italics (Design Update Phases & Actions №127) ---------- */
/* No extra markup: the standard markdown *…* / _…_ is used as the "red highlight". **bold** stays white 600. */
/* #FF5361 on the dark surfaces ≥ 4.5:1 (AA for body text); colour is not the only signal for important info — keep the meaning in the words. */
em, i { font-style: normal; color: var(--color-accent-hover); }
em strong, strong em { color: var(--color-accent-hover); }
a em, em a { color: inherit; }