/* Robô + painel holográfico do Arenvix na seção #servicos (js/robot-holo.js). Ver docs/ROBO-HOLOGRAMA.md. */

/* ----- encaixe na seção ---------------------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* O conjunto ocupa o lugar do título; o final esmaecido do robô desce por baixo do topo do palco dos quadros. */
.rh{position:relative;width:min(780px,100%);margin:-8px auto calc(min(780px,100vw) * -.16);z-index:3}
/* Fundo da cor da seção + lighten: o preto gravado nos quadros (≈ rgb 4,4,9) vira a superfície da seção, e só os
   pixels mais escuros que ela mudam; o robô fica intacto. O fundo precisa estar no mesmo grupo (.rh isola). */
.rh__stage{position:relative;aspect-ratio:1764/1176;width:100%;background:var(--rh-bg,var(--arara-surface))}
.rh__stage>img,.rh__stage>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 64%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 64%,transparent);
  mask-composite:intersect}
.rh__stage>img,.rh__stage>canvas{mix-blend-mode:lighten}
.rh__stage>canvas{pointer-events:none;opacity:0}
/* Os quadros têm fundo escuro gravado; no tema claro o conjunto ganha uma janela escura própria. */
:root[data-theme="light"] .rh{padding:10px 0 0;border-radius:var(--arara-radius-xl);--rh-bg:#000;background:#000;box-shadow:var(--arara-shadow);margin-bottom:24px;overflow:hidden}
@media(prefers-color-scheme:light){:root[data-theme="auto"] .rh{padding:10px 0 0;border-radius:var(--arara-radius-xl);--rh-bg:#000;background:#000;box-shadow:var(--arara-shadow);margin-bottom:24px;overflow:hidden}}
@media(max-width:900px){.rh{margin-bottom:calc(min(780px,100vw) * -.03)}}
/* Celular: o robô vai de ponta a ponta, um pouco maior que a tela e cortado só à direita (o painel, à esquerda,
   fica a ~16 px da borda); só topo e base esmaecem. */
@media(max-width:640px){
  .rh{width:calc(100% + 2*var(--arara-gutter));margin-inline:calc(-1*var(--arara-gutter));margin-bottom:-2vw;overflow:hidden}
  .rh__stage{width:112%;margin-left:-6px}
  .rh__stage>img,.rh__stage>canvas{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 64%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 64%,transparent)}
  :root[data-theme="light"] .rh{border-radius:0;margin-bottom:16px}
}

/* ----- painel (convertido de arenvix-landing/components/sections/PalmHologram.module.css) ----------------------- */
/*
 * Holographic panel projected from the hero robot's palm (PalmHologram.tsx).
 *
 * Geometry comes from lib/palmHologram.ts as custom properties set once on the
 * root; everything is sized in container units of the robot stage, so the
 * panel keeps its place on the hand at any size.
 *
 * Performance rules for this file:
 * - No per-frame custom properties. Inherited variables that change force a
 *   style recalc of the whole panel; the cursor and palm follow instead write
 *   `translate` / `transform` / `opacity` / `scale` inline on the elements
 *   that move (see PalmHologram.tsx).
 * - Everything that moves is its own compositor layer (`will-change`), so
 *   moving it never repaints the filters, gradients and text around it.
 * - The wake-up choreography is opacity transitions keyed off `data-wake`.
 * - Keyframes use constant values only, so they run on the compositor.
 */

.ph-root {
  /* Palette measured from the reference hologram frame. */
  --h-deep: 17 15 38;
  --h-surface: 34 27 71;
  --h-violet: 90 63 162;
  --h-line: 135 101 205;
  --h-hi: 192 166 236;
  --h-hot: 242 221 255;
  --h-blue: 132 146 255;
  --h-ink: 238 240 255;
  --h-white: 255 255 255;

  /* Signature easing and the wake-up timeline (enter / leave). */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wake-in: 320ms;
  --wake-out: 620ms;

  position: absolute;
  inset: 0;
  container: palm / size;
  pointer-events: none;
  user-select: none;
  text-align: left;
}

/*
 * Wake groups. Leaving (the base rule) runs in reverse order — phrase first,
 * light last — and entering (data-wake) runs light → grid → nodes → phrase.
 */
.ph-spill,
.ph-cone,
.ph-bloom,
.ph-surface-glow,
.ph-reflections,
.ph-spot,
.ph-frame-light {
  transition: opacity var(--wake-out) var(--ease) 120ms;
}
.ph-grid-base,
.ph-grid-light {
  transition: opacity var(--wake-out) var(--ease) 80ms;
}
.ph-link,
.ph-ring-box,
.ph-node-halo {
  transition: opacity var(--wake-out) var(--ease) 40ms;
}
.ph-ghost {
  transition: opacity var(--wake-out) var(--ease);
}
.ph-root[data-wake] :is(.ph-spill, .ph-cone, .ph-bloom, .ph-surface-glow, .ph-reflections, .ph-spot, .ph-frame-light) {
  transition: opacity var(--wake-in) var(--ease);
}
.ph-root[data-wake="awake"] :is(.ph-grid-base, .ph-grid-light) {
  transition: opacity var(--wake-in) var(--ease) 150ms;
}
.ph-root[data-wake="awake"] :is(.ph-link, .ph-ring-box, .ph-node-halo) {
  transition: opacity 400ms var(--ease) 200ms;
}
.ph-root[data-wake="awake"] .ph-ghost {
  transition: opacity 400ms var(--ease) 300ms;
}

/* Zero-size point that sits on the palm; JS moves it with the hand. */
.ph-anchor {
  --pw: var(--wide-w);
  --pdx: var(--wide-dx);
  --pdy: var(--wide-dy);
  --apex: var(--wide-apex);
  --apex-shift: var(--wide-apex-shift);

  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  translate: calc(var(--palm-x) * 100cqw) calc(var(--palm-y) * 100cqh);
  will-change: transform;
}

/* Mirrors COMPACT_STAGE_MAX_PX in lib/palmHologram.ts. */
@container palm (max-width: 599.98px) {
  .ph-anchor {
    --pw: var(--compact-w);
    --pdx: var(--compact-dx);
    --pdy: var(--compact-dy);
    --apex: var(--compact-apex);
    --apex-shift: var(--compact-apex-shift);
  }
}

/* ----- projection: palm → panel ------------------------------------------ */

.ph-beam {
  --rise: calc(var(--pdy) * -100cqh);

  position: absolute;
  bottom: 0;
  left: calc(var(--pdx) * 100cqw - var(--pw) * 40cqw);
  width: calc(var(--pw) * 80cqw);
  height: calc(var(--rise) + 1cqh);
}

@keyframes ph-breathe {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* Light the panel throws back onto the hand and fingers. */
.ph-spill {
  position: absolute;
  left: var(--apex);
  bottom: calc(var(--pw) * 4cqw);
  width: calc(var(--pw) * 75cqw);
  height: calc(var(--pw) * 42cqw);
  translate: -50% 50%;
  opacity: 0.6;
}

.ph-root[data-wake="near"] .ph-spill {
  opacity: 0.75;
}
.ph-root[data-wake="awake"] .ph-spill {
  opacity: 1;
}

.ph-spill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side,
    rgb(var(--h-line) / 0.2),
    rgb(var(--h-violet) / 0.09) 50%,
    transparent
  );
  animation: ph-breathe 5.6s ease-in-out infinite alternate;
}

/*
 * Fan of translucent light, narrow at the palm, open under the panel. Shape
 * (clip), softening (blur) and breathing (opacity) sit on separate boxes so
 * the blur is rasterised once and the breathing stays a compositor animation.
 */
.ph-cone {
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.ph-root[data-wake="near"] .ph-cone {
  opacity: 0.8;
}
.ph-root[data-wake="awake"] .ph-cone {
  opacity: 1;
}

.ph-cone-breath {
  position: absolute;
  inset: 0;
  animation: ph-breathe 4.2s ease-in-out -1s infinite alternate;
}

.ph-cone-soft {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--pw) * 1.6cqw));
}

.ph-cone-shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    8% 0,
    92% 0,
    calc(var(--apex) + 3%) 100%,
    calc(var(--apex) - 3%) 100%
  );
  background:
    radial-gradient(
      30% 70% at var(--apex) 100%,
      rgb(var(--h-hot) / 0.34),
      transparent
    ),
    linear-gradient(
      to top,
      rgb(var(--h-line) / 0.32),
      rgb(var(--h-violet) / 0.13) 45%,
      rgb(var(--h-violet) / 0.07) 80%,
      rgb(var(--h-line) / 0.2)
    );
}

/* Three faint rays tracing the edges and the axis of the fan. */
.ph-ray {
  position: absolute;
  bottom: 0;
  left: var(--apex);
  width: 1px;
  height: 100%;
  transform-origin: 50% 100%;
  transform: skewX(calc(var(--ray) * 1deg));
  background: linear-gradient(
    to top,
    rgb(var(--h-hot) / 0.5),
    rgb(var(--h-line) / 0.22) 40%,
    transparent 92%
  );
  opacity: 0.55;
}

/*
 * Energy travelling up the fan. Each particle rides a path from the palm to
 * its point under the panel: the path is skewed toward that point, and the
 * run inside it moves up by its own height — a constant keyframe.
 */
.ph-streak-path {
  --drift: calc((var(--spread) * 0.42 + var(--apex-shift)) * var(--pw) * 80cqw);

  position: absolute;
  bottom: 0;
  left: var(--apex);
  width: 0;
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(atan2(calc(-1 * var(--drift)), var(--rise)));
}

.ph-run {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ph-rise ease-out infinite;
}

@keyframes ph-rise {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.45;
  }
  100% {
    translate: 0 -100%;
    opacity: 0;
  }
}

.ph-streak {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: calc(var(--len) * 100%);
  background: linear-gradient(
    to top,
    transparent,
    rgb(var(--h-hot) / 0.85) 55%,
    transparent
  );
}

.ph-beam-mote {
  position: absolute;
  bottom: 0;
  left: 0;
  translate: -50% 50%;
  border-radius: 50%;
  background: rgb(var(--h-hot));
  box-shadow: 0 0 5px 1px rgb(var(--h-line) / 0.9);
}

/* Source glow resting on the palm. */
.ph-source {
  position: absolute;
  left: var(--apex);
  bottom: 0;
  width: calc(var(--pw) * 36cqw);
  aspect-ratio: 2 / 1;
  translate: -50% 50%;
}

.ph-source::before,
.ph-source::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.ph-source::before {
  inset: 0;
  background: radial-gradient(
    closest-side,
    rgb(var(--h-hot) / 0.7),
    rgb(var(--h-line) / 0.38) 24%,
    rgb(var(--h-violet) / 0.14) 55%,
    transparent
  );
  animation: ph-breathe 3.4s ease-in-out infinite alternate;
}

.ph-source::after {
  left: 50%;
  top: 50%;
  width: 14%;
  height: 18%;
  translate: -50% -50%;
  background: radial-gradient(
    closest-side,
    rgb(var(--h-white) / 0.95),
    rgb(var(--h-hi) / 0.6) 55%,
    transparent
  );
}

/* ----- panel ---------------------------------------------------------------- */

/* JS offsets it by how far the panel trails the hand. */
.ph-slot {
  position: absolute;
  container-type: inline-size;
  left: calc(var(--pdx) * 100cqw - var(--pw) * 50cqw);
  bottom: calc(var(--pdy) * -100cqh);
  width: calc(var(--pw) * 100cqw);
  aspect-ratio: 1.75;
  will-change: transform;
}

/* Levitation: three incommensurate cycles so it never visibly repeats. */
.ph-float {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation:
    ph-float-y 6.4s ease-in-out infinite alternate,
    ph-float-r 8.3s ease-in-out -2.1s infinite alternate,
    ph-float-s 5.2s ease-in-out -1.3s infinite alternate;
}

@keyframes ph-float-y {
  from {
    translate: 0 1.6px;
  }
  to {
    translate: 0 -2px;
  }
}

@keyframes ph-float-r {
  from {
    rotate: -0.15deg;
  }
  to {
    rotate: 0.15deg;
  }
}

@keyframes ph-float-s {
  from {
    scale: 0.998;
  }
  to {
    scale: 1.002;
  }
}

/*
 * Resting perspective: rising from the palm (top leaning away) and turned a
 * little toward the robot. The cursor adds a few degrees around the bottom
 * edge (written inline by JS), so the base never leaves the projection.
 */
.ph-tilt {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: perspective(260cqi) rotateX(5deg) rotateY(7deg);
  will-change: transform;
}

.ph-bloom {
  position: absolute;
  inset: -24% -14%;
  opacity: 0.6;
}

.ph-root[data-wake="near"] .ph-bloom {
  opacity: 0.75;
}
.ph-root[data-wake="awake"] .ph-bloom {
  opacity: 1;
}

.ph-bloom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side,
    rgb(var(--h-violet) / 0.3),
    rgb(var(--h-violet) / 0.1) 55%,
    transparent
  );
  animation: ph-breathe 5.6s ease-in-out infinite alternate;
}

/*
 * Rounded-rect clip, not a chamfered clip-path: the frame on top draws the
 * chamfer, and a polygon clip over layers that move every frame makes the
 * browser rebuild its mask each frame (measured: ~2× the main-thread cost).
 * A 5.5cqi radius stays inside the 4cqi chamfer along the diagonal.
 */
.ph-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5.5cqi;
}

/* Parallax: JS translates each layer by its data-depth (px per unit of cursor). */
.ph-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* 1 · surface */
.ph-surface {
  inset: -10px;
  background:
    radial-gradient(
      70% 55% at 50% 108%,
      rgb(var(--h-line) / 0.24),
      transparent 70%
    ),
    radial-gradient(60% 70% at 0% 0%, rgb(var(--h-hi) / 0.06), transparent 60%),
    linear-gradient(
      180deg,
      rgb(var(--h-deep) / 0.62),
      rgb(var(--h-surface) / 0.5) 70%,
      rgb(var(--h-surface) / 0.62)
    );
}

/* Extra light rising from the projection while awake. */
.ph-surface-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 55% at 50% 108%,
    rgb(var(--h-line) / 0.16),
    transparent 70%
  );
  opacity: 0;
}

.ph-root[data-wake="awake"] .ph-surface-glow {
  opacity: 1;
}

/* 2 · grid (the layer overhangs the glass by GRID_OVERHANG on every side) */
.ph-grid {
  inset: -10px;
}

.ph-grid-lines {
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 5.6cqi 5.6cqi;
  background-position: center;
}

.ph-grid-base {
  position: absolute;
  inset: 0;
  color: rgb(var(--h-line) / 0.5);
  opacity: 0.16;
  mask-image: radial-gradient(75% 95% at 74% 50%, #000 12%, transparent 72%);
}

.ph-root[data-wake="awake"] .ph-grid-base {
  opacity: 0.3;
}

/*
 * Soft window of lit grid following the cursor. JS moves the window with the
 * cursor and its content the opposite way, so the lines stay aligned with the
 * base grid: two compositor transforms, no repaint.
 */
.ph-grid-light {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--grid-light-r) * 2);
  height: calc(var(--grid-light-r) * 2);
  margin: calc(var(--grid-light-r) * -1) 0 0 calc(var(--grid-light-r) * -1);
  overflow: hidden;
  mask-image: radial-gradient(closest-side, #000, transparent);
  opacity: 0;
  will-change: transform;
}

.ph-root[data-wake="awake"] .ph-grid-light {
  opacity: 1;
}

.ph-grid-light-inner {
  position: absolute;
  top: var(--grid-light-r);
  left: var(--grid-light-r);
  width: calc(100cqi + 20px);
  height: calc(100cqi / 1.75 + 20px);
  color: rgb(var(--h-hi) / 0.55);
  will-change: transform;
}

.ph-reflections {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(var(--h-hi));
  opacity: 0.1;
}

.ph-root[data-wake="awake"] .ph-reflections {
  opacity: 0.2;
}

.ph-reflections path {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.ph-reflections path:nth-child(2) {
  opacity: 0.45;
}

/* 3 · network */
.ph-link,
.ph-link-hidden {
  position: absolute;
  height: 1px;
  margin-top: -0.5px;
  overflow: hidden;
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--h-line) / 0.6) 18%,
    rgb(var(--h-line) / 0.6) 82%,
    transparent
  );
}

.ph-link {
  opacity: 0.45;
}

.ph-root[data-wake="awake"] .ph-link {
  opacity: 0.75;
}

/* Only appears around the cursor; JS drives its opacity. */
.ph-link-hidden {
  opacity: 0;
}

.ph-link-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--h-hot)) 50%,
    transparent
  );
  opacity: 0;
}

.ph-link-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 62%,
    rgb(var(--h-blue) / 0.6) 88%,
    rgb(var(--h-white)) 98%,
    transparent
  );
  translate: -100% 0;
  opacity: 0;
  animation: ph-pulse-run ease-in-out infinite;
}

@keyframes ph-pulse-run {
  0% {
    translate: -100% 0;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  32% {
    translate: 100% 0;
    opacity: 1;
  }
  33%,
  100% {
    translate: 100% 0;
    opacity: 0;
  }
}

.ph-ring-box {
  position: absolute;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0.55;
}

.ph-root[data-wake="awake"] .ph-ring-box {
  opacity: 1;
}

.ph-ring-box svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgb(var(--h-hi) / 0.55);
}

.ph-ring-box circle {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.ph-ring-spin {
  animation: ph-spin 26s linear infinite;
}

.ph-ring-spin circle {
  stroke-dasharray: 3 4;
}

@keyframes ph-spin {
  to {
    rotate: 1turn;
  }
}

.ph-node {
  --core: calc(var(--size) * 1.05cqi);
  --halo: calc(var(--size) * 5.4cqi);

  position: absolute;
  width: 0;
  height: 0;
}

.ph-node-halo,
.ph-node-glow,
.ph-node-core {
  position: absolute;
  border-radius: 50%;
}

.ph-node-halo,
.ph-node-glow {
  left: calc(var(--halo) / -2);
  top: calc(var(--halo) / -2);
  width: var(--halo);
  height: var(--halo);
  background: radial-gradient(
    closest-side,
    rgb(var(--h-line) / 0.5),
    transparent
  );
  scale: 0.75;
}

.ph-node-halo {
  opacity: 0.2;
}

.ph-root[data-wake="awake"] .ph-node-halo {
  opacity: 0.35;
}

/* Proximity glow; JS drives opacity and scale. */
.ph-node-glow {
  opacity: 0;
}

.ph-node-core {
  left: calc(var(--core) / -2);
  top: calc(var(--core) / -2);
  width: var(--core);
  height: var(--core);
  background: rgb(var(--h-hot));
  box-shadow: 0 0 calc(var(--core) * 1.5) rgb(var(--h-line) / 0.95);
  animation: ph-node-pulse 3.8s ease-in-out infinite;
}

@keyframes ph-node-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* motes drifting up through the glass */
.ph-mote {
  position: absolute;
  border-radius: 50%;
  background: rgb(var(--h-hot));
  box-shadow: 0 0 4px rgb(var(--h-line));
  opacity: 0;
  animation: ph-drift linear infinite;
}

/* Glass motes are 1–2px, so a px distance reads the same at every panel size. */
@keyframes ph-drift {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    translate: 4px -72px;
    opacity: 0;
  }
}

/* abstract signal meter, closest to the viewer */
.ph-meter {
  position: absolute;
  right: 9.5%;
  bottom: 13%;
  display: flex;
  align-items: flex-end;
  gap: 0.55cqi;
}

.ph-meter span {
  width: 0.65cqi;
  height: calc(1cqi + var(--i) * 0.5cqi);
  background: rgb(var(--h-hi));
  opacity: 0.2;
  transition: opacity var(--wake-out) var(--ease);
}

.ph-root[data-wake="awake"] .ph-meter span {
  opacity: 0.9;
  transition: opacity 260ms var(--ease) calc(220ms + var(--i) * 70ms);
}

/* 4 · phrase */
.ph-copy {
  display: grid;
  align-content: center;
  padding: 0 0 2% 8.5%;
}

.ph-phrase {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.ph-kicker {
  display: flex;
  align-items: center;
  gap: 1.8cqi;
  margin-bottom: 2.2cqi;
  font-family: var(--arara-font-body);
  font-size: clamp(9.5px, 3.5cqi, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--h-hot));
}

.ph-kicker::before {
  content: "";
  flex: none;
  width: 4.2cqi;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--h-hi)));
}

/*
 * Same serif as the page headlines, so the panel speaks the site's voice.
 * Three short lines at a large size: the panel is perspective-resampled by the
 * compositor, and big, firm strokes survive that where thin ones go soft. The
 * halo is kept tight for the same reason (a wide one reads as blur).
 */
.ph-lead {
  display: block;
  font-family: var(--arara-font-display);
  font-size: clamp(15px, 8.4cqi, 34px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  color: rgb(var(--h-white));
  text-shadow:
    0 0 0.04em rgb(var(--h-white) / 0.22),
    0 0 0.32em rgb(var(--h-line) / 0.38);
}

.ph-accent {
  font-style: italic;
  font-weight: 500;
  /* Italic overhang: without it background-clip: text trims the last glyph. */
  padding-right: 0.08em;
  background: linear-gradient(100deg, rgb(var(--h-hot)), rgb(var(--h-hi)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 0.14em rgb(var(--h-line) / 0.55));
}

/* Violet echo on a deeper layer: the phrase gains depth as it separates. */
.ph-ghost {
  opacity: 0;
}

.ph-root[data-wake="awake"] .ph-ghost {
  opacity: 0.3;
}

.ph-ghost .ph-kicker,
.ph-ghost .ph-lead,
.ph-ghost .ph-accent {
  color: rgb(var(--h-violet));
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  filter: none;
}

.ph-ghost .ph-kicker::before {
  background: rgb(var(--h-violet));
}

/* 5 · reflection following the cursor: an elongated glint, not a spotlight */
.ph-spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 92cqi;
  height: 52cqi;
  margin: -26cqi 0 0 -46cqi;
  rotate: -18deg;
  background: radial-gradient(
    closest-side,
    rgb(var(--h-hot) / 0.12),
    rgb(var(--h-line) / 0.06) 50%,
    transparent
  );
  opacity: 0;
  will-change: transform;
}

.ph-root[data-wake="awake"] .ph-spot {
  opacity: 1;
}

.ph-scan {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 26%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(var(--h-line) / 0.05) 65%,
    rgb(var(--h-hot) / 0.26) 97%,
    transparent
  );
  translate: 0 -100%;
  opacity: 0;
  animation: ph-scan 9.5s cubic-bezier(0.4, 0, 0.2, 1) 3s infinite;
}

@keyframes ph-scan {
  0% {
    translate: 0 -100%;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  19% {
    translate: 0 400%;
    opacity: 0.9;
  }
  20%,
  100% {
    translate: 0 400%;
    opacity: 0;
  }
}

/* ----- frame (after the reference hologram) --------------------------------- */

/* Own layer: its drop-shadow filters are rasterised once. */
.ph-frame {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.ph-frame-art,
.ph-frame-art-hot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.ph-frame-art path,
.ph-frame-art-hot path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

.ph-frame-art {
  filter: drop-shadow(0 0 1.5px rgb(var(--h-line)))
    drop-shadow(0 0 6px rgb(var(--h-violet) / 0.85));
}

.ph-outline {
  stroke: rgb(var(--h-line) / 0.55);
  stroke-width: 1px;
}

.ph-bracket {
  stroke: rgb(var(--h-hot));
  stroke-width: 1.6px;
}

.ph-trace {
  stroke: rgb(var(--h-hi) / 0.5);
  stroke-width: 0.8px;
}

.ph-dash {
  stroke: rgb(var(--h-white));
  stroke-width: 2px;
}

.ph-ticks {
  fill: rgb(var(--h-hot) / 0.85);
}

/* Border brightening where the cursor is: same window technique as the grid. */
.ph-frame-light {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--frame-light-r) * 2);
  height: calc(var(--frame-light-r) * 2);
  margin: calc(var(--frame-light-r) * -1) 0 0 calc(var(--frame-light-r) * -1);
  mask-image: radial-gradient(closest-side, #000, transparent);
  opacity: 0;
  will-change: transform;
}

.ph-root[data-wake="awake"] .ph-frame-light {
  opacity: 1;
}

.ph-frame-light-inner {
  position: absolute;
  top: var(--frame-light-r);
  left: var(--frame-light-r);
  width: 100cqi;
  height: calc(100cqi / 1.75);
  will-change: transform;
}

.ph-frame-art-hot .ph-outline {
  stroke: rgb(var(--h-hot) / 0.9);
  stroke-width: 1.2px;
}

.ph-frame-art-hot .ph-bracket {
  stroke: rgb(var(--h-white));
  stroke-width: 2.2px;
}

/* ----- small panels (phones) ------------------------------------------------ */

@container (max-width: 299.98px) {
  .ph-bracket {
    stroke-width: 1.2px;
  }

  .ph-frame-art-hot .ph-bracket {
    stroke-width: 1.6px;
  }

  .ph-dash {
    stroke-width: 1.5px;
  }

  .ph-mote:nth-child(n + 5),
  .ph-ring-spin {
    display: none;
  }
}

/* ----- state ------------------------------------------------------------------ */

/* Scrolled away: stop every loop. */
.ph-root[data-paused] *,
.ph-root[data-paused] *::before,
.ph-root[data-paused] *::after {
  animation-play-state: paused !important;
}

/* Reduced motion: the final, readable composition with no movement. */
.ph-root[data-static] *,
.ph-root[data-static] *::before,
.ph-root[data-static] *::after {
  animation: none !important;
}

.ph-root[data-static] .ph-run,
.ph-root[data-static] .ph-mote,
.ph-root[data-static] .ph-link-pulse,
.ph-root[data-static] .ph-scan {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ph-root *,
  .ph-root *::before,
  .ph-root *::after {
    animation: none !important;
  }

  .ph-run,
  .ph-mote,
  .ph-link-pulse,
  .ph-scan {
    display: none;
  }
}

/* Sora não tem itálico: o destaque mantém o degradê sem itálico sintético. */
.ph-accent{font-style:normal;font-weight:600}