/* karimaballa.com — cloud-flight hero + THE DECK (Obsidian edition) v5 */

:root {
  --void: #0a0a0b;
  --glow: #1b1430;
  --ui: #0d0d10;
  --lime: #c6ff4d;
  --txt: #f5f5f3;
  --sub: #8a8a93;
  --line: #ffffff22;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
body { background:var(--void); color:var(--txt); font-family:'General Sans',sans-serif; overflow-x:hidden; }
::selection { background:var(--lime); color:var(--void); }
.mono { font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.15em; }
h1, h2, h3 { font-family:'Clash Display',sans-serif; }

/* film grain — everything */
.grain { position:fixed; inset:-50%; z-index:95; pointer-events:none; opacity:.05;
  background-image:repeating-conic-gradient(#fff 0 .0001%, transparent 0 .0002%);
  background-size:220px 220px; animation:grain 1.2s steps(4) infinite; }
@keyframes grain { 50% { transform:translate(8px,-6px); } }
@media (prefers-reduced-motion: reduce){ .grain { animation:none; } }

/* ---------- LOADER ---------- */
.loader { position:fixed; inset:0; z-index:100; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.loader-inner { font-size:clamp(14px,2vw,20px); color:var(--txt); }
.loader-tag { font-size:10px; color:var(--sub); }
.flash { position:fixed; inset:0; z-index:99; background:#fff; opacity:0; pointer-events:none; }

/* ---------- NAV ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(16px,4vw,48px); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:500; letter-spacing:.12em; font-size:13px; font-family:'Space Mono',monospace; }
.nav-logo img { width:34px; height:34px; border-radius:8px; filter:brightness(1.7); border:1px solid var(--line); }
.nav-cta { font-family:'Space Mono',monospace; border:1px solid var(--line); border-radius:99px; padding:13px 22px; color:#fff; text-decoration:none; font-size:11.5px; letter-spacing:.18em; backdrop-filter:blur(6px); background:rgba(10,10,11,.25); transition:all .3s; }
.nav-cta:hover { background:var(--lime); color:var(--void); border-color:var(--lime); }

/* ---------- HERO (kept from the flight build) ---------- */
.hero { position:relative; height:100vh; height:100svh; overflow:hidden; background:var(--void); }
.hero-media { position:absolute; inset:0; will-change:transform; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-bg-img { display:none; }
@media (max-width:768px){
  .hero-bg-video { display:none; }
  .hero-bg-img { display:block; }
}

.hud { position:absolute; z-index:5; font-size:10.5px; color:#fff; opacity:.85; text-shadow:0 1px 10px rgba(5,10,20,.6); }
.hud-tl { top:84px; left:clamp(16px,4vw,48px); }
.hud-tr { top:84px; right:clamp(16px,4vw,48px); }
.hud-bl { bottom:26px; left:clamp(16px,4vw,48px); }
.hud-br { bottom:26px; right:clamp(16px,4vw,48px); }
@media (max-width:768px){ .hud-tl,.hud-tr{ top:68px; } .hud-bl,.hero .hud-br{ display:none; } }

.hero-copy { position:absolute; z-index:6; right:clamp(16px,5vw,80px); top:50%; transform:translateY(-50%); max-width:640px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:22px; }
.hero-copy::before { content:''; position:absolute; z-index:-1; inset:-40px -40px -40px -90px; pointer-events:none;
  background:radial-gradient(125% 105% at 82% 50%, rgba(6,12,24,.6) 0%, rgba(6,12,24,.32) 45%, transparent 78%); border-radius:28px; }
.hero-kicker { font-size:12px; color:#fff; opacity:.9; text-shadow:0 1px 14px rgba(5,20,45,.65); }
.hero-h1 { display:flex; flex-direction:column; align-items:flex-end; line-height:.88; font-size:clamp(60px,8.6vw,128px); font-weight:600; letter-spacing:-.03em;
  background:linear-gradient(168deg, #0b1220 0%, #16304e 42%, #4f7d3e 78%, #c6ff4d 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 30px rgba(210,230,255,.45)); }
.hero-h1 .hl { display:block; overflow:hidden; white-space:nowrap; }
.hero-sub { font-size:clamp(15px,1.4vw,18px); line-height:1.65; max-width:44ch; color:#f2f6fb; text-shadow:0 1px 16px rgba(5,20,45,.7); }
.hero-sub strong { color:#fff; }
.hero-cta { font-size:12.5px; text-decoration:none; color:var(--void); background:#fff; padding:15px 32px; border-radius:99px; box-shadow:0 10px 40px rgba(5,20,45,.35); }
.hero-stats { display:flex; gap:clamp(20px,3vw,48px); margin-top:8px; }
.stat { display:flex; flex-direction:column; align-items:flex-end; }
.stat-row { display:flex; align-items:baseline; }
.stat .stat-n, .stat .stat-x { font-size:clamp(26px,3vw,40px); font-weight:600; color:#fff; font-family:'Clash Display',sans-serif; }
.stat .stat-x { color:var(--lime); }
.stat small { font-size:9.5px; color:#e8eef6; opacity:.85; margin-top:4px; }

@media (max-width:768px){
  .hero::after { content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
    background:linear-gradient(205deg, rgba(7,12,20,.5) 0%, rgba(7,12,20,.18) 38%, transparent 60%); }
  .hero-copy { left:auto; right:14px; top:108px; bottom:auto; transform:none; max-width:76%; gap:12px; }
  .hero-kicker { font-size:9.5px; }
  .hero-h1 { font-size:clamp(40px,12vw,56px); }
  .hero-sub { font-size:13px; line-height:1.55; max-width:24ch; }
  .hero-cta { font-size:11px; padding:12px 24px; }
  .hero-stats { gap:14px; margin-top:4px; }
  .stat .stat-n, .stat .stat-x { font-size:20px; }
  .stat small { font-size:7.5px; }
}

.mist { position:absolute; inset:-20%; z-index:8; pointer-events:none; opacity:0;
  background:
    radial-gradient(42% 34% at 22% 78%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(50% 40% at 78% 85%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(36% 30% at 50% 100%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%);
  filter:blur(8px); }
.mist-2 { transform:rotate(160deg); }
.mist-3 { transform:rotate(-30deg); filter:blur(14px); }
.whiteout { position:fixed; inset:0; z-index:40; background:#eef3f9; opacity:0; pointer-events:none; }

.scroll-cue { position:absolute; z-index:6; bottom:26px; left:50%; transform:translateX(-50%); font-size:10px; color:#fff; opacity:.9; display:flex; flex-direction:column; align-items:center; gap:10px; text-shadow:0 1px 10px rgba(5,10,20,.6); }
.scroll-cue span { width:1px; height:42px; background:linear-gradient(#fff,transparent); display:block; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ---------- THE DECK ---------- */
.deck { position:relative; height:100vh; height:100svh; overflow:hidden;
  background:radial-gradient(55% 45% at 50% 46%, var(--glow) 0%, var(--void) 72%); }
.deck-name { position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:13vw; font-weight:600; letter-spacing:-.03em; line-height:.85; color:var(--txt); user-select:none; }
#deckCanvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
.vignette { position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }

.deck-hud { position:absolute; z-index:4; left:0; right:0; bottom:26px; display:flex; justify-content:space-between; padding:0 clamp(16px,4vw,48px); pointer-events:none; }
.deck-cap { font-size:11px; color:var(--lime); }
.deck-stage { font-size:10.5px; color:var(--sub); }
@media (max-width:768px){ .deck-stage { display:none; } }

.maker-caps { position:absolute; z-index:4; inset:0; pointer-events:none; opacity:0; }
.maker-caps span { position:absolute; font-size:10.5px; color:var(--sub); }
.maker-caps span:nth-child(1){ left:8%; top:24%; }
.maker-caps span:nth-child(2){ right:9%; top:38%; color:var(--txt); }
.maker-caps span:nth-child(3){ left:12%; bottom:22%; color:var(--lime); }

/* SIGNAL — contact */
.signal { position:absolute; z-index:5; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
.signal-card { text-align:center; max-width:680px; padding:24px; }
.sig-top { font-size:11px; color:var(--lime); display:flex; align-items:center; justify-content:center; gap:10px; }
.acc-dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); animation:blink 2.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.3; } }
.signal-card h3 { font-size:clamp(44px,7vw,96px); font-weight:600; line-height:.95; letter-spacing:-.02em; margin:26px 0 34px; }
.sig-cta { display:inline-block; font-size:13px; color:var(--void); background:var(--lime); text-decoration:none; padding:16px 38px; border-radius:99px; font-weight:700; }
.sig-links { display:flex; flex-direction:column; gap:12px; margin-top:38px; }
.sig-links a { color:var(--sub); text-decoration:none; font-size:12px; transition:color .25s; }
.sig-links a:hover { color:var(--lime); }
.sig-foot { margin-top:48px; font-size:9.5px; color:#5c5c64; }

/* FOCUS / case overlay */
.case { position:fixed; inset:0; z-index:60; background:rgba(10,10,11,.78); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; }
.case[hidden] { display:none; }
.case-inner { max-width:760px; padding:24px; text-align:left; }
.case-cap { font-size:11px; color:var(--lime); }
.case h3 { font-size:clamp(44px,8vw,110px); font-weight:600; letter-spacing:-.02em; line-height:.95; margin:14px 0 30px; }
.case-metrics { display:flex; gap:clamp(24px,5vw,64px); margin-bottom:26px; }
.case-metrics b { font-family:'Clash Display',sans-serif; font-size:clamp(34px,4.5vw,58px); font-weight:600; display:block; }
.case-metrics span { font-size:10px; color:var(--sub); }
.case p { color:#c9c9cf; line-height:1.7; max-width:54ch; font-size:16px; }
.case-close { position:absolute; top:26px; right:clamp(16px,4vw,48px); background:none; border:1px solid var(--line); color:var(--txt); border-radius:99px; padding:10px 20px; font-size:10.5px; cursor:pointer; }
.case-close:hover { border-color:var(--lime); color:var(--lime); }
.case-next { margin-top:34px; background:none; border:none; color:var(--lime); font-size:12px; cursor:pointer; padding:0; }

/* mobile / reduced-motion flat deck */
.flat-deck { position:relative; z-index:4; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; padding:90px 18px 40px; display:flex; flex-direction:column; gap:26px; }
.flat-card { scroll-snap-align:center; flex:none; border-radius:24px; overflow:hidden; border:1.5px solid var(--line); transform:perspective(900px) rotateX(2deg); }
.flat-card img { width:100%; display:block; }
.flat-card .mono { display:block; padding:14px 16px; font-size:10.5px; color:var(--lime); background:var(--ui); border-bottom:1px solid var(--line); }

/* ---------- CURSOR — reticle ---------- */
.cursor { position:fixed; z-index:90; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--lime); pointer-events:none; top:0; left:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; transition:width .25s,height .25s; }
.cursor::before { content:''; width:3px; height:3px; border-radius:50%; background:var(--lime); }
.cursor-label { position:absolute; top:110%; font-size:9px; color:var(--lime); white-space:nowrap; }
.cursor.big { width:64px; height:64px; }
@media (pointer:coarse){ .cursor{ display:none; } }

[data-reveal] { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; }
  .scroll-cue span, .acc-dot { animation:none; }
}