/* ============ JackGerrior.com — Styles ============ */
/* ============ Test ============ */

:root{
  --bg:#030603;
  --green:#ffffff;
  --muted:#a6b3ad;
  --text:#f4f7f6;
  --grid-gap:1.25rem;
  --maxw:1100px;
  --glow:255,255,255;

  --dot-red:#ff5f57; --dot-yellow:#febc2e; --dot-green:#28c840;

  --fringe-rgb-red: 255, 0, 80;
  --fringe-rgb-cyan: 0, 255, 255;
  --fringe-alpha-red: .05;
  --fringe-alpha-cyan: .04;
  --fringe-opacity: .20;

  --grain-opacity: .05;
  --grain-size: 180px;
  --grain-speed: 2.5s;
}

/* Native smooth scroll in modern browsers */
html { scroll-behavior: smooth; }

/* Respect accessibility settings */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* caret blink */
#caret{ display:inline-block; animation: caretBlink .9s steps(1,end) infinite; }
@keyframes caretBlink { 50% { opacity:0 } }

/* base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{ margin:0; font:16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color:var(--text); background:var(--bg); }
body.no-native-cursor{ cursor:none; }

/* a11y */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;z-index:1000;padding:.4rem .6rem;border-radius:6px;background:var(--green);color:#0b0b0b;font-weight:700}

/* CRT frame */
.frame{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:clamp(16px,2vw,28px); position:relative; overflow:hidden; }
.crt{
  width:100%; max-width:var(--maxw); position:relative; padding:clamp(18px,2.5vw,28px);
  background:radial-gradient(120% 100% at 50% 0%, #0b0f0b 0, #000 65%, #000 100%);
  border-radius:24px; box-shadow:0 0 40px rgba(var(--glow),.05), inset 0 0 80px rgba(var(--glow),.06);
  outline:2px solid rgba(var(--glow),.22); transform:perspective(1200px) translateZ(0);
  animation:flicker 8s steps(60) infinite;
}
@keyframes flicker{50%{box-shadow:0 0 46px rgba(var(--glow),.07), inset 0 0 110px rgba(var(--glow),.10);}}

/* glass highlights */
.crt::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 100% at 50% -10%, rgba(255,255,255,.06), rgba(0,0,0,0) 45%),
             radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.32), rgba(0,0,0,0) 60%);
  mix-blend-mode:screen; filter:blur(.3px);
}

/* scanlines */
.scanlines::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.00) 0 1px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply; opacity:.95; animation:sl 12s linear infinite;
}
@keyframes sl{from{background-position:0 0;} to{background-position:0 6px;}}

/* terminal shell */
.terminal{
  position:relative; border-radius:16px; padding:clamp(18px,2vw,26px);
  border:1px solid rgba(var(--glow),.28);
  background:linear-gradient(to bottom, rgba(var(--glow),.08), rgba(var(--glow),.02) 40%, rgba(var(--glow),.05) 100%);
  text-shadow:0 0 6px rgba(var(--glow),.30);
}
/* ensure content is above effects */
.terminal > *{ position:relative; z-index:10; }

/* grain (no clicks) */
.terminal::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  opacity: var(--grain-opacity); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/></filter>\
  <rect width='100' height='100' filter='url(%23n)'/>\
</svg>");
  background-size: var(--grain-size) var(--grain-size); animation: grainShift var(--grain-speed) steps(2,end) infinite;
}
@keyframes grainShift{ to { background-position:120px 60px; } }

/* scratches (no clicks) */
.terminal::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
  background:
    repeating-linear-gradient(12deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-15deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px),
    radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(1px 1px at 72% 37%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(1px 1px at 83% 82%, rgba(255,255,255,.12), transparent 60%);
  mix-blend-mode:overlay; opacity:.17; filter:blur(.2px);
}

/* grid overlay (no clicks) with subtle parallax support */
.grid-overlay{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  opacity:.22; mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,   rgba(var(--glow),.10) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg,  rgba(var(--glow),.10) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,   rgba(var(--glow),.16) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg,  rgba(var(--glow),.16) 0 1px, transparent 1px 120px);
  /* parallax: variables default to 0, keep the existing gentle float */
  transform:
    perspective(1000px)
    rotateX(calc(5deg + var(--rx, 0deg)))
    rotateY(var(--ry, 0deg))
    translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  animation:gridFloat 26s linear infinite;
  will-change: transform, background-position;
}

@keyframes gridFloat{
  from{background-position:0 0,0 0,0 0,0 0;}
  to  {background-position:0 8px,8px 0,0 16px,16px 0;}
}

/* If user prefers reduced motion, keep it still */
@media (prefers-reduced-motion: reduce){
  .grid-overlay{
    animation:none;
    transform:perspective(1000px) rotateX(5deg);
  }
}
@keyframes gridFloat{ from{background-position:0 0,0 0,0 0,0 0;} to{background-position:0 8px,8px 0,0 16px,16px 0;} }

/* edge FX (no clicks) */
.edge-fringe{ position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:3;
  mix-blend-mode:screen; opacity: var(--fringe-opacity);
  background:
    radial-gradient(120% 90% at 0%   0%,   rgba(var(--fringe-rgb-red),  var(--fringe-alpha-red)),  transparent 45%),
    radial-gradient(120% 90% at 100% 0%,   rgba(var(--fringe-rgb-cyan), var(--fringe-alpha-cyan)), transparent 45%),
    radial-gradient(120% 90% at 0%   100%, rgba(var(--fringe-rgb-cyan), var(--fringe-alpha-cyan)), transparent 45%),
    radial-gradient(120% 90% at 100% 100%, rgba(var(--fringe-rgb-red),  var(--fringe-alpha-red)),  transparent 45%);
  filter:saturate(.8) brightness(.95);
}
.vignette{ position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(100% 100% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.24) 100%); mix-blend-mode:multiply; }

/* topbar */
.topbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; color:var(--muted); line-height:1; }
.topbar .dots{display:flex; align-items:center; gap:8px;}
.dot{ width:10px; height:10px; border-radius:50%; background:currentColor; opacity:.65 }
.topbar .prompt{display:inline-block; transform:translateY(1px);}
.topbar .dots .dot:nth-child(1){background:var(--dot-red); box-shadow:0 0 7px rgba(255,95,87,.55)}
.topbar .dots .dot:nth-child(2){background:var(--dot-yellow); box-shadow:0 0 7px rgba(254,188,46,.55)}
.topbar .dots .dot:nth-child(3){background:var(--dot-green); box-shadow:0 0 7px rgba(40,200,64,.55)}
.topbar .dots .dot{opacity:1}

/* type & links */
h1,h2,h3{color:var(--green); margin:0 0 .3em; line-height:1.2;}
h1{font-size:clamp(36px,6vw,64px)}
h2{font-size:clamp(22px,3vw,28px)}
a{color:var(--green); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{ text-shadow:0 0 10px rgba(var(--glow),.65) }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px }

/* layout */
.nav{ display:flex; flex-wrap:wrap; gap:12px; margin:.25rem 0 1rem }
.nav a{ text-decoration:none; border:1px solid rgba(var(--glow),.26); padding:.35rem .7rem; border-radius:999px }
.nav a:hover{ background:rgba(var(--glow),.10); color:#0b0b0b }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--grid-gap); }
.hero{ grid-column:1/-1; display:grid; grid-template-columns:1.1fr .9fr; gap:var(--grid-gap); align-items:center; }
.hero .photo{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:1px solid rgba(var(--glow),.26); }
.hero img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.1); }
.section{ grid-column:1/-1; margin-top:2.2rem; }

/* cards */
.work-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--grid-gap); }
.card{ cursor:pointer; border:1px solid rgba(var(--glow),.26); border-radius:14px; padding:1rem; background:rgba(255,255,255,.06); color:var(--text); }
.card:hover{ background:rgba(255,255,255,.12) }
.card h3{ color:var(--green); margin:0 0 .3rem }
.card p{ color:var(--text); opacity:.92; margin:.35rem 0 0 }

/* featured */
.featured-card{ grid-column:1/-1; border:1px solid rgba(var(--glow),.32); border-radius:24px; padding:clamp(18px,2vw,28px);
  background:linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 2px rgba(var(--glow),.10); margin-bottom:1.2rem; }
.featured-card h2, .featured-card h3{ font-size:clamp(32px,6vw,62px); margin:.2rem 0 .8rem; color:var(--green); text-shadow:0 0 8px rgba(var(--glow),.55); }
.featured-card p{ max-width:none; color:var(--text); opacity:.97; }
.featured-actions{ margin-top:1rem; display:flex; gap:.6rem }
.btn{ display:inline-block; border:1px solid rgba(var(--glow),.30); background:transparent; color:var(--green); border-radius:999px; padding:.5rem .9rem; cursor:pointer; text-decoration:none; }
.btn:hover{ background:rgba(var(--glow),.12); color:#0b0b0b }
.btn.small{ padding:.35rem .7rem; font-size:.85rem }

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:.6rem}
.chip{display:inline-block;padding:.15rem .5rem;border-radius:6px;background:#fff;color:#0b0b0b;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.chip:hover{filter:brightness(.95)}

/* projects */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--grid-gap); }
.thumb{ position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(var(--glow),.26); background:#0b140b; cursor:pointer; }
.thumb img{ display:block; width:100%; height:180px; object-fit:cover; opacity:.9; }
.thumb .label{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.55); padding:.25rem .5rem; border-radius:6px; color:var(--text); }

footer{ margin-top:2rem; font-size:.95rem; color:#cfd7d3 }

/* contact */
.scramble-line{ display:flex; gap:.6rem; align-items:center; font-size:1.05rem; margin:.35rem 0; }
.scramble-line .label{ color:var(--muted); min-width:64px; text-transform:lowercase }
.scramble{ font-weight:800; letter-spacing:.06em; color:var(--green); text-shadow:0 0 8px rgba(var(--glow),.45); animation:scramblePulse 1.2s steps(2,end) infinite; user-select:none; }
@keyframes scramblePulse{ 50%{ opacity:.75; filter:brightness(1.05) } }

.gate{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.hold-btn[disabled]{ opacity:.6; cursor:default; }
.hint{ color:#dfe7e4; font-size:.9rem }
.progress{ position:relative; width:160px; height:8px; border:1px solid rgba(var(--glow),.30); border-radius:999px; overflow:hidden; background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.04)); }
.progress span{ display:block; width:100%; height:100%; background:rgba(255,255,255,.18); transform-origin:left center; transform:scaleX(0); transition:transform .06s linear; }
.gate.done .hint{ display:none; }
.revealed a{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* === Animated overlays & modals — sequenced: blur first, then modal === */

/* Overlay base (hidden but ready) */
.overlay,
.video-overlay{
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity .25s ease, visibility .25s ease;
}

/* Show overlay container immediately */
.overlay.active,
.video-overlay.active{
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Dim + blur layer ramps */
.overlay::before,
.video-overlay::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px) saturate(1);
  transition: backdrop-filter .28s ease, background-color .28s ease;
}
.overlay.active::before{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px) saturate(1.1);
}
.video-overlay.active::before{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px) saturate(1.05);
}

/* Modal panel (default OUT) */
.modal{
  position: relative; z-index: 70;
  width: min(820px, 92vw);
  max-height: min(88vh, 100dvh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;

  border-radius: 16px;
  border: 1px solid rgba(var(--glow),.30);
  background: rgba(10,20,10,.94);
  box-shadow: 0 20px 80px rgba(0,0,0,.6), 0 0 40px rgba(var(--glow),.12);
  padding: clamp(16px,2vw,24px);

  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}

/* ENTER: after blur has begun */
.overlay.active:not(.closing) .modal{
  opacity: 1; transform: translateY(0) scale(1);
  transition-delay: .12s; /* pop slightly after blur starts */
}

/* EXIT: modal out first */
.overlay.closing .modal{
  opacity: 0; transform: translateY(8px) scale(.985);
  transition-delay: 0s;
}

/* Scrollable content (+ scrollbar cosmetics) */
#modal-content{
  overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 6px;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.10);
}
#modal-content ul{ margin:.4rem 0 .2rem 1.1rem; }
#modal-content li{ margin:.45rem 0; }
#modal-content::-webkit-scrollbar{ width:12px }
#modal-content::-webkit-scrollbar-track{
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
}
#modal-content::-webkit-scrollbar-thumb{
  border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,.25)),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.22));
  box-shadow: inset 0 0 6px rgba(0,0,0,.25), 0 0 10px rgba(255,255,255,.25);
}

/* Keep close button visible while scrolling */
.close{ position: sticky; align-self: flex-end; top: -6px; right: 0; z-index: 5; }

/* Video modal box uses same sequencing */
.video-box{
  position: relative; z-index: 90;
  width: min(1000px, 94vw); aspect-ratio: 16/9;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(var(--glow),.30); background: #000;

  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
.video-overlay.active:not(.closing) .video-box{
  opacity: 1; transform: translateY(0) scale(1);
  transition-delay: .12s;
}
.video-overlay.closing .video-box{
  opacity: 0; transform: translateY(8px) scale(.985);
  transition-delay: 0s;
}

/* command palette & help (kept minimal; safe to leave) */
.cmdk{ position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:10vh; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.cmdk.active{ display:flex; }
.cmdk-box{ width:min(720px,92vw); border-radius:14px; border:1px solid rgba(var(--glow),.30); background:rgba(10,20,10,.95); box-shadow:0 20px 80px rgba(0,0,0,.6); padding:12px 14px 10px; }
.cmdk-box input{ width:100%; border:0; outline:0; background:transparent; color:var(--text); font:600 16px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cmdk-hints{ margin-top:8px; color:#d0dbd7; font-size:.9rem }
.help{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:90; }
.help.active{ display:flex; }
.help::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.help-box{ position:relative; z-index:95; width:min(720px,92vw); border-radius:14px; border:1px solid rgba(var(--glow),.30); background:rgba(10,20,10,.95); padding:16px 18px; box-shadow:0 20px 80px rgba(0,0,0,.6); }
.help-box h3{ margin:.1rem 0 .6rem; color:var(--green); }

/* custom cursor */
.crt-cursor{ position:fixed; left:0; top:0; width:22px; height:22px; pointer-events:none; z-index:9999;
  transform:translate(-100px,-100px) rotate(-135deg); filter:drop-shadow(0 0 8px rgba(var(--glow),.85));
  mix-blend-mode:screen; transform-origin:20% 40%; opacity:.95; }
.crt-cursor::before{ content:""; position:absolute; inset:0; background:var(--green);
  clip-path:polygon(0% 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0% 65%); border-radius:1px; }
.crt-cursor.hover{ transform:translate(var(--x, -100px),var(--y, -100px)) rotate(-135deg) scale(1.15); }
.crt-cursor.normal{ transform:translate(var(--x, -100px),var(--y, -100px)) rotate(-135deg) scale(1); }

/* responsive & motion preferences */
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .crt, .scanlines::after { animation:none }
  .grid-overlay{ animation:none }
  .terminal::before{ animation:none }
  .overlay, .video-overlay, .modal, .video-box { transition: none }
  .overlay::before, .video-overlay::before { transition: none }
}