/* YVM-79 digital: a heads-up display in the dark. A luminous grid floor runs to a glowing horizon behind the hero;
   the notes are translucent panels standing in 3D space, turned towards you at different depths, each framed by HUD
   brackets and a scan line; the title carries a faint cyan/magenta split; monospace readouts throughout. */
.vm-t-digital{--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}

/* The world: a horizon glow, a perspective grid floor, a faint star field. */
.vm-t-digital .vm-hero{position:relative;isolation:isolate;padding:clamp(3rem,7vw,5rem) 0 clamp(6rem,14vw,10rem);
  background:radial-gradient(60% 40% at 50% 70%,rgba(53,232,198,.22),transparent 70%),radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 15%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 85% 45%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 40% 10%,rgba(255,255,255,.3),transparent),var(--hero-bg)}
.vm-t-digital .vm-hero::before{content:"";position:absolute;left:-60%;right:-60%;bottom:0;height:55%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(53,232,198,.75) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(53,232,198,.75) 1.5px,transparent 1.5px);background-size:64px 64px;
  transform:perspective(300px) rotateX(70deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 95%);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 95%)}
.vm-t-digital .vm-hero::after{content:"";position:absolute;left:0;right:0;bottom:55%;height:2px;z-index:-1;background:linear-gradient(90deg,transparent,var(--action),transparent);box-shadow:0 0 24px 4px rgba(53,232,198,.45)}

.vm-t-digital .vm-title{text-transform:uppercase;font-size:clamp(2.5rem,8vw,5rem);line-height:.98;text-shadow:-2px 0 rgba(255,60,172,.55),2px 0 rgba(53,232,198,.6)}
.vm-t-digital .vm-eyebrow,.vm-t-digital .vm-board-count,.vm-t-digital .vm-note-date,.vm-t-digital .vm-hero-tag{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
.vm-t-digital .vm-eyebrow{color:var(--action)}
.vm-t-digital .vm-eyebrow::before{content:"◉ ";}
.vm-t-digital .vm-note-date::before{content:"LOG ▸ "}
.vm-t-digital .vm-hero .vm-lede{font-size:1.1875rem;max-width:30rem}

/* The panels: glass in their own colour, turned in 3D at different depths, bracketed, scanned. */
.vm-t-digital .vm-hero-notes{perspective:900px;perspective-origin:30% 40%;max-width:34rem;gap:1.75rem 1.25rem;padding:1rem}
.vm-t-digital .vm-notes{perspective:1400px}
.vm-t-digital .vm-postit,.vm-t-digital .vm-hero-note{position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),color-mix(in srgb,var(--note-c) 14%,rgba(10,15,20,.78));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--note-c) 70%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 28px -6px var(--note-c),inset 0 0 22px -12px var(--note-c)}
.vm-t-digital .vm-postit::before,.vm-t-digital .vm-hero-note::before{content:"";position:absolute;inset:-6px;pointer-events:none;
  background:linear-gradient(var(--note-c),var(--note-c)) 0 0/14px 2px,linear-gradient(var(--note-c),var(--note-c)) 0 0/2px 14px,
  linear-gradient(var(--note-c),var(--note-c)) 100% 100%/14px 2px,linear-gradient(var(--note-c),var(--note-c)) 100% 100%/2px 14px;background-repeat:no-repeat}
.vm-t-digital .vm-hero-note{font-size:1.25rem;line-height:1.3;padding:1.5rem 1.25rem}
.vm-t-digital .vm-hero-note-1{transform:rotateY(24deg) rotateX(4deg) translateZ(10px)}
.vm-t-digital .vm-hero-note-2{margin-top:3.5rem;transform:rotateY(-20deg) translateZ(-40px)}
.vm-t-digital .vm-hero-note-3{width:min(100%,18rem);justify-self:center;transform:rotateX(18deg) rotateY(8deg) translateZ(30px)}
.vm-t-digital .vm-notes .vm-postit:nth-child(3n+1){transform:rotateY(10deg)}
.vm-t-digital .vm-notes .vm-postit:nth-child(3n+2){transform:rotateY(-6deg) translateZ(-20px)}
.vm-t-digital .vm-notes .vm-postit:nth-child(3n){transform:rotateY(-12deg)}
@media (min-width:960px){.vm-t-digital .vm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Cards and strips: HUD brackets, readout rows on the dark ground. */
.vm-t-digital .vm-card,.vm-t-digital .vm-safety{position:relative}
.vm-t-digital .vm-card::before,.vm-t-digital .vm-safety::before{content:"";position:absolute;inset:-7px;pointer-events:none;
  background:linear-gradient(var(--action),var(--action)) 0 0/20px 2px,linear-gradient(var(--action),var(--action)) 0 0/2px 20px,
  linear-gradient(var(--action),var(--action)) 100% 0/20px 2px,linear-gradient(var(--action),var(--action)) 100% 0/2px 20px,
  linear-gradient(var(--action),var(--action)) 0 100%/20px 2px,linear-gradient(var(--action),var(--action)) 0 100%/2px 20px,
  linear-gradient(var(--action),var(--action)) 100% 100%/20px 2px,linear-gradient(var(--action),var(--action)) 100% 100%/2px 20px;background-repeat:no-repeat}
.vm-t-digital .vm-band,.vm-t-digital .vm-how{background:linear-gradient(90deg,rgba(53,232,198,.06),transparent 60%);border-block:1px solid rgba(53,232,198,.35)}
.vm-t-digital .vm-points,.vm-t-digital .vm-steps{counter-reset:vm-pt}
.vm-t-digital .vm-points li{counter-increment:vm-pt;border-color:rgba(53,232,198,.2)}
.vm-t-digital .vm-points li::before{content:counter(vm-pt,decimal-leading-zero) " ▸";display:block;margin-bottom:.35rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;color:var(--action)}
.vm-t-digital .vm-board-head .vm-h2{border-bottom:2px solid var(--action);box-shadow:0 6px 14px -8px var(--action);text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  .vm-t-digital .vm-postit,.vm-t-digital .vm-hero-note{transition:transform .25s ease}
  .vm-t-digital .vm-postit:hover,.vm-t-digital .vm-hero-note:hover{transform:rotateY(0) translateZ(24px)}
}