/* ============================================================
     HAYCAN EDITOR - v3
     Visual system restored from v1 (glow, HUD font, scanlines, grid bg,
     retention bar) - copy rewritten to be sober / non-RPG.
     bg-void:#0A0605 · bg-panel:#150A09 · bg-panel-2:#1E0F0E
     red-hp:#FF2E2E · red-dim:#8A1F1F · amber-tag:#FF8A3D
     text:#F5ECE8 · text-muted:#9C7C78 · line:rgba(255,60,60,.18)
     Display: Rajdhani / Body: Inter / HUD: Space Mono
     Signature element: sticky progress bar that drains as you scroll,
     labeled "viewer retention"
     ============================================================ */

  :root{
    --void:#0a0605;
    --panel:#150a09;
    --panel2:#1d0f0e;
    --red:#ff2e2e;
    --red-soft:#ff5b4d;
    --red-dim:#5c1a1a;
    --amber:#ff8a3d;
    --text:#f5ece8;
    --muted:#9c7c78;
    --line:rgba(255,70,70,.16);
    --line-strong:rgba(255,70,70,.35);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--text);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(255,60,60,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,60,60,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events:none;
    z-index:0;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
    animation:gridDrift 18s linear infinite;
  }
  @keyframes gridDrift{
    from{ background-position: 0 0, 0 0; }
    to{ background-position: 176px 176px, 176px 176px; }
  }
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}

  h1,h2,h3,.display{ font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.01em;}
  .mono{ font-family:'Space Mono',monospace; letter-spacing:.06em;}

  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--red); color:var(--void);}

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:90;
    background:rgba(10,6,5,.88);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:70px;}
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:38px; height:38px; border:1.5px solid var(--red);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-weight:700; font-size:14px; color:var(--red);
    box-shadow: 0 0 12px rgba(255,46,46,.35) inset;
  }
  .brand-text .name{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; line-height:1;}
  .brand-text .sub{ font-family:'Space Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:.14em; margin-top:3px;}
  .navlinks{ display:flex; gap:34px; }
  .navlinks a{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--muted);
    position:relative; padding-bottom:4px; transition:color .2s;
  }
  .navlinks a:hover{ color:var(--text);}
  .navlinks a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--red);
    transition:width .25s;
  }
  .navlinks a:hover::after{ width:100%;}
  @media (max-width:760px){ .navlinks{display:none;} }

  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:transparent; border:1px solid var(--line-strong);
    cursor:pointer; padding:0 9px;
  }
  .menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--text); transition:transform .25s, opacity .25s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  @media (max-width:760px){ .menu-toggle{ display:flex; } }

  .mobile-menu{
    display:none; flex-direction:column;
    max-height:0; overflow:hidden;
    background:rgba(10,6,5,.96); border-bottom:1px solid var(--line);
    transition:max-height .3s ease;
  }
  @media (max-width:760px){ .mobile-menu{ display:flex; } }
  .mobile-menu.open{ max-height:220px; }
  .mobile-menu a{
    font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.12em; color:var(--muted);
    padding:16px 32px; border-top:1px solid var(--line);
  }
  .mobile-menu a:hover, .mobile-menu a:focus-visible{ color:var(--text); }

  /* ---------- keyboard focus ---------- */
  a:focus-visible, button:focus-visible, .clip-frame:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--red-soft); outline-offset:2px;
  }
  .dots span:focus-visible{ outline:2px solid var(--red-soft); outline-offset:3px; }

  /* ---------- HERO ---------- */
  .hero{
    min-height:calc(38vh - 70px);
    display:flex; align-items:center; justify-content:center;
    padding:14px 0; position:relative;
  }
  .hero .wrap{ text-align:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--amber);
    margin-bottom:18px; text-transform:uppercase;
  }
  .eyebrow.eyebrow-intro{
    opacity:0; transform:translateY(14px);
    animation:heroFadeUp .6s ease forwards; animation-delay:.05s;
  }
  .eyebrow .dot{ width:6px; height:6px; background:var(--amber); border-radius:50%; box-shadow:0 0 6px var(--amber); animation:pulse 1.6s infinite;}
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
  @keyframes heroFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

  .hero-title-wrap{
    position:relative; padding:10px 0 4px;
    opacity:0; transform:translateY(26px);
    animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:.2s;
  }

  .floaters{ position:absolute; inset:-50px -20px; pointer-events:none; z-index:0; overflow:visible; }
  .floaters .float{
    position:absolute; color:var(--red-dim); opacity:.5; display:block;
    animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  }
  .floaters .float svg{ display:block; overflow:visible; width:100%; height:auto; }
  .floaters .float svg rect{ fill:currentColor; }
  .float.f1{ top:6%;  left:2%;  width:16px; animation:floatA 9s infinite; }
  .float.f2{ top:70%; left:8%;  width:11px; animation:floatB 11s infinite; animation-delay:-2s; color:var(--amber); opacity:.4;}
  .float.f3{ top:14%; left:96%; width:13px; animation:floatC 10s infinite; animation-delay:-4s;}
  .float.f4{ top:82%; left:92%; width:9px;  animation:floatA 8s infinite; animation-delay:-3s;}
  .float.f5{ top:46%; left:99%; width:11px; animation:floatB 12s infinite; animation-delay:-6s;}
  .float.f6{ top:92%; left:40%; width:11px; animation:floatC 9.5s infinite; animation-delay:-1s; color:var(--amber); opacity:.35;}
  @keyframes floatA{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%{ transform:translate(16px,-20px) rotate(28deg); }
  }
  @keyframes floatB{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%{ transform:translate(-20px,14px) rotate(-24deg); }
  }
  @keyframes floatC{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%{ transform:translate(-14px,-16px) rotate(32deg); }
  }

  .hero-title{
    position:relative; z-index:2;
    font-size:clamp(46px, 7.5vw, 92px);
    line-height:1.02;
    text-transform:uppercase;
  }
  .hero-title .c1{ color:var(--text); }
  .hero-title .c2{
    color:var(--red);
    text-shadow:0 0 22px rgba(255,46,46,.55), 0 0 60px rgba(255,46,46,.25);
  }

  /* ---------- Premiere-style playhead scrubbing over the title itself ---------- */
  .title-scrub{
    position:relative; z-index:2; display:inline-block;
  }
  .needle{
    position:absolute; top:-8%; bottom:-8%; width:2px; background:var(--red);
    box-shadow:0 0 10px rgba(255,46,46,.85), 0 0 26px rgba(255,46,46,.4);
    animation:needleScrub 3.4s linear infinite;
  }
  .needle::before{
    content:""; position:absolute; top:-2px; left:50%; transform:translateX(-50%);
    width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:7px solid var(--red);
  }
  @keyframes needleScrub{
    0%{ left:-6%; opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:1; }
    100%{ left:106%; opacity:0; }
  }

  .hero-subtitle{
    font-family:'Space Mono',monospace; font-weight:400; font-size:15px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--text);
    margin-top:10px;
    opacity:0; transform:translateY(14px);
    animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:.5s;
  }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em;
    padding:15px 26px; border:1px solid var(--red);
    display:inline-flex; align-items:center; gap:10px;
    cursor:pointer; transition:all .2s; background:transparent; color:var(--text);
  }
  .btn-solid{ background:var(--red); color:var(--void); font-weight:700;}
  .btn-solid:hover{ background:var(--red-soft); box-shadow:0 0 22px rgba(255,46,46,.4);}
  .btn-outline:hover{ background:rgba(255,46,46,.08); }

  /* ---------- scroll reveal system ---------- */
  .reveal{
    opacity:0; transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-left{ transform:translateX(-26px); }
  .reveal-left.in-view{ transform:translateX(0); }
  .reveal-fade{ opacity:0; transition:opacity .6s ease; }
  .reveal-fade.in-view{ opacity:1; }

  /* ---------- SECTION HEADERS ---------- */
  .section{ padding:56px 0; position:relative; }
  #reel{ padding-top:0; }
  .section-head{ margin-bottom:36px; max-width:640px; }
  .section-head h2{ font-size:clamp(30px,4vw,44px); text-transform:uppercase; line-height:1.05;}
  .section-head p{ color:var(--muted); font-size:15px; margin-top:14px; line-height:1.6;}

  /* ---------- CAROUSEL ---------- */
  .reel-stage{
    position:relative; height:540px; max-width:1020px; margin:0 auto;
    overflow:hidden;
  }
  @media (max-width:640px){ .reel-stage{ height:380px; } }
  .carousel-track{
    position:relative; width:100%; height:100%;
  }
  .clip-card{
    position:absolute; top:50%; left:50%; width:480px;
    background:var(--panel); border:1px solid var(--line);
    transition:transform .5s cubic-bezier(.25,.8,.35,1), opacity .5s, border-color .25s;
    will-change:transform, opacity;
    cursor:pointer;
  }
  @media (max-width:640px){ .clip-card{ width:300px; } }
  .clip-card.is-active{ border-color:var(--line-strong); }
  .stage-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:30;
  }
  .stage-arrow.left{ left:10px; }
  .stage-arrow.right{ right:10px; }
  .clip-frame{
    position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
    background:
      repeating-linear-gradient(115deg, #200d0c 0 2px, #170a09 2px 4px),
      linear-gradient(160deg, #1c0d0c, #0e0605 70%);
  }
  .clip-frame .clip-canvas{
    position:absolute; inset:0; width:100%; height:100%; display:block;
  }
  .clip-frame .clip-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .clip-frame .scan{
    position:absolute; left:0; right:0; height:60%;
    background:linear-gradient(180deg, transparent, rgba(255,46,46,.10), transparent);
    animation:scan 4.5s linear infinite; top:-60%;
  }
  @keyframes scan{ to{ top:110%; } }
  .clip-frame .grain{ position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .run-tag{
    position:absolute; top:10px; left:10px; font-family:'Space Mono',monospace;
    font-size:10px; letter-spacing:.1em; color:var(--red-soft); background:rgba(10,6,5,.7);
    padding:4px 8px; border:1px solid var(--line-strong);
  }
  .cat-tag{
    position:absolute; bottom:10px; left:10px; font-family:'Space Mono',monospace;
    font-size:9px; letter-spacing:.1em; color:var(--amber); background:rgba(10,6,5,.75);
    padding:4px 8px; text-transform:uppercase;
  }
  .play-btn{
    position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
    border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center;
    background:rgba(10,6,5,.55); color:var(--red-soft); font-size:15px;
    transition:opacity .2s, transform .2s, box-shadow .2s; cursor:pointer;
    opacity:0;
  }
  .clip-card:hover .play-btn, .upload-card:hover .play-btn{ opacity:1; transform:scale(1.08); box-shadow:0 0 24px rgba(255,46,46,.45);}
  .clip-title{ padding:16px 16px 18px; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:16px;}

  .carousel-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px; }
  .arrow-btn{
    width:38px; height:38px; border:1px solid var(--line-strong); background:rgba(10,6,5,.72); color:var(--red-soft);
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; transition:all .2s;
  }
  .arrow-btn:hover{ background:rgba(255,46,46,.15); border-color:var(--red); }
  .dots{ display:flex; gap:8px; }
  .dots span{ width:6px; height:6px; background:var(--red-dim); cursor:pointer; transition:background .2s, box-shadow .2s;}
  .dots span.active{ background:var(--red); box-shadow:0 0 6px var(--red);}

  /* ---------- FULL UPLOADS GRID ---------- */
  .uploads-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:900px){ .uploads-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .uploads-grid{ grid-template-columns:1fr;} }
  .upload-card{ background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:border-color .2s, transform .2s;}
  .upload-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
  .uploads-empty{ grid-column:1/-1; color:var(--muted); font-size:12px; letter-spacing:.06em; padding:40px 0; text-align:center; border:1px dashed var(--line-strong); }
  .upload-meta{ padding:14px 16px 18px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .upload-meta .t{ font-family:'Rajdhani',sans-serif; font-weight:600; font-size:15px; line-height:1.3;}
  .upload-meta .g{ font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); margin-top:6px;}
  .dur{ font-family:'Space Mono',monospace; font-size:10px; color:var(--red-soft); white-space:nowrap; border:1px solid var(--line-strong); padding:3px 6px;}

  /* ---------- FOOTER / RECRUIT ---------- */
  .footer-cta{ text-align:center; padding:70px 0 50px; position:relative; }
  .footer-cta .glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:280px;
    background:radial-gradient(ellipse at center, rgba(255,46,46,.18), transparent 70%); pointer-events:none;
  }
  .footer-cta h2{ font-size:clamp(34px,6vw,60px); text-transform:uppercase; line-height:1.05; margin-bottom:20px;}
  .footer-cta p{ color:var(--muted); max-width:460px; margin:0 auto 34px; font-size:15px; line-height:1.6;}
  .footer-cta-email{ margin-top:150px; color:var(--muted); font-size:11px; letter-spacing:.06em; }
  .footer-cta-email a{ color:var(--red-soft); border-bottom:1px solid var(--line-strong); }
  .footer-cta-email a:hover{ color:var(--text); }
  footer{ border-top:1px solid var(--line); padding:30px 0; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  footer .f-left{ font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); }
  footer .f-right{ display:flex; align-items:center; gap:24px; }
  footer a.soc{ font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); }
  footer a.soc:hover{ color:var(--red-soft); }
  .discord-wrap{ position:relative; display:inline-flex; align-items:center; }
  .discord-toast{
    position:absolute; bottom:calc(100% + 10px); right:0; white-space:nowrap;
    background:var(--panel); border:1px solid var(--line-strong); color:var(--text);
    font-size:10px; padding:8px 12px;
    opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity .2s, transform .2s;
  }
  .discord-toast.show{ opacity:1; transform:translateY(0); }

  /* mailto links use Inter instead of Space Mono — the @ glyph in
     Space Mono renders noticeably smaller than the surrounding letters */
  a[href^="mailto"]{
    font-family:'Inter',sans-serif; letter-spacing:.01em; font-weight:600;
  }

  /* ---------- CONTACT MODAL ---------- */
  .contact-modal{
    position:fixed; inset:0; background:rgba(6,3,3,.92); z-index:200;
    display:none; align-items:center; justify-content:center; padding:30px;
  }
  .contact-modal.open{ display:flex; }
  .contact-modal-inner{
    width:100%; max-width:460px; position:relative;
    background:var(--panel); border:1px solid var(--line-strong);
    padding:34px 30px 28px;
  }
  .contact-modal-inner h3{
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size:24px;
    text-transform:uppercase; margin-bottom:8px;
  }
  .contact-modal-sub{ color:var(--muted); font-size:11px; margin-bottom:24px; }
  .contact-modal-sub a{ color:var(--red-soft); }
  #contactForm{ display:flex; flex-direction:column; gap:6px; }
  #contactForm label{
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--muted);
    text-transform:uppercase; margin-top:12px;
  }
  #contactForm input, #contactForm textarea{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
    font-family:'Inter',sans-serif; font-size:14px; padding:11px 12px; resize:vertical;
  }
  #contactForm input:focus, #contactForm textarea:focus{
    outline:none; border-color:var(--red-soft); box-shadow:0 0 0 1px var(--red-soft);
  }
  #contactForm button[type="submit"]{ margin-top:20px; justify-content:center; }
  .contact-modal-note{ margin-top:10px; color:var(--muted); font-size:10px; text-align:center; }
  .contact-modal-status{ margin-top:14px; font-size:12px; color:var(--amber); text-align:center; }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; background:rgba(6,3,3,.92); z-index:200;
    display:none; align-items:center; justify-content:center; padding:30px;
  }
  .lightbox.open{ display:flex; }
  .lightbox-inner{ width:100%; max-width:860px; }
  .lightbox-frame{
    width:100%; aspect-ratio:16/9; background:var(--panel); border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  }
  .lightbox-close{
    position:absolute; top:-44px; right:0; font-family:'Space Mono',monospace; font-size:12px;
    color:var(--muted); cursor:pointer; letter-spacing:.1em;
    background:transparent; border:none; padding:0;
  }
  .lightbox-close:hover{ color:var(--red-soft); }
  .lightbox-frame p{ font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); max-width:340px; text-align:center; line-height:1.6; padding:0 20px;}
  .lightbox-frame .ph-icon{ font-size:30px; color:var(--red-dim); }

  @media (max-width:760px){
    .stats-grid{ grid-template-columns:1fr 1fr; }
    .uploads-grid, .clients-grid{ grid-template-columns:1fr; }
    .wrap{ padding:0 20px; }
  }