/* =========================================================
   DEVVDUO — WORK section (work-section.css)
   Scroll pattern studied from wodniack.dev (credit: Antoine Wodniack);
   all code and styling written for Devvduo.

   One tall section with a sticky full-screen stage:
     world    3D layer (perspective). Greige ground, a wall of extruded
              W / O / R / K letters in 4 rows, the vertical WORK title,
              and the project tiles that fly toward the viewer.
     overlay  SVG in the site's cream with a 12-column grid and a pill
              shaped HOLE cut out of it. The world shows through the
              hole. Scrolling zooms the overlay up around the pill until
              the hole is larger than the screen ("the dive").
     hud      small mono labels + scroll cue.

   Sizes and positions are computed in work-section.js (letters are
   measured in the loaded font so nothing is clipped).

   Colours come from the site palette (style.css :root):
     cream overlay  var(--bg)       #F2EFE9
     world ground   greige          #C5C2B8  (header tone)
     letters        var(--ink)      #0C0C0C, extrusion in deep greige
     tiles          var(--surface)  #FFFFFF with var(--border)
     accent         var(--accent)   #FF4A00 (serial numbers only)
========================================================= */
.dv-work{
  --dv-paper:   var(--bg, #F2EFE9);
  --dv-world:   #C5C2B8;
  --dv-world-2: #B7B3A8;
  --dv-ink:     var(--ink, #0C0C0C);
  --dv-muted:   var(--muted, #555555);
  --dv-depth:   #7E7A70;              /* letter extrusion, deep greige */
  --dv-gridline: rgba(12, 12, 12, 0.16);
  --dv-ring:    rgba(12, 12, 12, 0.45);
  --dv-card:    var(--surface, #FFFFFF);
  --dv-line:    var(--border, #919495);
  --dv-accent:  var(--accent, #FF4A00);
  --dv-display: "Anton", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;

  position: relative;
  background: var(--dv-paper);
  color: var(--dv-ink);
  font-family: var(--font-display, "Poppins", sans-serif);
  border-top: 1px solid var(--dv-line);
}
.dv-work:not(.dv-work--ready){ display: none; }

.dv-work__sr{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* tall scroll track; JS sets its height */
.dv-work__track{
  position: relative;
  height: 800vh;
}
.dv-work__stage{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- world (3D) ---------- */
.dv-work__world{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--dv-world) 0%, var(--dv-world-2) 100%);
  perspective: 1000px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.dv-work__camera{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.dv-work__dots{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(12,12,12,0.14) 1px, transparent 1.3px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* wall letters: absolutely positioned, transformed per frame */
.dv-work__wall{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.dv-work__letter{
  position: absolute;
  left: 0; top: 0;
  font-family: var(--dv-display);
  font-weight: 400;
  line-height: 1;
  color: var(--dv-ink);
  white-space: nowrap;
  user-select: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  text-shadow:
    1px 1px 0 var(--dv-depth), 2px 2px 0 var(--dv-depth), 3px 3px 0 var(--dv-depth),
    4px 4px 0 var(--dv-depth), 5px 5px 0 var(--dv-depth), 6px 6px 0 var(--dv-depth),
    7px 7px 0 var(--dv-depth), 8px 8px 0 var(--dv-depth);
}

/* vertical WORK title, centred inside the pill */
.dv-work__title{
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
}
.dv-work__title span{
  display: block;
  font-family: var(--dv-display);
  line-height: 1;
  color: var(--dv-ink);
  text-shadow:
    1px 1px 0 var(--dv-depth), 2px 2px 0 var(--dv-depth), 3px 3px 0 var(--dv-depth),
    4px 4px 0 var(--dv-depth), 5px 5px 0 var(--dv-depth);
}

/* project tiles: own layer ABOVE the wall (painted after it), with its own
   perspective, so tiles fly in from the distance yet always cross in front
   of the letters instead of slipping behind them */
.dv-work__fly{
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}
.dv-work__tiles{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  pointer-events: none;
}
.dv-work__tile{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dv-tile-w, 34vw);
  visibility: hidden;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.dv-work__tile.is-live{ visibility: visible; pointer-events: auto; }
.dv-work__card{
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  transform-style: preserve-3d;
  will-change: transform;
}
.dv-work__frame{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--dv-card);
  border: 1px solid var(--dv-line);
  box-shadow: 0 40px 80px rgba(12, 12, 12, 0.28);
}
.dv-work__frame img{
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: top;
  display: block;
  will-change: transform;
}
.dv-work__glare{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--ease, ease);
  pointer-events: none;
}
.dv-work__card:hover .dv-work__glare,
.dv-work__card:focus-visible .dv-work__glare{ opacity: 1; }
.dv-work__card:focus-visible .dv-work__frame{ outline: 2px solid var(--dv-ink); outline-offset: 4px; }
.dv-work__meta{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--dv-paper);               /* readable over the letter wall */
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-ink);
}
.dv-work__meta b{ font-weight: 500; }
.dv-work__meta span{ color: var(--dv-accent); }

/* ---------- overlay (SVG with the pill hole) ---------- */
.dv-work__overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}
.dv-work__overlay .paper{ fill: var(--dv-paper); }
.dv-work__overlay .grid{ fill: none; stroke: var(--dv-gridline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dv-work__overlay .ring{ fill: none; stroke: var(--dv-ring); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- hud ---------- */
.dv-work__hud{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-ink);
}
.dv-work__hud > *{ position: absolute; }
/* labels that sit over the letter wall get a cream chip so they stay readable */
.dv-work__hud-l,
.dv-work__hud-r,
.dv-work__hud-in > span:not(:empty){
  background: var(--dv-paper);
  padding: 6px 10px;
  border-radius: 999px;
}
.dv-work__hud-l{ left: var(--gutter, 32px); top: clamp(20px, 4vh, 36px); }
.dv-work__hud-r{ right: var(--gutter, 32px); top: clamp(20px, 4vh, 36px); text-align: right; }
.dv-work__hud-copy{
  left: var(--gutter, 32px);
  bottom: clamp(24px, 5vh, 48px);
  max-width: 300px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-display, "Poppins", sans-serif);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--dv-muted);
}
.dv-work__hud-cue{
  right: var(--gutter, 32px);
  bottom: clamp(24px, 5vh, 48px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dv-work__hud-cue i{
  position: relative;
  width: 1px; height: 30px;
  background: var(--dv-gridline);
  overflow: hidden;
}
.dv-work__hud-cue i::after{
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 1px; height: 100%;
  background: var(--dv-ink);
  animation: dv-work-cue 1.8s cubic-bezier(.77,0,.18,1) infinite;
}
@keyframes dv-work-cue{ to{ top: 100%; } }
/* labels that stay once you are inside the world */
.dv-work__hud-in{
  left: var(--gutter, 32px);
  right: var(--gutter, 32px);
  bottom: clamp(18px, 3.5vh, 32px);
  display: flex;
  justify-content: space-between;
  opacity: 0;
}

/* cursor label */
.dv-work__cursor{
  position: fixed;
  left: 0; top: 0;
  z-index: 6;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--dv-ink);
  color: var(--dv-paper);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}

/* ---------- reduced motion: a calm, static version ---------- */
.dv-work--static .dv-work__track{ height: auto; }
.dv-work--static .dv-work__stage{ position: relative; height: auto; overflow: visible; }
.dv-work--static .dv-work__world{ position: relative; padding: 96px var(--gutter, 32px); }
.dv-work--static .dv-work__overlay,
.dv-work--static .dv-work__wall,
.dv-work--static .dv-work__hud-cue,
.dv-work--static .dv-work__hud-in{ display: none; }
.dv-work--static .dv-work__title{ position: relative; left: auto; top: auto; transform: none; flex-direction: row; gap: 0.1em; margin-bottom: 48px; }
.dv-work--static .dv-work__tiles{ position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
.dv-work--static .dv-work__tile{ position: relative; left: auto; top: auto; width: auto; visibility: visible; transform: none !important; opacity: 1 !important; pointer-events: auto; }
.dv-work--static .dv-work__hud{ position: relative; height: 0; }

@media (hover: none){
  .dv-work__cursor{ display: none; }
}
@media (max-width: 640px){
  .dv-work__hud{ font-size: 11px; letter-spacing: 0.1em; }
  .dv-work__hud-copy{ max-width: 220px; }
}
@media (prefers-reduced-motion: reduce){
  .dv-work__hud-cue i::after{ animation: none; }
}