/* =========================================================
   HassounCube, scene cube
   One very large cube behind the whole page: dark smoked-glass panels,
   a fine structural grid, thin edges. Scroll position turns it (see
   js/scene-cube.js), so each part of the page shows it from a different
   side. Architecture, not decoration: no glow, no blur, no auto-spin.

   Deliberately unlike the hero cube. That one is small, lit from inside,
   amethyst-edged and spins on its own. This one is huge, dark, lit from
   above, edged in a faint neutral line, and only moves when the page does.
   The shared piece between them is the grid: the hero panel's grid and
   these faces use the same line spacing idea, so the small cube reads as
   sitting inside the large structure.

   Layer order (all fixed, all pointer-events: none, all first in <body>):
     body::before base wash  ->  .scene (this)  ->  .atmosphere  ->  content

   Standalone like atmosphere.css: drop the <link> and the <div class="scene">
   and the page loses the cube with nothing else disturbed.

   Two traps, same as the hero cube:
   - opacity and filter are grouping properties. On .scene-cube (or .scene)
     they would flatten the 3D scene into one quad. Transparency lives on
     the six faces, which are flat leaves and safe to group.
   - No backdrop-filter anywhere here. Six viewport-sized faces blurring
     what is behind them would cost far more than the whole rest of the
     page on an iPhone.
   ========================================================= */

.scene {
  /* Size and centre of the cube relative to the viewport. The centre sits
     right of the reading column so text starts over the quieter side, and
     the cube is larger than the screen so it reads as a structure the page
     lives inside, cropped by the viewport, not an object placed on it. */
  --sc-size: min(88vw, 1100px);
  --sc-x: 76%;
  --sc-y: 54%;
  --sc-alpha: 1;
  --sc-edge: rgba(214, 188, 255, 0.2);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 100vh, not inset: 0. On iOS Safari 100vh is the large viewport and does
     not change while the toolbar collapses, so the cube never jumps as the
     visitor scrolls. inset: 0 would resize with the toolbar. */
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 2200px;
  perspective-origin: 38% 30%;
}
/* Mirror the composition in Arabic so the cube stays on the side opposite
   the start of each line. */
[dir="rtl"] .scene { --sc-x: 24%; perspective-origin: 62% 30%; }

.scene-cube {
  position: absolute;
  left: calc(var(--sc-x) - var(--sc-size) / 2);
  top: calc(var(--sc-y) - var(--sc-size) / 2);
  width: var(--sc-size);
  height: var(--sc-size);
  transform-style: preserve-3d;
  /* Starting pose: --sc-pose, published by js/scene-cube.js in <head>
     before the first paint. The fallback is the resting pose, which must
     equal pose(0) in js/scene-cube.js: it is the whole effect under
     reduced motion. */
  transform: var(--sc-pose, rotateX(-16deg) rotateY(-34deg) rotateZ(4deg));
  will-change: transform;
}

/* One size variable drives face size and push-out distance, so the twelve
   edges always meet as a closed cube (same contract as .cube-face). */
.scene-face {
  position: absolute;
  inset: 0;
  opacity: var(--sc-alpha);
  border: 1px solid var(--sc-edge);
  background:
    /* The structural grid: 8 x 8 panels per face. */
    repeating-linear-gradient(0deg, rgba(203, 160, 255, 0.05) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(90deg, rgba(203, 160, 255, 0.05) 0 1px, transparent 1px 12.5%),
    var(--sf-fill);
  /* A faint inner frame one hair inside the edge: reads as a thick glass
     pane with a bevel rather than a flat plane. */
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.012), inset 0 0 0 7px rgba(214, 188, 255, 0.05);
}
/* Corner registration marks: four short L-brackets set just inside each
   face, the same bracket motif the UI uses on hover (css/dimension.css).
   Drawn as one extra background layer per corner, so no extra elements. */
.scene-face::after {
  content: "";
  position: absolute;
  inset: 4%;
  --tick: rgba(214, 188, 255, 0.22);
  background:
    linear-gradient(var(--tick), var(--tick)) top left / 5% 1px,
    linear-gradient(var(--tick), var(--tick)) top left / 1px 5%,
    linear-gradient(var(--tick), var(--tick)) top right / 5% 1px,
    linear-gradient(var(--tick), var(--tick)) top right / 1px 5%,
    linear-gradient(var(--tick), var(--tick)) bottom left / 5% 1px,
    linear-gradient(var(--tick), var(--tick)) bottom left / 1px 5%,
    linear-gradient(var(--tick), var(--tick)) bottom right / 5% 1px,
    linear-gradient(var(--tick), var(--tick)) bottom right / 1px 5%;
  background-repeat: no-repeat;
}

/* ---------- The core ----------
   A second cube nested inside the first (static markup inside .scene-cube, so
   it exists from the first frame). It turns against the shell, at a different
   rate, so the pair reads as one object with depth inside it: a structure
   you are looking into, not a box you are looking at. Edges only, with a
   whisper of fill, so the shell's faces stay the dominant planes. */
.scene-core {
  --cs: calc(var(--sc-size) * 0.42);
  position: absolute;
  left: calc(50% - var(--cs) / 2);
  top: calc(50% - var(--cs) / 2);
  width: var(--cs);
  height: var(--cs);
  transform-style: preserve-3d;
  transform: var(--sc-core-pose, none);
}
.core-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(214, 188, 255, 0.16);
  background:
    repeating-linear-gradient(0deg, rgba(203, 160, 255, 0.04) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, rgba(203, 160, 255, 0.04) 0 1px, transparent 1px 25%),
    rgba(24, 12, 44, 0.10);
  opacity: var(--sc-alpha);
}
.core-face.cf-front  { transform: translateZ(calc(var(--cs) / 2)); }
.core-face.cf-back   { transform: rotateY(180deg) translateZ(calc(var(--cs) / 2)); }
.core-face.cf-right  { transform: rotateY(90deg) translateZ(calc(var(--cs) / 2)); }
.core-face.cf-left   { transform: rotateY(-90deg) translateZ(calc(var(--cs) / 2)); }
.core-face.cf-top    { transform: rotateX(90deg) translateZ(calc(var(--cs) / 2)); }
.core-face.cf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cs) / 2)); }

/* Surface differentiation: light comes from above and a little to the
   left, so the top is the lightest face, the bottom the darkest, and the
   sides sit between. Enough to read the volume, never enough to shine. */
.scene-face.sf-front  { --sf-fill: linear-gradient(160deg, rgba(62, 34, 108, 0.30), rgba(16, 9, 30, 0.20));
                        transform: translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }
.scene-face.sf-back   { --sf-fill: linear-gradient(160deg, rgba(34, 18, 60, 0.22), rgba(12, 7, 22, 0.18));
                        transform: rotateY(180deg) translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }
.scene-face.sf-right  { --sf-fill: linear-gradient(200deg, rgba(44, 22, 80, 0.26), rgba(10, 6, 20, 0.26));
                        transform: rotateY(90deg) translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }
.scene-face.sf-left   { --sf-fill: linear-gradient(140deg, rgba(52, 28, 92, 0.26), rgba(12, 7, 24, 0.22));
                        transform: rotateY(-90deg) translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }
.scene-face.sf-top    { --sf-fill: linear-gradient(180deg, rgba(96, 58, 156, 0.26), rgba(36, 20, 66, 0.16));
                        transform: rotateX(90deg) translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }
.scene-face.sf-bottom { --sf-fill: linear-gradient(180deg, rgba(10, 6, 20, 0.34), rgba(6, 4, 12, 0.30));
                        transform: rotateX(-90deg) translateZ(calc(var(--sc-size) / 2 + var(--sc-split, 0px))); }

/* Tablet: bigger relative to the screen, pushed further right. */
@media (max-width: 900px) {
  .scene { --sc-size: 118vw; --sc-x: 86%; --sc-y: 58%; perspective: 1500px; }
  [dir="rtl"] .scene { --sc-x: 14%; }
}
/* Phone: the cube becomes the environment rather than an object. Most of it
   is off-screen to the right, so only one or two faces and a few edges pass
   behind the text, and the lines are fainter so they never compete with it. */
@media (max-width: 560px) {
  .scene { --sc-size: 150vw; --sc-x: 98%; --sc-y: 60%; --sc-alpha: 0.8; --sc-edge: rgba(214, 188, 255, 0.15); perspective: 1200px; }
  [dir="rtl"] .scene { --sc-x: 2%; }
  /* Six more phone-sized layers is memory an iPhone needs elsewhere; the
     shell alone carries the structure at this size. */
  .scene-core { display: none; }
}