/* ============================================================
   HELIOCASTLE — THE PHONE IN SPACE
   A phone turning over in the top right of the hero, the mark lit on
   its screen. Drawn, not photographed: six faces built from
   gradients, so it takes any accent and works in both themes.

   ------------------------------------------------------------------
   IT IS A SOLID, NOT A SHEET
   Six faces, not two. The front and back alone have no thickness at
   all — turned edge-on they vanish, and the thing reads as a piece of
   paper flipping. The four rims are what make it an object.

   Every face is placed from the centre of the box: sized, pulled back
   by half its own width and height, then rotated to face outwards and
   pushed out along its own z by half the dimension it sits on.

     --w  the width          --t  the thickness
     --h  the height              (front/back sit at --t / 2,
                                   the rims at --w / 2 and --h / 2)

   All six carry backface-visibility: hidden, so you only ever see the
   outward side of each — otherwise the far rims show through the near
   ones and the screen appears mirrored for half of every turn.
   ------------------------------------------------------------------
   IT SPINS ON ITSELF, AND ONLY LEANS OTHERWISE
   One rotation is the movement: it turns on its own long axis, all the
   way round, and that is what you watch. The other two only lean — a
   small nod and a small roll, a dozen degrees either side and back.
   They used to be full turns as well, which read as the thing being
   thrown about rather than spinning.

   Four movements at once, and they cannot share an element: `animation`
   is one shorthand per element. The periods share no useful common
   multiple, so it never quite repeats.

     .space-phone   where it sits, and the perspective
       .sp-orbit    a small drift on the spot, 21s
         .sp-roll   rotateZ, leans +/-11deg, 23s
           .sp-tilt rotateX, leans +/-13deg, 17s
             .sp-body  rotateY, the spin — a full turn every 12s
               .sp-face   the six sides

   The perspective sits on .space-phone, whose centre is the phone's
   own centre, so it is seen square on. That only works because it
   stays put — an element that travelled the width of the hero would
   be viewed from an absurd angle and shear apart, and would need the
   perspective moved up to a hero-sized wrapper instead.

   Every wrapper above .sp-face needs `transform-style: preserve-3d`
   or the 3D collapses at the first one that does not have it.
   ============================================================ */

.space-phone {
  --w: clamp(76px, 9vw, 132px);
  --h: calc(var(--w) * 2.03);
  --t: calc(var(--w) * 0.085);

  position: absolute;
  z-index: 1;                      /* over the shooting stars, under .hero-inner */
  right: clamp(2.5%, 4.6vw, 8.5%);
  top: clamp(120px, 20vh, 210px);
  width: var(--w);
  height: var(--h);
  perspective: 900px;
  pointer-events: none;
  opacity: 0.85;
}

/* the hero grid has to be lifted above both — it is a plain static grid
   otherwise, and they would paint over the headline */
.hero-inner { position: relative; z-index: 2; }

.sp-orbit,
.sp-roll,
.sp-tilt,
.sp-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.sp-orbit { animation: sp-drift 21s ease-in-out infinite; }
.sp-roll  { animation: sp-roll  23s ease-in-out infinite; }
.sp-tilt  { animation: sp-tilt  17s ease-in-out infinite; }
.sp-body  { animation: sp-spin  12s linear infinite; }

/* a small float on the spot — it hangs there rather than travelling */
@keyframes sp-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  27%      { transform: translate3d(-9%, 7%, -45px); }
  52%      { transform: translate3d(4%, 13%, 25px); }
  78%      { transform: translate3d(10%, 3%, -20px); }
}

/* the spin: the one that carries the movement */
@keyframes sp-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* the lean: enough to keep it from looking bolted to an axle, not
   enough to read as being thrown around */
@keyframes sp-tilt {
  0%, 100% { transform: rotateX(13deg); }
  50%      { transform: rotateX(-13deg); }
}
@keyframes sp-roll {
  0%, 100% { transform: rotateZ(-11deg); }
  50%      { transform: rotateZ(11deg); }
}

/* ------------------------------------------------------------------
   THE SIX FACES
   ------------------------------------------------------------------ */

.sp-face {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  overflow: hidden;
}

/* --- front and back: the full panel --- */
.sp-front,
.sp-back {
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  border-radius: 11% / 5.4%;
  box-shadow:
    inset 0 0 0 1px rgb(var(--ink-rgb) / 0.2),
    0 0 34px rgb(var(--accent-rgb) / 0.14);
}

.sp-front {
  padding: 6%;
  transform: translateZ(calc(var(--t) / 2));
  background: linear-gradient(152deg, #5f646c 0%, #23262c 20%, #0d0f12 58%, #08090b 100%);
}

.sp-back {
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  background:
    radial-gradient(70% 40% at 30% 16%, rgb(var(--ink-rgb) / 0.09), transparent 60%),
    linear-gradient(200deg, #3d4149 0%, #181a1e 34%, #0b0c0f 100%);
}

/* the glass catches the light as it turns */
.sp-front::after,
.sp-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg,
    rgb(var(--ink-rgb) / 0.13) 0 16%,
    transparent 42%,
    transparent 72%,
    rgb(var(--ink-rgb) / 0.06) 96%);
  pointer-events: none;
}

/* --- the rim: this is the thickness --- */
.sp-edge {
  border-radius: calc(var(--t) / 2);
  /* a metal rim, lit along one side */
  background: linear-gradient(90deg, #14161a 0%, #6e737c 38%, #3a3e45 62%, #101216 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.1);
}

/* the two long sides */
.sp-edge-l,
.sp-edge-r {
  width: var(--t);
  height: var(--h);
  margin-left: calc(var(--t) / -2);
  margin-top: calc(var(--h) / -2);
}
.sp-edge-r { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2)); }
.sp-edge-l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }

/* the buttons, on the long side only */
.sp-edge-r::before,
.sp-edge-r::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.3);
}
.sp-edge-r::before { top: 21%; height: 5%; }
.sp-edge-r::after  { top: 29%; height: 9%; }

/* the two short ends */
.sp-edge-t,
.sp-edge-b {
  width: var(--w);
  height: var(--t);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--t) / -2);
  background: linear-gradient(0deg, #14161a 0%, #6e737c 38%, #3a3e45 62%, #101216 100%);
}
.sp-edge-t { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2)); }
.sp-edge-b { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* ------------------------------------------------------------------
   THE SCREEN
   ------------------------------------------------------------------ */

.sp-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8% / 4%;
  overflow: hidden;
  background:
    radial-gradient(62% 44% at 50% 46%, #17120b 0%, #07080a 74%),
    #06070a;
}

.sp-notch {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 26%;
  height: 1.6%;
  min-height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.3);
}

.sp-mark {
  width: 64%;
  height: auto;
  filter:
    drop-shadow(0 0 10px rgb(var(--emit-rgb) / calc(0.55 * var(--emit-a))))
    drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.45));
}

/* the pool of light the mark throws on its own screen */
.sp-screen::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 16%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgb(var(--emit-rgb) / calc(0.34 * var(--emit-a))), transparent 72%);
  filter: blur(3px);
}

/* ------------------------------------------------------------------
   THE BACK OF IT
   ------------------------------------------------------------------ */

.sp-lens {
  position: absolute;
  top: 5%;
  left: 8%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 26%;
  background: linear-gradient(150deg, rgb(var(--ink-rgb) / 0.13), rgb(0 0 0 / 0.5));
  box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.12);
}
.sp-lens::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 18%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 38% 34%,
    rgb(var(--accent-light-rgb) / 0.4) 0%, #0a0b0d 62%);
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.14);
}

.sp-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}

/* ------------------------------------------------------------------
   SMALL SCREENS
   The hero stacks into one column and the monument moves up into the
   space this was using, so it goes smaller and tucks under the header.
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .space-phone {
    --w: clamp(54px, 15vw, 74px);
    right: 4%;
    top: 96px;
    opacity: 0.65;
  }
}