/* Section ambience — what is left of it.

   This file has been emptied twice now, and both times for the same
   reason. It once carried eight moving washes, one per section; those
   went when the page turned light, because low-alpha colour glowing on
   near-black just makes paper look dirty. What replaced them was a
   single drifting colour field, and that has gone too — the Showroom
   direction's whole argument is that the colour should come from the
   objects and the shadows they cast, not from a wash painted behind
   them. A catalogue photograph has no gradient behind the receiver.

   What survives is texture and two effects, and both of the effects are
   attached to a physical object rather than to the page:

     - static record grooves, printed into the banded sections
     - light travelling across brushed aluminium

   Everything the visitor is meant to look at now sits on a still,
   unpatterned ground. */

/* ===== STATIC GROOVES =====
   Printing, not animation. One per banded section, placed off opposite
   corners so the pair never reads as a repeating pattern. At this
   contrast the old rotation was invisible anyway, and it was repainting
   a 620px layer forever to achieve it. */
.jukebox-section{overflow:hidden;}
.jukebox-section::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:620px;height:620px;right:-270px;top:-250px;border-radius:50%;
  opacity:.45;
  background:repeating-radial-gradient(circle at center,
    transparent 0 11px, var(--fill-2) 11px 12px);
  mask-image:radial-gradient(circle at center,#000 42%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at center,#000 42%,transparent 70%);
}

.rotation-section{overflow:hidden;}
.rotation-section::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:560px;height:560px;left:-240px;bottom:-240px;border-radius:50%;
  opacity:.4;
  background:repeating-radial-gradient(circle at center,
    transparent 0 10px, var(--fill-2) 10px 11px);
  mask-image:radial-gradient(circle at center,#000 40%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at center,#000 40%,transparent 70%);
}

/* ===== THE OUTRO =====
   .outro wraps the whole sign-off so it reads as one panel. It no longer
   paints a colour field to say so — the shared ground and the
   uninterrupted run of paper do that on their own. The markup for the old
   layers is still in index.html and simply paints nothing, so restoring
   any of them is a matter of putting a rule back here. */
.outro{position:relative;z-index:1;overflow:hidden;}
.outro-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.outro-bg > span{position:absolute;display:block;pointer-events:none;}
.ob-groove{
  border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    transparent 0 11px, var(--fill-2) 11px 12px);
  mask-image:radial-gradient(circle at center,#000 38%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 70%);
}
.ob-groove-a{width:720px;height:720px;right:-320px;top:4%;opacity:.45;}
.ob-groove-b,.ob-wash,.ob-shaft{display:none;}


/* ===== SECTION VEILS =====
   Banded sections are a shade of the paper rather than a separate
   colour, so the page reads as one sheet with panels printed on it. */
.liner-section,
.jukebox-section,
.rotation-section{background:var(--band);}
.contact{background:var(--paper-hi);}

/* ===== SECTION ACCENTS =====
   One declaration per section. The eyebrow, the heading's full stop,
   the nav pill and the rail dot all read --sec, so a section's colour
   is changed here and nowhere else. */
.hero             {--sec:var(--ink-gold);}
.liner-section    {--sec:var(--ink-teal);}
.jukebox-section  {--sec:var(--ink-rose);}
.turntable-section{--sec:var(--ink-indigo);}
.rotation-section {--sec:var(--ink-moss);}
.outro            {--sec:var(--ink-gold);}

/* The full stop at the end of a section heading takes the section's
   colour. 04-ambient.js wraps it. Small, and doing real work: it is the
   one mark every heading on the page shares, so colouring it is what
   makes six differently-shaped sections read as chapters. */
.stop{color:var(--sec,var(--brass-ink));}

/* ===== THE TWO EFFECTS WORTH KEEPING =====
   Both are attached to a physical object, which is why they survive:
   light moving across brushed aluminium, and a lamp inside a cabinet. */
.faceplate::before{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-45%;width:26%;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:ambSheen 21s ease-in-out infinite;
}
/* The turntable's sheen is NOT here. .plinth-top can't use overflow:hidden
   — clipping would flatten the 3D scene — so an unclipped pseudo-element on
   it escapes across the whole page. It lives on its own clipping child
   instead; see .plinth-sheen in 10-deck.css. */

/* Sheens travel with transform rather than `left`: animating a layout
   property would force a reflow on every frame. */
@keyframes ambSheen{
  0%{transform:translateX(0) rotate(12deg);}
  55%{transform:translateX(620%) rotate(12deg);}
  100%{transform:translateX(620%) rotate(12deg);}
}

@media (prefers-reduced-motion:reduce){
  .faceplate::before{display:none;}
}

/* =========================================================
   THE AURA FIELD

   Nine soft gradient orbs on one fixed layer behind the whole document.

   No blur filter anywhere: a radial gradient is already soft, and
   blurring nine 60vw layers every frame costs real money on a phone for
   a result nobody can tell apart. The drifts run 70–130s — slow enough
   that you never catch one moving, fast enough that the page is never
   quite the same colour twice.

   Positions are deliberately uneven and the sizes vary by a factor of
   two, so no two screenfuls look like the same wallpaper. Colour comes
   from --orb-1..6 (01-base.css) so dark mode carries them heavier.
   ========================================================= */
/* .aura, NOT .field. The contact form's rows are .field, 05-components.css
   styles them, and this file loads after it — so calling this container
   .field turned all three form rows into fixed, full-viewport,
   pointer-events:none layers stacked on top of each other. That is what
   broke the Line In section. */
.aura{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  contain:layout style paint;
}
.orb{
  position:absolute;display:block;border-radius:50%;
  opacity:0;                       /* 04-ambient.js owns this */
  will-change:transform,opacity;
  transition:opacity .7s linear;
}
.orb-1{width:58vw;height:58vw;min-width:460px;min-height:460px;left:-15vw;top:-14vh;
  background:radial-gradient(closest-side,var(--orb-2),transparent 72%);
  animation:orbA 82s ease-in-out infinite alternate;}
.orb-2{width:44vw;height:44vw;min-width:340px;min-height:340px;right:-10vw;top:4vh;
  background:radial-gradient(closest-side,var(--orb-4),transparent 72%);
  animation:orbB 96s ease-in-out infinite alternate;}
.orb-3{width:52vw;height:52vw;min-width:400px;min-height:400px;left:22vw;top:28vh;
  background:radial-gradient(closest-side,var(--orb-1),transparent 72%);
  animation:orbC 74s ease-in-out infinite alternate;}
.orb-4{width:38vw;height:38vw;min-width:300px;min-height:300px;left:-8vw;bottom:-10vh;
  background:radial-gradient(closest-side,var(--orb-3),transparent 72%);
  animation:orbD 108s ease-in-out infinite alternate;}
.orb-5{width:46vw;height:46vw;min-width:360px;min-height:360px;right:-12vw;bottom:-16vh;
  background:radial-gradient(closest-side,var(--orb-5),transparent 72%);
  animation:orbE 122s ease-in-out infinite alternate;}
.orb-6{width:34vw;height:34vw;min-width:260px;min-height:260px;right:26vw;top:52vh;
  background:radial-gradient(closest-side,var(--orb-6),transparent 72%);
  animation:orbB 88s ease-in-out infinite alternate-reverse;}
.orb-7{width:40vw;height:40vw;min-width:310px;min-height:310px;left:6vw;top:62vh;
  background:radial-gradient(closest-side,var(--orb-4),transparent 72%);
  animation:orbC 116s ease-in-out infinite alternate-reverse;}
.orb-8{width:30vw;height:30vw;min-width:240px;min-height:240px;left:44vw;top:-8vh;
  background:radial-gradient(closest-side,var(--orb-3),transparent 72%);
  animation:orbA 130s ease-in-out infinite alternate-reverse;}
.orb-9{width:36vw;height:36vw;min-width:280px;min-height:280px;right:8vw;bottom:26vh;
  background:radial-gradient(closest-side,var(--orb-1),transparent 72%);
  animation:orbD 92s ease-in-out infinite alternate;}

@keyframes orbA{from{transform:translate3d(0,0,0) scale(1);}   to{transform:translate3d(8vw,6vh,0) scale(1.16);}}
@keyframes orbB{from{transform:translate3d(0,0,0) scale(1.08);} to{transform:translate3d(-7vw,9vh,0) scale(.92);}}
@keyframes orbC{from{transform:translate3d(0,0,0) scale(.96);}  to{transform:translate3d(10vw,-7vh,0) scale(1.14);}}
@keyframes orbD{from{transform:translate3d(0,0,0) scale(1.1);}  to{transform:translate3d(-9vw,-8vh,0) scale(.94);}}
@keyframes orbE{from{transform:translate3d(0,0,0) scale(.94);}  to{transform:translate3d(-6vw,10vh,0) scale(1.18);}}

/* The colour is the point; the drifting is not. Anyone who asked for
   less motion keeps the whole field and loses only the movement. */
@media (prefers-reduced-motion:reduce){
  .orb{animation:none !important;}
}

/* The banded sections are declared once, above. */