/* =========================================================================
   ШКОЛА СОВ — Paper / Clay Owl (v3)
   • Design tokens
   • Фиксы: мобильный drawer (animation перебивала transform), z-index меню
   • Reveal-анимации при загрузке страницы (без IntersectionObserver)
   • Равные высоты: новости = календарь, расписание тянется до «Игр»
   • Компактная шкала для ноутбучных вьюпортов (≤100rem)
   ========================================================================= */

@layer tokens, reset, base, components, layout, sections, motion, utilities, responsive;

/* -------------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* ── Палитра Paper / Clay Owl ── */
    --paper-1: #FAF5EC;         /* основной кремовый */
    --paper-2: #F4ECD8;         /* тёплая бумага */
    --paper-3: #EFE4CA;         /* глубокая бумага для контраста */
    --paper-line: #E4D8B8;      /* линии, разделители */
    --paper-line-soft: #EFE6CE;

    --ink: #2D2318;             /* основной текст, графит */
    --ink-2: #4A3A29;
    --ink-soft: #6B5A45;
    --muted: #9A8B72;

    --terracotta: #C86B4A;      /* акцент 1 */
    --terracotta-deep: #A85336;
    --terracotta-soft: #F0D5C2;
    --terracotta-tint: #FBEAD9;

    --ochre: #E0A458;           /* акцент 2 */
    --ochre-deep: #B47C34;
    --ochre-soft: #F5DFB3;

    --teal: #7FB5A8;            /* акцент 3 — мягкий бирюзовый */
    --teal-deep: #5C9285;
    --teal-soft: #D5EAE3;

    --lavender: #B8A5D9;        /* акцент 4 — лавандовый */
    --lavender-soft: #E4DAF3;

    --moss: #8FA574;
    --gold: #E0A73F;

    --white: #FFFFFF;
    --sheet: #FDFAF2;

    /* ── Design tokens: карточки ── */
    --card-radius: 0.875rem;
    --card-radius-sm: 1.125rem;
    --card-radius-xs: 0.75rem;
    --card-radius-pill: 999px;
    --card-gap: 1.375rem;
    --card-gap-sm: 0.875rem;
    --card-pad: 1.5rem;
    --card-pad-sm: 1.125rem;

    /* ── Тени: soft neumorphic (свет сверху, тёплая тень снизу) ── */
    --shadow-clay-sm:
      0 0.0625rem 0 rgba(255,255,255,0.9) inset,
      0 -0.0625rem 0 rgba(170,120,70,0.05) inset,
      0 0.375rem 1rem -0.375rem rgba(120, 70, 30, 0.14);
    --shadow-clay:
      0 0.0625rem 0 rgba(255,255,255,0.85) inset,
      0 -0.0625rem 0 rgba(170,120,70,0.06) inset,
      0 0.75rem 1.75rem -0.75rem rgba(120, 70, 30, 0.22),
      0 0.125rem 0.375rem -0.1875rem rgba(120, 70, 30, 0.08);
    --shadow-clay-lg:
      0 0.0625rem 0 rgba(255,255,255,0.85) inset,
      0 1.375rem 3rem -1.125rem rgba(120, 70, 30, 0.28),
      0 0.375rem 0.875rem -0.375rem rgba(120, 70, 30, 0.14);
    --shadow-clay-hover:
      0 0.0625rem 0 rgba(255,255,255,0.9) inset,
      0 1.375rem 2.5rem -0.75rem rgba(200, 107, 74, 0.28),
      0 0.5rem 1.125rem -0.5rem rgba(120, 70, 30, 0.18);
    --shadow-inset: inset 0 2px 6px rgba(120,70,30,0.10);

    /* ── Z-index шкала ── */
    --z-base: 1;
    --z-sticky: 100;
    --z-sidebar: 400;
    --z-drawer-backdrop: 800;
    --z-drawer: 900;
    --z-dropdown: 1000;
    --z-modal-backdrop: 1900;
    --z-modal: 2000;
    --z-toast: 3000;
    --z-cursor: 5000;

    /* ── Типографика ── */
    --font-head: 'Fraunces', 'Playfair Display', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Округлый дружелюбный шрифт для заметок-стикеров (как на референсе) */
    --font-round: 'Nunito', 'Manrope', sans-serif;

    --fs-h1: clamp(1.75rem, 3.2vw, 2.5rem);
    --fs-h2: clamp(1.375rem, 2.4vw, 1.75rem);
    --fs-h3: 1.0625rem;
    --fs-body: 0.9062rem;
    --fs-sm: 0.7812rem;
    --fs-xs: 0.6875rem;

    /* ── Прочее ── */
    --sidebar-w: 16.25rem;
    --ease-clay: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .18s;
    --dur: .28s;
    --dur-slow: .55s;

    /* ── Noise / paper texture (SVG data-URL) ── */
    --paper-noise:
      radial-gradient(circle at 20% 15%, rgba(200,107,74,0.05), transparent 55%),
      radial-gradient(circle at 85% 70%, rgba(127,181,168,0.06), transparent 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
}

/* -------------------------------------------------------------------------
   RESET / BASE
------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; margin: 0; padding: 0; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
  input { font: inherit; color: inherit; }
  h1, h2, h3, h4, h5 { margin: 0; }
  p { margin: 0; }
}

@layer base {
  /* ============================================================
     УПРАВЛЕНИЕ МАСШТАБОМ — одно число масштабирует весь интерфейс
     (всё в rem завязано на этот font-size).
     100% = крупно, 87.5% = компактно, 80% = ещё мельче.
     ============================================================ */
  html { font-size: 100%; }

  body {
    background: var(--paper-1) var(--paper-noise);
    background-attachment: fixed;
    background-size: auto, auto, 15rem 15rem;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  body.is-drawer-open { overflow: hidden; }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 60, "WONK" 0;
  }

  ::selection { background: var(--terracotta); color: #fff; }

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

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}

/* -------------------------------------------------------------------------
   COMPONENTS
------------------------------------------------------------------------- */
@layer components {

  /* ── Кнопки ────────────────────────────────────────────────── */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.375rem;
    border-radius: var(--card-radius-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    isolation: isolate;
    transition:
      transform var(--dur) var(--ease-clay),
      box-shadow var(--dur) var(--ease-clay),
      background var(--dur) var(--ease-soft),
      color var(--dur) var(--ease-soft),
      border-color var(--dur) var(--ease-soft);
  }
  .btn::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 45%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-soft);
    pointer-events: none;
    z-index: 1;
  }
  .btn:hover::before { opacity: 1; }
  .btn > * { position: relative; z-index: 2; }
  .btn--block { width: 100%; }
  .btn--sm { padding: 0.5625rem 1rem; font-size: 0.7625rem; }

  .btn--accent {
    background: linear-gradient(180deg, #D07854 0%, var(--terracotta) 45%, var(--terracotta-deep) 100%);
    color: #fff;
    }
  .btn--accent:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0.0625rem 0 rgba(255,255,255,0.4) inset,
      0 -0.125rem 0 rgba(120,50,20,0.20) inset,
      0 1rem 1.875rem -0.5rem rgba(200, 107, 74, 0.65);
  }
  .btn--accent:active { transform: translateY(0) scale(.98); }

  .btn--dark {
    background: linear-gradient(180deg, #3B2C1F 0%, var(--ink) 100%);
    color: #fff;
    box-shadow:
      0 0.0625rem 0 rgba(255,255,255,0.10) inset,
      0 0.5rem 1.25rem -0.375rem rgba(45, 35, 24, 0.35);
  }
  .btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -6px rgba(45,35,24,0.45); }

  .btn--outline {
    background: rgba(255,255,255,0.6);
    border: 1.5px solid var(--paper-line);
    color: var(--ink-soft);
    backdrop-filter: blur(6px);
  }
  .btn--outline:hover {
    border-color: var(--terracotta);
    color: var(--terracotta-deep);
    background: var(--terracotta-tint);
    transform: translateY(-2px);
  }
  .btn--danger { color: #b8532f; border-color: rgba(184,83,47,0.4); }
  .btn--danger:hover {
    border-color: #b8532f; color: #fff; background: #b8532f;
    transform: translateY(-2px);
  }

  .btn--ghost {
    background: rgba(255, 255, 255, .7);
    border: 1.5px solid rgba(255, 255, 255, .9);
    color: var(--ink);
    backdrop-filter: blur(8px);
  }
  .btn--ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-clay-sm); }

  /* Обычный чёткий hover-подъём (без «следования за курсором») */
  .btn--accent:hover,
  .btn--dark:hover { transform: translateY(-2px); }

  /* ── Аватары ────────────────────────────────────────────────── */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.625rem; height: 2.625rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep));
    box-shadow:
      0 0.0625rem 0 rgba(255,255,255,0.35) inset,
      0 -0.125rem 0 rgba(120,50,20,0.20) inset,
      0 0.25rem 0.625rem -0.1875rem rgba(200,107,74,0.35);
  }
  .avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
  .avatar--dark { background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)); }
  .avatar--clay { background: linear-gradient(135deg, #D48A63, var(--terracotta-deep)); }
  .avatar--moss { background: linear-gradient(135deg, #9AAB80, #5F6B49); }
  .avatar--gold { background: linear-gradient(135deg, var(--ochre), var(--ochre-deep)); }
  .avatar--ink  { background: linear-gradient(135deg, #6B5744, var(--ink)); }
  .avatar--teal { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
  .avatar--lav  { background: linear-gradient(135deg, var(--lavender), #8877AA); }

  /* ── Панели (карточки) ─────────────────────────────────────── */
  .panel {
    background: var(--sheet);
    border: 1px solid var(--paper-line-soft);
    border-radius: var(--card-radius);
    padding: var(--card-pad);
    box-shadow: var(--shadow-clay-sm);
    transition: box-shadow var(--dur) var(--ease-clay), transform var(--dur) var(--ease-clay);
  }
  .panel:hover { box-shadow: var(--shadow-clay); }

  .panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.125rem;
  }
  .panel__header h3 { font-size: var(--fs-h3); font-weight: 600; }
  .panel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--terracotta-deep);
    white-space: nowrap;
    transition: gap var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  }
  .panel__link i { font-size: 0.625rem; }
  .panel__link:hover { gap: 0.625rem; color: var(--terracotta); }

  /* Chip / badge */
  .chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.3125rem 0.625rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700;
    background: var(--terracotta-tint); color: var(--terracotta-deep);
  }
  .chip--teal { background: var(--teal-soft); color: var(--teal-deep); }
  .chip--ochre { background: var(--ochre-soft); color: var(--ochre-deep); }

  /* Owl icon (Jinja macro) */
  .owl-icon { width: 2rem; height: 2rem; flex-shrink: 0; }
  img.owl-icon { object-fit: contain; }
}

/* -------------------------------------------------------------------------
   LAYOUT
------------------------------------------------------------------------- */
@layer layout {
  .app-shell { display: flex; align-items: flex-start; min-height: 100vh; position: relative; }
  .main { flex: 1; min-width: 0; padding: 28px 34px 60px; position: relative; }

  /* Фикс равных высот: убран align-items:start — колонки тянутся
     на высоту ряда (stretch по умолчанию), расписание может занять
     остаток левой колонки до блока «Игры и развитие» */
  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: var(--card-gap);
    margin-bottom: var(--card-gap);
  }
  .content-main, .content-aside {
    display: flex; flex-direction: column;
    gap: var(--card-gap); min-width: 0;
    align-self: start;   /* колонка держит свою высоту, не тянется на высоту ряда */
  }
}


/* -------------------------------------------------------------------------
   MOTION
------------------------------------------------------------------------- */
@layer motion {
  /* Фикс: все элементы анимируются один раз при загрузке страницы,
     без scroll-reveal и IntersectionObserver */
  .reveal {
    opacity: 0;
    animation: fadeUp .7s var(--ease-clay) both;
  }

  .reveal[data-stagger] > * {
    opacity: 0;
    animation: fadeUp .55s var(--ease-clay) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }

  @keyframes slideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes pulseBadge {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200,107,74,0.5); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(200,107,74,0); }
  }
  @keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
  }
  @keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.08); }
  }
}

/* -------------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------------- */
@layer responsive {
  /* ── Только структура сетки для средних экранов (1024–1600px) ── */
  @media (max-width: 1600px) {
    .content-grid { grid-template-columns: minmax(0, 1fr) 25rem; }
    .schedule-item { grid-template-columns: 2.75rem 7.25rem 1fr; }
  }

  @media (max-width: 1280px) {
    .content-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; }
    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 1023px) {
    .content-grid { grid-template-columns: 1fr; }
    .row-split { grid-template-columns: 1fr; }
    /* content-main (с баннером) идёт первым — баннер сверху на узком экране */

    /* Логика мобильного бокового меню (выдвижная панель) */
    .sidebar {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform .35s var(--ease-clay);
      box-shadow: var(--shadow-clay-lg);
      z-index: var(--z-drawer);
      border-right: none;
      border-radius: 0 1.5rem 1.5rem 0;
      animation: none;
    }
    .sidebar.is-open { transform: translateX(0); }
    /* Отодвигаем контент сайдбара вниз, чтобы крестик (fixed, слева сверху)
       не перекрывал логотип школы. */
    .sidebar { padding-top: 4.75rem; }
    .mobile-nav-toggle { display: flex; }

    .main { padding: 1.375rem 1.375rem 2.75rem; }
    .topbar { margin: -1.375rem -1.375rem 1.25rem; padding: 0.75rem 1.375rem 0.75rem 4.75rem; }
  }

  @media (max-width: 720px) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .teacher-card { flex-direction: row; align-items: center; }
    .teacher-card__photo { height: 20rem; max-height: 55vh; aspect-ratio: 590 / 755; width: auto; max-width: 45%; align-self: center; transform: rotate(0); flex-shrink: 0; }
    .teacher-card__actions { flex-direction: row; }

    .hero { height: 21rem; }
    .hero__content { padding: 34px 26px; max-width: 100%; }
    .hero__title { font-size: 1.625rem; }
    .hero__dots { left: 1.625rem; }
    /* Фото-сову на телефоне прячем — она перекрывала текст баннера. */
    .hero__owl-photo { display: none; }

    /* Шапка на телефоне: гамбургер слева (fixed), справа — колокольчик и
       профиль; приветствие прячем, чтобы ничего не налезало. */
    .topbar {
      flex-direction: row; align-items: center; justify-content: flex-end;
      gap: 0.5rem; padding: 0.75rem 1.375rem 0.75rem 4.5rem;
    }
    .topbar__greeting { display: none; }
    .topbar__actions { width: auto; flex-wrap: nowrap; }

    /* Панель уведомлений вылезала за левый край — на телефоне делаем её
       на всю ширину под шапкой. */
    .notif-panel {
      position: fixed;
      top: 4rem; right: 0.75rem; left: 0.75rem;
      width: auto; max-width: none;
      max-height: 70vh;
    }

    .schedule-item { grid-template-columns: 2.75rem 1fr; row-gap: 0.375rem; }
    .schedule-item__time { grid-column: 2; order: 2; }
    .schedule-item__body { grid-column: 2; order: 3; }
  }

  @media (max-width: 520px) {
    /* Узкий телефон: карточка учителя в столбик, фото сверху. */
    .teacher-card { flex-direction: column; }
    .teacher-card__photo { order: -1; max-width: 100%; }
  }

  @media (max-width: 480px) {
    .features { grid-template-columns: 1fr 1fr; }
    .topbar__greeting h1 { font-size: 0.9375rem; }
  }
}

/* -------------------------------------------------------------------------
   UTILITIES
------------------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute; width: 0.0625rem; height: 0.0625rem;
    padding: 0; margin: -0.0625rem; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}