/*
  Veyra: the opening frame.
  ==========================================================================

  index.html only, and additive: nothing in here overrides a rule in
  styles.css except the header states at the bottom, which are scoped to
  [data-hero-nav] so login, signup and 404 keep the masthead they have.

  The section is one lit room. Read from the back forward:

      atmosphere   two very low radial pools of deep blue
      arcs         five huge circles, mostly off-screen, 1px strokes
      floor        a black reflective plane with a faint far horizon
      plinth       the ring the mark stands on, plus its contact glow
      motes        canvas specks, drawn by veyra-hero.js
      mark         the V, its halo, and its reflection in the floor
      type         Veyra, the line, the button, the scroll cue

  Every layer behind the mark is aria-hidden and pointer-events: none, so the
  environment is invisible to assistive technology and cannot intercept a
  click.

  The opening sequence is pure CSS: the animations start when the section
  paints and run on their own delays, so the page opens correctly with
  scripting disabled or still loading. JavaScript adds three things only -
  the drifting motes, the pointer parallax, and the transparent masthead
  while the hero is on screen.

  Motion budget: opacity and transform, plus one second of blur during the
  materialise. The whole sequence is skipped under prefers-reduced-motion.
*/

.cinema {
  /* Matches .nav's min-height in styles.css. The section is pulled up under
     the sticky masthead so the frame is the viewport, not the viewport minus
     a header. */
  --nav-h: 80px;

  --cine-void: #03060d;
  --cine-cyan: #5ecbff;
  --cine-line: rgba(126, 206, 255, 0.34);

  position: relative;
  isolation: isolate;
  z-index: 0;
  margin-top: calc(var(--nav-h) * -1);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + var(--space-6)) var(--space-6) var(--space-20);
  background: var(--cine-void);
  color: #fff;
  text-align: center;
}

/* The seam into the navy section below. Without it the near-black hero ends
   on a visible line against --ink. */
.cinema::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================================
   The environment
   ========================================================================== */

.cine-env {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/*
  Atmosphere. Three pools, none above 22% alpha: one behind the mark, one low
  and wide for the floor to catch, one tight and cyan at the centre. Anything
  stronger reads as the gradient blob the brief rules out.
*/
.cine-atmos {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(52% 44% at 50% 40%, rgba(30, 112, 190, 0.22), transparent 70%),
    radial-gradient(80% 50% at 50% 86%, rgba(14, 58, 110, 0.2), transparent 72%),
    radial-gradient(38% 30% at 50% 46%, rgba(94, 203, 255, 0.1), transparent 72%);
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
}

/*
  The arcs. Five circles far larger than the viewport, positioned so only a
  section of each curve crosses the frame. They are drawn at 1px, so they
  read as the edges of a very large room rather than as decoration.
*/
.cine-arcs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  overflow: visible;
  transform: translate3d(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -16px), 0);
}

/* The whole set leans a couple of degrees and back over two and a half
   minutes. At this radius that is about a pixel a second: the room is never
   quite still, and never seen to move. */
.cine-arcs g {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: cine-sway 150s ease-in-out infinite alternate;
}

@keyframes cine-sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

.cine-arcs circle {
  fill: none;
  stroke: var(--cine-line);
  vector-effect: non-scaling-stroke;
}

/* The far horizon: one hairline of light behind everything, brightest at the
   centre, so the arcs have something to sit against. */
.cine-horizon {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 150%;
  height: 1px;
  transform: translate3d(calc(-50% + var(--mx, 0) * -18px), calc(var(--my, 0) * -8px), 0);
  background: linear-gradient(
    to right,
    transparent,
    rgba(94, 203, 255, 0.14) 32%,
    rgba(160, 225, 255, 0.34) 50%,
    rgba(94, 203, 255, 0.14) 68%,
    transparent
  );
}

/*
  The floor. A reflective black plane: the lift comes from a single wide
  radial under the mark, and the grid is hairlines in perspective, masked out
  before they reach any edge. No checkerboard, no glowing mesh.
*/
.cine-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(38, 122, 196, 0.16), transparent 74%),
    linear-gradient(
      to bottom,
      rgba(6, 12, 24, 0) 0%,
      rgba(5, 10, 20, 0.62) 34%,
      rgba(2, 4, 9, 0.96) 100%
    );
}

.cine-floor-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(140, 205, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 205, 255, 0.05) 1px, transparent 1px);
  background-size: 14% 26%;
  background-position: center top;
  transform: perspective(520px) rotateX(64deg) scale(1.9);
  transform-origin: center top;
  -webkit-mask-image: radial-gradient(58% 70% at 50% 0%, #000 8%, transparent 76%);
  mask-image: radial-gradient(58% 70% at 50% 0%, #000 8%, transparent 76%);
  opacity: 0.75;
}

.cine-motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Corners pulled down so nothing competes with the centre. */
.cine-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 62% at 50% 46%, transparent 42%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 22%);
}

/* ==========================================================================
   The stage
   ========================================================================== */

.cine-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(100%, 880px);
  /* The mark, not the block of type, wants the middle of the screen. */
  transform: translateY(-2.5vh);
}

/* ---------------------------------------------------------------- the mark */

.cine-mark {
  position: relative;
  /* The asset's own proportions, so the box is the mark and not a square with
     the mark somewhere inside it. */
  width: clamp(240px, 32vw, 440px);
  aspect-ratio: 660 / 458;
  margin-bottom: clamp(var(--space-12), 7vh, var(--space-20));
  /* A shallow stage: enough for the mark to turn in, not enough to distort. */
  perspective: 1400px;
}

/* The halo is a separate element from the mark, so breathing never touches
   the geometry and the glow can sit behind the reflection. */
.cine-halo {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 190%;
  height: 250%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(70, 170, 255, 0.3), transparent 70%),
    radial-gradient(closest-side, rgba(150, 224, 255, 0.22), transparent 42%);
  pointer-events: none;
}

.cine-tilt,
.cine-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Pointer parallax lives on its own wrapper; the endless float lives on the
   one inside it. Two transforms, two elements, so neither overwrites the
   other. */
.cine-tilt {
  transform: rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -4deg));
}

/*
  The mark and the copy of it that breathes are the same file at the same
  size, stacked. Separating them is what keeps the pulse cheap: the bloom
  below is a filter, and a filter re-renders whenever what it filters
  changes, so nothing under it is ever animated.
*/
.cine-v,
.cine-core {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}

.cine-v {
  /* The bloom the object throws into the room: a tight shadow that keeps the
     edges crisp, a wide one that lights the floor. The render carries its own
     highlights, so this is light around the mark, never on it. */
  filter:
    drop-shadow(0 0 16px rgba(56, 160, 235, 0.4))
    drop-shadow(0 8px 70px rgba(30, 120, 210, 0.4));
}

/*
  Screened back over itself, brighter and a little more saturated. At its
  dimmest it is barely there; at its brightest the ribbon lifts about a stop.
  Only the opacity moves, so this costs one composited layer and no repaint.
*/
.cine-core {
  filter: brightness(1.55) saturate(1.12);
  mix-blend-mode: screen;
  opacity: 0.16;
  pointer-events: none;
  /* Brightening a cutout brightens whatever alpha its ground kept, and the
     ground is a rectangle. Masked to the object, there is nothing at the
     corners left to lift. */
  -webkit-mask-image: radial-gradient(52% 54% at 50% 46%, #000 38%, transparent 76%);
  mask-image: radial-gradient(52% 54% at 50% 46%, #000 38%, transparent 76%);
}

/*
  The reflection: the same geometry through <use>, flipped, squashed, blurred
  and masked so only the few inches nearest the floor survive. Absolute, so
  it never pushes the wordmark down.
*/
.cine-reflect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  /* 85% down the asset is the vertex - where the object meets the floor - so
     that line, and not the foot of the box, is the mirror. */
  transform: scaleY(-0.78);
  transform-origin: 50% 85%;
  opacity: 0.3;
  filter: blur(2.5px);
  /* Local space: brightest at the vertex, gone a third of the way up, so the
     reflection never reaches the wordmark. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 46%, #000 85%);
  mask-image: linear-gradient(to bottom, transparent 46%, #000 85%);
  pointer-events: none;
}

/* --------------------------------------------------------- the plinth ---- */

/*
  Not a disc: a ring, its inner pool of light, and the contact glow where the
  mark meets the floor. Anchored to the mark itself, so it stays under it at
  every viewport width.
*/
.cine-plinth {
  position: absolute;
  left: 50%;
  top: 88%;
  width: 190%;
  aspect-ratio: 3 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cine-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(110, 195, 255, 0.24);
  box-shadow:
    0 0 40px rgba(40, 130, 210, 0.16),
    inset 0 0 60px rgba(40, 130, 210, 0.1);
}

.cine-ring-inner {
  position: absolute;
  inset: 18% 22%;
  border-radius: 50%;
  border: 1px solid rgba(110, 195, 255, 0.1);
}

.cine-ring-glow {
  position: absolute;
  inset: -18% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 150, 230, 0.26), transparent 72%);
}

/* The one place a near-white is allowed: the contact point. */
.cine-contact {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 20%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(190, 236, 255, 0.34), transparent 72%);
}

/* ---------------------------------------------------------------- the type */

.cine-word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.16em;
  /* Tracked type is optically off-centre by half its tracking. */
  text-indent: 0.16em;
  color: #f2f8ff;
}

.cine-tag {
  margin: clamp(var(--space-5), 2.4vh, var(--space-8)) 0 0;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.92vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: rgba(184, 216, 244, 0.72);
}

/* ----------------------------------------------------------------- the CTA */

/*
  A hairline rectangle, not a pill: the room is built out of thin lines and
  the button should read as one of them. The glow is two layers - an inner
  gradient that lifts the face, an outer bloom that puts it in the same light
  as the mark.
*/
.cine-cta {
  --glow: 0.5;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: clamp(var(--space-10), 5vh, var(--space-16));
  padding: 0 clamp(var(--space-6), 2.4vw, var(--space-10));
  min-height: 52px;
  border: 1px solid rgba(126, 206, 255, calc(0.3 + var(--glow) * 0.34));
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.14), rgba(94, 203, 255, 0.04)),
    rgba(6, 18, 34, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(200, 240, 255, 0.18),
    0 0 calc(24px * var(--glow)) rgba(56, 160, 235, 0.3),
    0 14px 40px -18px rgba(40, 140, 220, 0.7);
  color: #eaf6ff;
  font-family: var(--display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cine-cta span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cine-cta:hover,
.cine-cta:focus-visible {
  --glow: 1;
  transform: translateY(-1px);
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.22), rgba(94, 203, 255, 0.07)),
    rgba(8, 24, 44, 0.6);
}

.cine-cta:hover span,
.cine-cta:focus-visible span {
  transform: translateX(4px);
}

/* -------------------------------------------------------------- scroll cue */

.cine-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--space-6), 4vh, var(--space-10));
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgba(150, 185, 215, 0.46);
  transition: color 0.3s ease;
}

.cine-scroll:hover,
.cine-scroll:focus-visible {
  color: rgba(200, 230, 255, 0.8);
}

/* A line that falls, rather than an arrow that bounces. */
.cine-scroll i {
  position: relative;
  display: block;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(126, 206, 255, 0.22), transparent);
}

.cine-scroll i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, rgba(180, 230, 255, 0.9));
  animation: cine-fall 2.6s cubic-bezier(0.5, 0, 0.5, 1) 4.4s infinite;
}

@keyframes cine-fall {
  0% { transform: translateY(-14px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* ==========================================================================
   The opening
   --------------------------------------------------------------------------
   One timeline, written as delays. Nothing here waits on JavaScript.

     0.00  a point of light
     0.45  the point expands
     0.70  the mark materialises out of the blur
     1.10  the room takes the light
     1.60  the plinth activates
     2.10  Veyra
     2.45  the line
     2.80  the button
     3.20  the scroll cue
     2.50  breathing begins, and does not stop
   ========================================================================== */

.cine-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(150, 225, 255, 0.75) 40%, transparent 72%);
  box-shadow: 0 0 22px rgba(150, 225, 255, 0.9);
  animation: cine-spark 1.25s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

@keyframes cine-spark {
  0% { opacity: 0; transform: scale(0.2); }
  22% { opacity: 1; transform: scale(1); }
  36% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(16); }
}

.cine-float {
  animation:
    cine-materialise 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both,
    cine-drift 17s ease-in-out 2s infinite;
}

@keyframes cine-materialise {
  0% { opacity: 0; transform: scale(0.74); filter: blur(16px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* The float and the turn are one animation on one element, so they cannot
   overwrite one another. Seventeen seconds, under three degrees: felt, not
   seen. */
@keyframes cine-drift {
  0%   { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: translate3d(0, -10px, 0) rotateY(2.6deg) rotateZ(0.4deg); }
  50%  { transform: translate3d(0, -3px, 0) rotateY(0deg) rotateZ(0deg); }
  75%  { transform: translate3d(0, -12px, 0) rotateY(-2.6deg) rotateZ(-0.4deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg); }
}

/* Breathing: the halo and the core inside the glass, out of phase by a
   quarter cycle, so the object seems to charge before it shines. */
.cine-halo {
  animation:
    cine-wake 1.4s ease-out 1.1s both,
    cine-breathe 7s ease-in-out 2.5s infinite;
}

@keyframes cine-wake {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cine-breathe {
  0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.cine-core {
  animation: cine-core-breathe 7s ease-in-out 3.7s infinite;
}

@keyframes cine-core-breathe {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.38; }
}

.cine-atmos,
.cine-horizon,
.cine-floor,
.cine-motes {
  animation: cine-lift 1.5s ease-out 1.1s both;
}

.cine-arcs {
  animation: cine-lift 2.2s ease-out 1.25s both;
}

@keyframes cine-lift {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cine-reflect {
  animation: cine-reflect-in 1.6s ease-out 1.8s both;
}

@keyframes cine-reflect-in {
  from { opacity: 0; }
  to { opacity: 0.3; }
}

/* The ring opens from the centre out, which is the only way a ring looks as
   though it switched on rather than faded in. */
.cine-ring,
.cine-ring-inner {
  animation: cine-ring-on 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s both;
}

.cine-ring-inner {
  animation-delay: 1.78s;
}

@keyframes cine-ring-on {
  from { opacity: 0; transform: scaleX(0.3) scaleY(0.6); }
  to { opacity: 1; transform: scaleX(1) scaleY(1); }
}

.cine-ring-glow,
.cine-contact {
  animation: cine-lift 1.8s ease-out 1.9s both;
}

.cine-word {
  animation: cine-word-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.1s both;
}

@keyframes cine-word-in {
  from { opacity: 0; letter-spacing: 0.32em; transform: translateY(10px); }
  to { opacity: 1; letter-spacing: 0.16em; transform: translateY(0); }
}

.cine-tag {
  animation: cine-tag-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.45s both;
}

@keyframes cine-tag-in {
  from { opacity: 0; letter-spacing: 0.62em; }
  to { opacity: 1; letter-spacing: 0.44em; }
}

.cine-cta {
  animation: cine-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 2.8s both;
}

@keyframes cine-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cine-scroll {
  animation: cine-scroll-in 1.2s ease-out 3.2s both;
}

@keyframes cine-scroll-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* The masthead arrives with the type, not before it. */
.site-header[data-hero-nav] {
  animation: cine-lift 1.2s ease-out 2.3s both;
  transition:
    background 0.4s ease,
    border-color 0.4s ease;
}

/* ==========================================================================
   The masthead over the hero
   ========================================================================== */

/*
  While the hero is on screen the bar carries nothing of its own: no fill, no
  rule, no blur. veyra-hero.js removes .is-over-hero the moment the page
  scrolls and the header returns to its styles.css treatment. Without
  scripting it simply stays solid, which is also correct.
*/
.site-header[data-hero-nav].is-over-hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/*
  The masthead action is emerald everywhere else on the site, which is the
  right colour on navy and the wrong one here: over a near-black room lit in
  blue it is the loudest thing on the screen, and the mark is supposed to be.
  While the hero is in view it borrows the hero's own hairline treatment, at
  a smaller weight than the button under the title. It returns to emerald the
  moment the page scrolls.
*/
.site-header[data-hero-nav].is-over-hero .nav-cta.button {
  border-color: rgba(126, 206, 255, 0.34);
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.12), rgba(94, 203, 255, 0.03)),
    rgba(6, 18, 34, 0.4);
  box-shadow: inset 0 1px 0 rgba(200, 240, 255, 0.14);
  color: #eaf6ff;
  font-weight: 500;
}

.site-header[data-hero-nav].is-over-hero .nav-cta.button:hover,
.site-header[data-hero-nav].is-over-hero .nav-cta.button:focus-visible {
  border-color: rgba(126, 206, 255, 0.6);
  background:
    linear-gradient(to bottom, rgba(94, 203, 255, 0.2), rgba(94, 203, 255, 0.06)),
    rgba(8, 24, 44, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(200, 240, 255, 0.2),
    0 0 20px rgba(56, 160, 235, 0.3);
  transform: none;
}

@media (min-width: 901px) {
  /* Brand, links, actions: three tracks, so the navigation is centred by the
     grid instead of by a margin that happens to land near the middle. */
  .site-header[data-hero-nav] .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-8);
  }

  .site-header[data-hero-nav] .site-nav {
    font-size: var(--text-sm);
  }

  .site-header[data-hero-nav] .nav-actions {
    margin-left: 0;
    justify-self: end;
  }

  /* The masthead mark is 40px on a navy bar; over the hero it sits beside a
     330px version of itself, so it steps back. */
  .site-header[data-hero-nav].is-over-hero .brand-mark {
    width: 30px;
    height: 30px;
  }

  .site-header[data-hero-nav].is-over-hero .brand-word {
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
}

/* ==========================================================================
   Narrower screens
   ========================================================================== */

@media (max-width: 900px) {
  .cinema {
    padding-bottom: var(--space-24);
  }

  /* The pools are sized as percentages of the frame, so a narrow one packs
     all three into a single bright wash. Half the strength, spread wider. */
  .cine-atmos {
    background:
      radial-gradient(74% 34% at 50% 40%, rgba(30, 112, 190, 0.16), transparent 72%),
      radial-gradient(110% 38% at 50% 86%, rgba(14, 58, 110, 0.14), transparent 74%);
  }

  .cine-plinth {
    width: 210%;
  }

  .cine-stage {
    transform: none;
  }

  .cine-mark {
    width: clamp(200px, 62vw, 320px);
  }

  /* The room is built for a wide frame; on a phone the arcs and the grid
     crowd the mark, so the atmosphere carries it alone. */
  .cine-arcs,
  .cine-floor-grid {
    display: none;
  }

  .cine-word {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}

@media (max-width: 620px) {
  .cine-cta {
    min-height: 48px;
  }

  .cine-tag {
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}

/* Short, wide windows: the type block would otherwise push the scroll cue off
   the bottom. */
@media (max-height: 760px) and (min-width: 901px) {
  .cine-mark {
    width: clamp(190px, 22vw, 290px);
    margin-bottom: var(--space-10);
  }

  .cine-cta {
    margin-top: var(--space-8);
  }
}

/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   The composition is the point; the sequence is not. Everything lands in its
   final state immediately and nothing loops. veyra-hero.js additionally never
   starts the motes or the parallax.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cinema *,
  .site-header[data-hero-nav] {
    animation: none !important;
    transition: none !important;
  }

  .cine-spark {
    display: none;
  }

  .cine-reflect {
    opacity: 0.3;
  }

  .cine-core {
    opacity: 0.24;
  }

  .cine-tilt {
    transform: none;
  }
}