/* ============================================================
   ASTER HOTEL GROUP — SCENES (Dining, Meetings)
   The shared look of the scene pages: the intro with three arches,
   blocks with one text pattern (eyebrow → heading → description →
   fact), photos passing over a big heading, stacked photos, photo
   pairs and columns. Built for Dining («24 часа Shade», Jun, prototype
   B9, 2026-10-07) and shared with Meetings since 2026-10-09 (was
   dining.css, classes dn-…). Page-only rules live in meetings.css.

   Two layouts live here:
   - the plain one: what a guest without JavaScript, or with reduced
     motion, gets – everything in normal flow, nothing hidden;
   - html.sc-motion: set by a short script in the page's <head>
     (so the first paint is already right) and driven by
     assets/js/scenes.js.
   Photos opening, lines arriving and hairlines drawing are the shared
   motion.js tools (data-plate, data-lines, data-rule).
   ============================================================ */

:root {
  /* The page tone follows the time of day (the rail on the right). */
  --sc-morning: #F4EEE3;   /* Warm Ivory, the --cream token */
  --sc-day:     #F1E8DA;
  --sc-evening: #EBDCC8;
  --sc-night:   #2B1B18;   /* Dark Chocolate, the --ink token */
  --sc-sand:    #E3D5BF;   /* behind a photo while it opens */
  --sc-brass-light: #C9A877;  /* small text on the night background */
  /* The page's side margin: 52px, growing so content stays within 1400px. */
  --sc-gutter: max(52px, calc((100vw - 1400px) / 2 + 52px));
  --sc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The dishes travel off the right edge; nothing may give the page a
   horizontal scrollbar. `clip`, not `hidden`: it does not create a scroll
   container, so position: sticky keeps working inside. */
.scenes-page main {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- Pieces every block uses ---------- */
.sc-fig {
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* 12% taller than its frame: room for the slow drift on scroll. */
.sc-fig img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  display: block;
}

.sc-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin-bottom: 18px;
}

.sc-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 24px;
}

.sc-p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(43, 27, 24, 0.74);
  max-width: 420px;
}

/* One fact per block, in the brand colour. */
.sc-fact {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--oxblood);
}

.sc-nw {
  white-space: nowrap;
}

/* ONE pattern for every block (Jun, 2026-10-07): eyebrow → heading →
   description → fact, always the left column, always at the top, one width;
   the text holds still while the block's photos pass. */
.sc-text {
  max-width: 440px;
}

.sc-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 4fr) 7fr;
  gap: 0 6vw;
  align-items: start;
  padding: 180px 88px 80px var(--sc-gutter);
}

.sc-block > .sc-text {
  position: sticky;
  top: calc(var(--header-h) + 14vh);
}

.sc-block-head {
  position: relative;
  padding: 180px 88px 40px var(--sc-gutter);
}

/* The hairline above each block, 60px over its text. */
.sc-rule {
  position: absolute;
  top: 120px;
  left: var(--sc-gutter);
  right: var(--sc-gutter);
  z-index: 1;
  height: 1px;
  background: rgba(168, 137, 87, 0.4);
}

/* ---------- Intro: «Shade» and three arches — morning, day, night ---------- */
.sc-intro {
  position: relative;
  padding: 0 var(--sc-gutter);
}

.sc-intro-stage {
  position: relative;
}

.sc-intro-top {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Side padding: with motion the intro stage has none, and on a phone the
     lead ran to the screen edges (found 2026-10-08). */
  padding: 30px var(--sc-gutter) 0;
}

/* «Shade» stays Fraunces in both languages: a Latin brand name. */
.sc-title {
  font-family: var(--brand-serif);
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
  margin-top: 6px;
}

.sc-title-big {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  font-size: clamp(3.8rem, 8vw, 8.6rem);
  letter-spacing: -0.02em;
}

.sc-title-small {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.sc-lead {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(43, 27, 24, 0.74);
}

.sc-arches {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 28px;
  align-items: end;
  margin-top: 70px;
}

.sc-arch {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  background: var(--sc-sand);
}

/* Hands, dessert and coffee sit left of centre in a landscape photograph. */
.sc-arch--centre img {
  object-position: 42% 62%;
}

.sc-arch-label,
.sc-intro-shade {
  display: none;
}

.sc-intro-caption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
}

.sc-intro-caption span {
  padding: 0 22px;
}

.sc-intro-caption span + span {
  border-left: 1px solid rgba(168, 137, 87, 0.6);
}

/* With motion: the intro is pinned and the middle arch opens to the screen.
   scenes.js sets each arch's box; the caption appears over the full photo. */
.sc-motion .sc-intro {
  height: 260vh;
  padding: 0;
}

.sc-motion .sc-intro-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.sc-motion .sc-arches {
  display: block;
  margin: 0;
}

.sc-motion .sc-arch {
  position: absolute;
  margin: 0;
}

/* The middle arch is the whole stage, shown through a clip that scenes.js
   opens from the arch's window to the full screen. */
.sc-motion .sc-arch--centre {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 1;
}

.sc-motion .sc-arch--centre img {
  transform-origin: 0 0;
}

.sc-motion .sc-arch-label {
  display: block;
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oxblood);
  white-space: nowrap;
}

.sc-motion .sc-intro-shade {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  /* Measured on the glyph pixels: 0.55 gave the caption only 3.2–3.5:1. */
  background: linear-gradient(to top, rgba(20, 12, 10, 0.82), rgba(20, 12, 10, 0.55) 18%, rgba(20, 12, 10, 0) 45%);
}

.sc-motion .sc-intro-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 3;
  margin: 0;
  opacity: 0;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.sc-motion .sc-intro-caption span + span {
  border-color: rgba(244, 238, 227, 0.6);
}

/* The entrance — an approved exception to the first-screen rule (Jun,
   2026-10-07), like the home page's: the letters of «Shade» rise one by one,
   then «Restaurant» and the lead, then the three arches. About 1.3s. */
.sc-title-big .ch {
  display: inline-block;
  transition: transform 1s var(--sc-ease-out);
  transition-delay: calc(var(--i) * 55ms);
}

.sc-title-small,
.sc-lead {
  transition: opacity 0.8s var(--sc-ease-out) 0.45s, transform 0.8s var(--sc-ease-out) 0.45s;
}

.sc-motion .sc-arch {
  transition: transform 1.2s var(--sc-ease-out), opacity 1s ease;
}

.sc-motion .sc-arch--left { transition-delay: 0.35s; }
.sc-motion .sc-arch--centre     { transition-delay: 0.2s; }
.sc-motion .sc-arch--right   { transition-delay: 0.5s; }

/* After the entrance the script moves the arches every frame: no easing. */
.sc-entered .sc-arch {
  transition: none;
}

/* Until scenes.js has split «Shade» into letters, the word itself is held
   invisible, so it never shows whole and then drops away. */
.sc-entering .sc-title-big {
  color: transparent;
}

.sc-title-big .ch {
  color: var(--ink);
}

.sc-entering .sc-title-big .ch {
  transform: translateY(105%);
}

.sc-entering .sc-title-small,
.sc-entering .sc-lead {
  opacity: 0;
  transform: translateY(14px);
}

.sc-entering .sc-arch {
  transform: translateY(90px);
  opacity: 0;
}

/* ---------- Menu button and «Забронировать стол» ---------- */
.sc-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px 80px;
  align-items: start;
  padding: 90px var(--sc-gutter) 0;
}

.sc-info .page-contacts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0 34px;
}

.sc-info .page-contacts li {
  border-top: 1px solid rgba(168, 137, 87, 0.3);
  padding-top: 14px;
}

/* ---------- The day: the page tone follows the block in view ---------- */
.sc-day {
  background: var(--sc-tone, var(--sc-morning));
  transition: background-color 1.2s ease;
}

.sc-day.is-night {
  --sc-tone: var(--sc-night);
}

.sc-night .sc-h,
.sc-night .sc-p,
.sc-night .sc-fact,
.sc-night .sc-eyebrow {
  transition: color 1.2s ease;
}

.sc-day.is-night .sc-night .sc-h,
.sc-day.is-night .sc-night .sc-p,
.sc-day.is-night .sc-night .sc-fact {
  color: var(--cream);
}

.sc-day.is-night .sc-night .sc-eyebrow {
  color: var(--sc-brass-light);
}

.sc-night .sc-rule {
  background: rgba(201, 168, 119, 0.3);
}

.sc-night [data-plate] {
  background: #4A3530;
}

/* ---------- Утро: two columns of photos pass at different speeds ---------- */
.sc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6vw;
}

.sc-col {
  display: flex;
  flex-direction: column;
  gap: 2.6vw;
}

.sc-col--offset {
  padding-top: 26vh;
}

.sc-col .sc-fig {
  aspect-ratio: 4 / 5;
}

/* ---------- День: the dishes pass sideways over a still heading ---------- */
.sc-pass-stage {
  position: relative;
}

.sc-pass-title {
  padding: 0 var(--sc-gutter);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.95;
  color: var(--oxblood);
}

/* Without motion: a row to swipe or scroll sideways. */
.sc-pass-track {
  display: flex;
  gap: 3vw;
  overflow-x: auto;
  padding: 40px var(--sc-gutter) 60px;
  scrollbar-width: none;
}

.sc-pass-track::-webkit-scrollbar {
  display: none;
}

.sc-pass-track .sc-fig {
  flex: 0 0 auto;
  height: min(68vh, 640px);
  aspect-ratio: 4 / 5;
}

/* With motion: pinned. The heading is alone first, then the dishes come in
   from beyond the right edge (Jun: the heading must be read first). */
.sc-motion .sc-pass-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.sc-motion .sc-pass-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.sc-motion .sc-pass-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: visible;
  align-items: center;
  padding: 0 12vw 0 100vw;
}

.sc-motion .sc-pass-track .sc-fig:nth-child(even) { margin-top: 9vh; }
.sc-motion .sc-pass-track .sc-fig:nth-child(odd)  { margin-bottom: 9vh; }

/* ---------- Терраса: each photo slides up over the one before ---------- */
.sc-stack-section {
  position: relative;
  padding-top: 120px;
}

.sc-stack-stage {
  display: grid;
  grid-template-columns: minmax(300px, 4fr) 7fr;
  gap: 0 6vw;
  align-items: start;
  padding: 60px 88px 80px var(--sc-gutter);
}

/* Without motion: a plain grid of the four photos. */
.sc-stack-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6vw;
}

.sc-card {
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -30px rgba(43, 27, 24, 0.45);
}

.sc-stack-after {
  display: none;
}

.sc-count {
  display: none;
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--oxblood);
  letter-spacing: 0.04em;
}

.sc-count b {
  font-weight: 400;
  font-size: 1.6rem;
}

.sc-motion .sc-count {
  display: block;
}

.sc-motion .sc-stack-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  padding-bottom: 6vh;
}

.sc-motion .sc-stack-cards {
  display: block;
  position: relative;
  height: 100%;
}

.sc-motion .sc-card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  transform-origin: 50% 0;
}

/* ---------- Вечер, Ночь: a big photo and a medium one over its corner ---------- */
.sc-pair {
  position: relative;
  padding-bottom: 14%;
}

.sc-pair-big {
  aspect-ratio: 4 / 5;
  width: 74%;
  max-height: 86vh;
  margin-left: auto;
}

.sc-pair-small {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 44%;
  aspect-ratio: 4 / 5;
}

/* ---------- В номер: a wide photo and a tall one over its corner ---------- */
.sc-wide {
  position: relative;
  padding: 0 24% 8% 0;
}

.sc-wide-big {
  aspect-ratio: 16 / 10;
}

.sc-wide-small {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 30%;
  aspect-ratio: 4 / 5;
}

.sc-end {
  height: 160px;
}

/* ---------- The rail: morning → night ---------- */
.sc-rail {
  display: none;
}

.sc-motion .sc-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  color: var(--ink);
  transition: opacity 0.6s ease, color 0.6s;
}

.sc-rail.is-on {
  opacity: 1;
}

.sc-rail svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.sc-rail svg:last-child path {
  fill: currentColor;
  stroke: none;
}

.sc-rail-track {
  position: relative;
  width: 1px;
  height: 220px;
  background: rgba(43, 27, 24, 0.18);
}

.sc-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transform-origin: top;
  transform: scaleY(var(--sc-progress, 0));
}

.sc-rail-labels {
  position: absolute;
  right: 18px;
  top: 26px;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
}

.sc-rail-labels span {
  opacity: 0.35;
  transition: opacity 0.4s;
}

.sc-rail-labels span.is-on {
  opacity: 1;
  color: var(--oxblood);
}

.sc-rail.is-dark {
  color: var(--cream);
}

.sc-rail.is-dark .sc-rail-track {
  background: rgba(244, 238, 227, 0.25);
}

.sc-rail.is-dark .sc-rail-fill {
  background: var(--sc-brass-light);
}

.sc-rail.is-dark .sc-rail-labels span.is-on {
  color: var(--sc-brass-light);
}

/* ---------- Depth: photos drift in their frames; small ones float faster ----------
   Scroll-driven CSS; a browser without it simply shows the photos still. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sc-block [data-plate] img {
      animation: sc-drift linear both;
      animation-timeline: view();
    }

    .sc-pair-small,
    .sc-col--offset,
    .sc-wide-small {
      animation: sc-float linear both;
      animation-timeline: view();
    }

    @keyframes sc-drift {
      from { translate: 0 4.5%; }
      to   { translate: 0 -4.5%; }
    }

    @keyframes sc-float {
      from { translate: 0 80px; }
      to   { translate: 0 -80px; }
    }
  }
}

/* The photos stop short of the rail rather than run under it. */
@media (min-width: 1101px) {
  .sc-motion .sc-block,
  .sc-motion .sc-stack-stage {
    padding-right: 88px;
  }
}

@media (max-width: 1100px) {
  .sc-motion .sc-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --sc-gutter: 24px;
  }

  .sc-intro-top { padding-top: 40px; }
  .sc-arches { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sc-arch--centre { grid-column: 1 / 3; grid-row: 1; }
  .sc-arch--centre img { object-position: 26% 50%; }
  .sc-intro-caption { flex-direction: column; align-items: center; gap: 4px; font-size: 1.1rem; }
  .sc-intro-caption span + span { border: 0; }
  .sc-motion .sc-intro-caption span + span { border: 0; }

  .sc-info { grid-template-columns: 1fr; padding-top: 60px; }
  .sc-info .page-contacts { grid-template-columns: 1fr; gap: 0; }

  .sc-block,
  .sc-stack-stage { grid-template-columns: 1fr; padding: 120px var(--sc-gutter) 40px; }
  .sc-block > .sc-text { position: static; margin-bottom: 36px; }
  .sc-block-head { padding: 120px var(--sc-gutter) 30px; }
  .sc-rule { top: 70px; }

  .sc-col--offset { padding-top: 14vh; }

  .sc-pass-track { gap: 8vw; }
  .sc-pass-track .sc-fig { height: 50vh; }
  .sc-pass-title { font-size: 13vw; }
  .sc-motion .sc-pass-track { padding: 0 10vw 0 100vw; }
  .sc-motion .sc-pass-track .sc-fig:nth-child(even) { margin-top: 6vh; }
  .sc-motion .sc-pass-track .sc-fig:nth-child(odd)  { margin-bottom: 6vh; }

  .sc-stack-section { padding-top: 70px; }
  .sc-stack-stage { padding-top: 50px; }
  /* On a phone the pinned stage is text above, photos below; the photos take
     whatever height is left (a long text pushed them past the stage, over the
     next section – Meetings, 2026-10-09). A long description is read in the
     stage by screen readers but shown under the stack instead
     (.sc-stack-after, an aria-hidden copy), so the photos keep their size. */
  .sc-motion .sc-stack-stage { display: flex; flex-direction: column; }
  /* align-self: the stage keeps align-items: start from the grid above, and in
     a flex column that shrank this box to width 0 – every card was then centred
     on the left edge of the screen (Jun's iPhone, 2026-10-10; Chrome too).
     Each card is the largest 4:5 that fits the box (container units). */
  .sc-motion .sc-stack-cards { align-self: stretch; height: auto; flex: 1 1 auto; min-height: 0; margin-top: 18px; container-type: size; }
  .sc-motion .sc-card { height: auto; width: min(100cqw, 80cqh); }
  .sc-motion .sc-stack-section:has(.sc-stack-after) .sc-stack .sc-p {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sc-motion .sc-stack-after { display: block; padding: 24px var(--sc-gutter) 0; }
  .sc-count { margin-top: 12px; }

  .sc-pair { margin-top: 44px; padding-bottom: 22%; }
  .sc-pair-big { width: 82%; }
  .sc-pair-small { width: 50%; }

  .sc-wide { padding-right: 18%; }
  .sc-wide-small { width: 38%; }
}