*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    :root {
      --bg: #070707;
      --bg2: #0c0c0c;
      --fg: #e8e4d8;
      --acc: #7dd57b;
      --glow-base: 1;
      --glow: calc(var(--glow-base) * var(--pulse));
      --acc2: #00ffe0;
      --red: #ff2d55;
      --mono: 'Roboto Mono', monospace;
      --disp: 'Bebas Neue', sans-serif;
      --muted: #444;
      --border: rgba(125,213,123,0.14);
    }
    html { scroll-behavior: smooth; }
    html { overflow-x: hidden; max-width: 100vw; }
    body { overflow-x: clip; max-width: 100vw; }
    body { background: var(--bg); color: var(--fg); font-family: var(--mono); cursor: none; }
    ::selection { background: var(--acc); color: #000; }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--acc); }
    #root { min-height: 100vh; }

    /* CURSOR */
    .cur-dot { position: fixed; z-index: 9999; width: 6px; height: 6px; background: var(--acc); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .15s, height .15s; mix-blend-mode: difference; }
    .cur-ring { position: fixed; z-index: 9998; width: 32px; height: 32px; border: 1px solid var(--acc); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: left .12s ease-out, top .12s ease-out, width .2s, height .2s; opacity: 0.5; mix-blend-mode: difference; }

    /* NAV */
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 28px 52px; mix-blend-mode: difference; }
    .nav-logo { font-family: 'Cousine', 'Roboto Mono', monospace; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--fg); text-decoration: none; }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg); text-decoration: none; opacity: .5; transition: opacity .2s; }
    .nav-links a:hover { opacity: 1; }

    /* HERO */
    .hero { position: relative; height: 100dvh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; padding: 64px 52px; overflow: hidden; }
    #particle-canvas { position: absolute; inset: 0; z-index: 0; }
    .hero-scanlines { position: absolute; inset: -4px 0; z-index: 1; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 4px); background-size: 100% 4px; animation: scan-shift 1.1s linear infinite; will-change: transform; pointer-events: none; }
    @keyframes scan-shift { from { transform: translateY(0); } to { transform: translateY(4px); } }
    .hero-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 40%, rgba(7,7,7,.85) 100%); pointer-events: none; }
    .hero-grad { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(7,7,7,.98) 0%, rgba(7,7,7,.3) 55%, transparent 100%); pointer-events: none; }
    .hero-content { position: relative; z-index: 10; }
    .hero-eyebrow { font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
    .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--acc); }
    .hero-title { font-family: var(--disp); font-size: clamp(80px, 11vw, 172px); line-height: .88; letter-spacing: .02em; margin-bottom: 28px; }
    .wordmark { font-family: 'Cousine', 'Roboto Mono', monospace; font-weight: 700; font-size: clamp(44px, 8.2vw, 118px); letter-spacing: -.01em; }
    .wm-dot { font-family: 'Roboto Mono', monospace; }
    @media (max-width: 768px) { .wordmark { font-size: clamp(30px, 8.6vw, 54px) !important; letter-spacing: -.02em !important; } .wordmark span:not(.term-caret) { font-size: inherit !important; letter-spacing: -.02em !important; } }
    @media (max-height: 560px) and (orientation: landscape) { .wordmark { font-size: clamp(26px, 6vh, 48px) !important; } .wordmark span:not(.term-caret) { font-size: inherit !important; letter-spacing: -.02em !important; } }
    .term-caret { display: inline-block; width: .18em !important; height: .78em !important; background: currentColor; margin-left: .16em; vertical-align: -.04em; animation: caret-blink 1.05s steps(1) infinite; }
    @keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    .term-prompt { opacity: 1; margin-right: .18em; }
    .hero-sub { font-size: 12px; line-height: 2; opacity: .45; max-width: 380px; margin-bottom: 44px; font-style: italic; }
    .hero-cta { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #000; background: var(--acc); padding: 13px 26px; text-decoration: none; transition: background .2s, gap .25s; font-family: var(--mono); }
    .hero-cta:hover { background: #fff; gap: 20px; }
    .hero-corner { position: absolute; right: 52px; bottom: 64px; z-index: 10; font-size: 9px; letter-spacing: .3em; opacity: .25; text-transform: uppercase; writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; }
    .hero-corner::after { content: ''; display: block; width: 1px; height: 56px; background: var(--fg); animation: blink 2s ease-in-out infinite alternate; }
    @keyframes blink { from { opacity: .1; } to { opacity: .5; } }

    /* no glitch */

    /* SECTION BASE */
    @media (pointer: coarse) { body { cursor: auto; } .cur-dot, .cur-ring { display: none; } }
    @media (pointer: coarse) { nav { mix-blend-mode: normal; background: rgba(7,7,7,.72); } }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    section { padding: 120px 52px; }
    .sec-label { font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--acc); margin-bottom: 52px; display: flex; align-items: center; gap: 14px; }
    .sec-label::after { content: ''; flex: 1; max-width: 100px; height: 1px; background: linear-gradient(to right, var(--acc), transparent); }
    .sec-title { font-family: var(--disp); font-size: clamp(48px, 5.5vw, 90px); line-height: .95; letter-spacing: .03em; }

    /* ABOUT */
    .about { background: var(--bg); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1200px; }
    .about-title { font-family: var(--disp); font-size: clamp(52px,6vw,96px); line-height:.92; }
    .about-title em { color: var(--acc); font-style: normal; }
    .about-text { font-size: 13px; line-height: 2; opacity: .55; margin-bottom: 28px; font-style: italic; }
    .about-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--border); padding: 6px 12px; color: var(--fg); opacity: .5; transition: opacity .2s, border-color .2s, color .2s; cursor: default; }
    .tag:hover { opacity: 1; border-color: var(--acc); color: var(--acc); }

    /* WORK */
    .work { background: var(--bg2); }
    .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .proj { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #0e0e0e; cursor: pointer; }
    .proj-bg { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #0e0e0e 0px, #0e0e0e 8px, #101010 8px, #101010 16px); transition: transform .6s cubic-bezier(.16,1,.3,1); }
    .proj:hover .proj-bg { transform: scale(1.04); }
    .proj-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,7,.95) 0%, transparent 65%); }
    .proj-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .proj:hover .proj-accent { transform: scaleX(1); }
    .proj-num { position: absolute; top: 24px; right: 28px; font-size: 10px; letter-spacing: .3em; opacity: .2; }
    .proj-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 32px; transform: translateY(10px); transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .proj:hover .proj-content { transform: translateY(0); }
    .proj-title { font-family: var(--disp); font-size: clamp(30px,3.8vw,58px); letter-spacing: .04em; margin-bottom: 8px; }
    .proj-tags { display: flex; gap: 6px; flex-wrap: wrap; opacity: 0; transform: translateY(6px); transition: opacity .4s .06s, transform .4s .06s cubic-bezier(.16,1,.3,1); }
    .proj:hover .proj-tags { opacity: 1; transform: translateY(0); }
    .proj-tag { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.15); padding: 3px 9px; }
    .proj-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 9px; letter-spacing: .2em; opacity: .12; text-transform: uppercase; }

    /* SHOWREEL */
    .showreel { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .reel-wrap { position: relative; aspect-ratio: 16/9; max-width: 100%; background: #0a0a0a; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; overflow: hidden; margin-top: 40px; }
    .reel-scanlines { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--acc) 7%, transparent), color-mix(in srgb, var(--acc) 7%, transparent) 3px, rgba(6,34,14,.2) 3px, rgba(6,34,14,.2) 6px); background-size: 100% 6px; animation: scan-drift-6 1.6s linear infinite; pointer-events: none; }
    .reel-scanlines::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--acc) 9%, transparent) 45%, color-mix(in srgb, var(--acc) 16%, transparent) 55%, transparent); will-change: transform; animation: scan-sweep 5.5s linear infinite; }
    @keyframes scan-drift { to { background-position: 0 4px; } }
    @keyframes scan-drift-6 { to { background-position: 0 6px; } }
    @keyframes scan-sweep { from { transform: translateY(-120%); } to { transform: translateY(460%); } }
    @keyframes play-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 30%, transparent), 0 0 22px color-mix(in srgb, var(--acc) 30%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc) 0%, transparent), 0 0 34px color-mix(in srgb, var(--acc) 48%, transparent); } }
    @media (prefers-reduced-motion: reduce) { .hero-scanlines, .reel-scanlines, .reel-scanlines::after, .reel-play { animation: none; } }
    .reel-play { width: 72px; height: 72px; border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .2s; animation: play-pulse 2.6s ease-out infinite; }
    .reel-play:hover { background: var(--acc); transform: scale(1.06); }
    .reel-play:hover svg polygon { fill: #000; filter: none; }
    .reel-play svg polygon { fill: var(--acc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 70%, transparent)); transition: fill .2s; }
    .reel-label { font-size: 9px; letter-spacing: .3em; opacity: .3; text-transform: uppercase; }
    .reel-corner { position: absolute; font-size: 8px; letter-spacing: .2em; opacity: .2; font-family: var(--mono); }
    .reel-corner.tl { top: 16px; left: 16px; }
    .reel-corner.tr { top: 16px; right: 16px; }
    .reel-corner.bl { bottom: 16px; left: 16px; }
    .reel-corner.br { bottom: 16px; right: 16px; }

    /* SERVICES */
    .services { background: var(--bg2); }
    .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 40px; }
    .svc { padding: 44px 36px; background: var(--bg2); transition: background .25s; }
    .svc:hover { background: #121212; }
    .svc-icon { font-size: 9px; letter-spacing: .3em; color: var(--acc); opacity: .7; margin-bottom: 20px; }
    .svc-title { font-family: var(--disp); font-size: 32px; letter-spacing: .05em; margin-bottom: 14px; }
    .svc-desc { font-size: 12px; line-height: 1.9; opacity: .45; font-style: italic; }

    /* CONTACT */
    .contact { background: var(--bg); border-top: 1px solid var(--border); }
    .contact-grid { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; }
    .contact-inner { max-width: 100%; }
    .contact-video { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--border); }
    .contact-video video { width: 100%; height: 100%; object-fit: cover; opacity: .9; display: block; }
    /* MOBILE */
    @media (max-width: 768px) {
      nav { padding: 18px 20px; }
      .nav-links { gap: 16px; }
      .nav-links a { font-size: 9px; }
      .hero { padding: 64px 20px 40px; }
      .hero-title { font-size: clamp(54px, 14vw, 88px) !important; width: auto !important; height: auto !important; letter-spacing: .01em !important; }
      .hero-title span:not(.term-caret) { font-size: clamp(54px, 14vw, 88px) !important; letter-spacing: .01em !important; }
      section { padding: 80px 20px; }
      .work-grid { grid-template-columns: 1fr; }
      .svc-grid { grid-template-columns: 1fr; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .contact-big { font-size: clamp(40px, 12vw, 70px) !important; }
      .social-row { flex-wrap: wrap; }
      .social-link { flex: 1 1 50%; padding: 18px; font-size: 8px; }
      footer { flex-direction: column; gap: 8px; padding: 24px 20px; text-align: center; }
    }

    /* SHORT / LANDSCAPE PHONES — let the hero grow instead of clipping off the top */
    @media (max-height: 560px) and (orientation: landscape) {
      .hero { height: auto; min-height: 100dvh; padding: 76px 32px 28px; justify-content: center; }
      .hero-title, .hero-title span:not(.term-caret) { font-size: clamp(38px, 9vh, 72px) !important; width: auto !important; height: auto !important; }
      .hero-title { margin-bottom: 14px; }
      .hero-eyebrow { margin-bottom: 10px; }
      .hero-sub { margin-bottom: 20px; max-width: 320px; line-height: 1.7; }
      .hero-cta { padding: 10px 20px; }
      .hero-corner { display: none; }
    }
    @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } .contact-video { aspect-ratio: 16/9; } }
    .contact-big { font-family: var(--disp); font-size: clamp(52px,7vw,110px); line-height: .9; letter-spacing: .02em; margin-bottom: 36px; }
    .contact-big span { color: var(--acc); }
    /* CRT HAND-OFF OVERLAY — fades in toward the end of the page */
    /* the vertical fade lives on each child, never on the animating parent — a mask on a parent
       forces the whole masked full-viewport layer to re-rasterize on every child transform */
    .crt-overlay { position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: var(--crt, 0); isolation: isolate; will-change: opacity; transform: translateZ(0); --crt-fade: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.35) 58%, #000 78%); }
    .crt-scan, .crt-pix, .crt-hwob { -webkit-mask-image: var(--crt-fade); mask-image: var(--crt-fade); }
    .crt-scan, .crt-hwob { transform: translateZ(0); backface-visibility: hidden; }
    .crt-overlay:not(.on) { visibility: hidden; content-visibility: hidden; }
    .crt-overlay:not(.on) * { animation-play-state: paused !important; }
    /* tiny tiled gradient tiles (linear-gradient + background-size) instead of full-viewport
       repeating-linear-gradients — the browser rasterizes a 3px tile once and repeats it */
    .crt-scan { position: absolute; inset: -3px 0; background: linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px); background-size: 100% 3px; animation: crtFlicker 4.2s steps(1) infinite, crtScanShift 2.6s linear infinite; will-change: transform, opacity; }
    .crt-pix { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,0,0,.09) 0 1px, rgba(0,255,0,.09) 1px 2px, rgba(0,80,255,.09) 2px 3px), linear-gradient(to right, rgba(0,0,0,.18) 0 2.4px, rgba(0,0,0,0) 2.4px 3px), linear-gradient(to right, rgba(0,0,0,.22) 0 .6px, rgba(0,0,0,0) .6px 3px); background-size: 3px 100%; opacity: .85; }
    /* horizontal distortion: a smear band drags the picture sideways as it passes, and the
       grille wobbles on the x axis like a tube losing horizontal hold */
    .crt-hwob { position: absolute; inset: -4% -6%; background: linear-gradient(to right, rgba(0,0,0,.14) 0 1px, rgba(0,0,0,0) 1px 3px); background-size: 3px 100%; animation: crtHWob 5.2s ease-in-out infinite; will-change: transform; }
    @keyframes crtHWob { 0%, 100% { transform: skewX(0deg) translateX(0); } 28% { transform: skewX(.22deg) translateX(1.5px); } 52% { transform: skewX(-.18deg) translateX(-2px); } 76% { transform: skewX(.1deg) translateX(1px); } }
    @media (prefers-reduced-motion: reduce) { .crt-hwob { animation: none; } }
    @keyframes crtScanDrift { from { background-position: 0 0; } to { background-position: 0 3px; } }
    @keyframes crtScanShift { from { transform: translateY(0); } to { transform: translateY(3px); } }
    @keyframes crtFlicker { 0%, 100% { opacity: .97; } 47% { opacity: 1; } 62% { opacity: .94; } 78% { opacity: .99; } }

    /* GLOW — intensity driven by --glow */
    @property --pulse { syntax: '<number>'; inherits: true; initial-value: 1; }
    /* the breathe animation is scoped to the elements that actually read --glow — animating an
       inherited custom property on :root forces a style recalc of the entire tree every frame */
    .hero-title, .wordmark, .term-prompt, .sec-title, .about-title, .contact-big, .svc-title, .sec-label, .hero-eyebrow, .svc-icon, .hero-cta, .contact-email, .social-link { animation: glow-breathe 6.5s ease-in-out infinite; }
    @keyframes glow-breathe { 0%, 100% { --pulse: 1; } 50% { --pulse: .5; } }
    @media (prefers-reduced-motion: reduce) { .hero-title, .wordmark, .term-prompt, .sec-title, .about-title, .contact-big, .svc-title, .sec-label, .hero-eyebrow, .svc-icon, .hero-cta, .contact-email, .social-link { animation: none; } }
    body { text-shadow: 0 0 13px color-mix(in srgb, var(--acc) min(100%, calc(14% * var(--glow-base))), transparent); }
    .proj-title, .contact-email, .reel-label, .tag, .nav-links a, .social-link, footer { text-shadow: 0 0 14px color-mix(in srgb, var(--acc) min(100%, calc(20% * var(--glow-base))), transparent); }
    .hero-title { text-shadow: 0 0 16px color-mix(in srgb, var(--acc) min(100%, calc(40% * var(--glow))), transparent), 0 0 40px color-mix(in srgb, var(--acc) min(100%, calc(22% * var(--glow))), transparent), 0 0 86px color-mix(in srgb, var(--acc) min(100%, calc(10% * var(--glow))), transparent); }
    .wordmark, .term-prompt { text-shadow: 0 0 14px color-mix(in srgb, var(--acc) min(100%, calc(55% * var(--glow))), transparent), 0 0 40px color-mix(in srgb, var(--acc) min(100%, calc(34% * var(--glow))), transparent), 0 0 90px color-mix(in srgb, var(--acc) min(100%, calc(18% * var(--glow))), transparent); }
    .term-caret { box-shadow: 0 0 12px color-mix(in srgb, var(--acc) min(100%, calc(65% * var(--glow))), transparent), 0 0 30px color-mix(in srgb, var(--acc) min(100%, calc(35% * var(--glow))), transparent); }
    .sec-title, .about-title, .contact-big, .svc-title { text-shadow: 0 0 16px color-mix(in srgb, var(--acc) min(100%, calc(40% * var(--glow))), transparent), 0 0 40px color-mix(in srgb, var(--acc) min(100%, calc(22% * var(--glow))), transparent), 0 0 86px color-mix(in srgb, var(--acc) min(100%, calc(10% * var(--glow))), transparent); }
    .sec-label, .hero-eyebrow, .svc-icon { text-shadow: 0 0 14px color-mix(in srgb, var(--acc) min(100%, calc(45% * var(--glow))), transparent); }
    .hero-cta { box-shadow: 0 0 22px color-mix(in srgb, var(--acc) min(100%, calc(38% * var(--glow))), transparent), 0 0 54px color-mix(in srgb, var(--acc) min(100%, calc(20% * var(--glow))), transparent); }
    .hero-cta:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--acc) min(100%, calc(55% * var(--glow))), transparent), 0 0 62px color-mix(in srgb, var(--acc) min(100%, calc(28% * var(--glow))), transparent); }
    .contact-email { text-shadow: 0 0 16px color-mix(in srgb, var(--acc) min(100%, calc(26% * var(--glow))), transparent); }
    .contact-email:hover { text-shadow: 0 0 18px color-mix(in srgb, var(--acc) min(100%, calc(55% * var(--glow))), transparent), 0 0 44px color-mix(in srgb, var(--acc) min(100%, calc(28% * var(--glow))), transparent); }
    .social-link:hover { text-shadow: 0 0 16px color-mix(in srgb, var(--acc) min(100%, calc(50% * var(--glow))), transparent); }
    .contact-sub { font-size: 12px; opacity: .45; margin-bottom: 52px; line-height: 2; max-width: 440px; font-style: italic; }
    .contact-email { display: inline-flex; align-items: center; gap: 16px; font-family: var(--disp); font-size: clamp(22px,2.8vw,40px); color: var(--fg); text-decoration: none; letter-spacing: .08em; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 10px; transition: color .2s, border-color .2s; }
    .contact-email:hover { color: var(--acc); border-color: var(--acc); }

    .contact-head { display: flex; align-items: center; gap: 40px; margin-bottom: 36px; }
    .contact-head .contact-big { margin-bottom: 0; flex: 0 0 auto; }
    .noise-wave { flex: 1 1 auto; min-width: 0; height: clamp(90px, 13vw, 190px); display: block; touch-action: pan-y; }
    @media (max-width: 768px) { .contact-head { flex-direction: column; align-items: flex-start; gap: 20px; } .noise-wave { width: 100%; height: 84px; } }

    /* SOCIAL */
    .social-row { display: flex; gap: 0; border-top: 1px solid var(--border); }
    .social-link { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--fg); text-decoration: none; opacity: .3; border-right: 1px solid var(--border); transition: opacity .2s, color .2s, background .2s; }
    .social-link:last-child { border-right: none; }
    .social-link:hover { opacity: 1; color: var(--acc); background: rgba(212,255,0,.04); }


    /* DIRECT OUTPUT CUE — the corner mark from direct-output.be, pointing on down the page */
    .do-cue-wrap { display: flex; flex-direction: column; align-items: center; padding: 0 52px 34px; background: transparent; position: relative; z-index: 160; opacity: 0; animation: doCueIn 1.1s ease 1.9s forwards; }
    .do-cue { display: block; padding: 0; color: var(--acc); background: none; border: none; cursor: pointer; opacity: .45; transition: opacity .4s ease; }
    /* a second, coprime flicker layer — multiplied with the first, the pattern takes ~36s to repeat */
    /* 41.4s = 9 arrow ticks — steady glow, lifting to the arrow's brightness on each shoot, two rare dropouts */
    @keyframes neonFlicker2 { 0% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 6.44% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 8.34% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 17.56% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 19.46% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 28.67% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 30.57% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 39.78% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 41.68% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 50.89% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 52.79% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 62.00% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 63.90% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 73.11% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 75.01% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 84.22% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 86.12% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 95.33% { filter: opacity(.72) drop-shadow(0 0 6px var(--acc)); } 97.23% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 33% { filter: opacity(.3); } 33.3% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 72% { filter: opacity(.28); } 72.4% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } 100% { filter: opacity(.6) drop-shadow(0 0 4px var(--acc)); } }
    @keyframes doCueIn { to { opacity: 1; } }
    .do-cue:hover { opacity: .85; }
    .do-cue svg { display: block; overflow: visible; }
    /* only the frame is the neon tube — the arrow inside stays steady */
    .do-cue-frame { animation: neonFlicker 55.2s steps(1) infinite, neonFlicker2 41.4s steps(1) infinite; }
    /* neon tube: mostly lit, with cold-start stutters and the odd dropout */
    /* 55.2s = 12 arrow ticks — lit almost throughout, with rare dropouts between shoots */
    @keyframes neonFlicker { 0% { opacity: 1; } 18.4% { opacity: .45; } 18.6% { opacity: 1; } 51% { opacity: .42; } 51.3% { opacity: 1; } 51.6% { opacity: .5; } 51.8% { opacity: 1; } 84% { opacity: .45; } 84.3% { opacity: 1; } 100% { opacity: 1; } }
    .do-cue-arrow { transform-box: fill-box; transform-origin: center; animation: doCueBlink 4.6s ease-in-out infinite; }
    @keyframes doCueBlink { 0%, 46%, 100% { transform: translateY(0); opacity: .34; filter: none; } 58% { transform: translateY(9px); opacity: .72; filter: drop-shadow(0 0 6px var(--acc)); } 62% { transform: translateY(7px); opacity: .6; filter: drop-shadow(0 0 4px var(--acc)); } 76% { transform: translateY(0); opacity: .34; filter: none; } }
    @media (max-width: 768px) { .do-cue-wrap { padding: 0 20px 26px; } .do-snake { top: calc(100% - 4px); } }
    /* SCROLL SNAKE — the trail expands from the cue down to the Direct Output mark; length measured in JS */
    .do-snake { position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%); width: 1px; height: 300px; pointer-events: none; overflow: hidden; background: repeating-linear-gradient(to bottom, rgba(232,228,216,.12) 0 5px, transparent 5px 13px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 45%); mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 45%); }
    .do-snake::after { content: ''; position: absolute; left: -1px; width: 3px; height: 5px; background: var(--acc); box-shadow: 0 0 8px var(--acc), 0 0 16px color-mix(in srgb, var(--acc) 50%, transparent); animation: doSnake 4.6s steps(var(--snake-steps, 14)) infinite; }
    @keyframes doSnake { 0%, 61.9% { top: 0; opacity: 0; } 62% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .do-cue-arrow, .do-cue-frame { animation: none; } .do-cue-wrap { animation-delay: .2s; } .do-snake::after { animation: none; opacity: .5; top: 30%; } }

    /* DIRECT OUTPUT TAIL */
    .do-tail { position: relative; background: linear-gradient(to bottom, var(--bg) 0%, #04060a 55%); padding: 0; }
    .do-tail-sticky { position: sticky; top: 0; z-index: 5; height: 100vh; height: 100dvh; overflow: hidden; }
    .do-tail-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
    .do-tail-link { position: absolute; display: block; z-index: 2; pointer-events: none; }
    /* the mark's label rides in its own fixed layer so it reads above the CRT overlay */
    .do-tail-cap { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; will-change: transform; }

    @media (prefers-reduced-motion: reduce) { .proj-title, .reel-label, .tag, .nav-links a, footer { animation: none; } }

    /* FOOTER */
    footer { position: relative; z-index: 160; padding: 28px 52px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); font-size: 9px; letter-spacing: .2em; opacity: .25; text-transform: uppercase; }