/* ===========================================================
   SEONINJA — Immersive 3D layer
   Sits on top of cyber.css. Makes the page float over the
   WebGL world: translucent panes, soft content scrims,
   scroll-reveal entrances with subtle depth.
   =========================================================== */

/* The WebGL canvas — fixed behind all content */
#bg3d{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-2; pointer-events:none; display:block;
  background:#050507;
}

/* let the world show through: drop the flat CSS grid, the canvas tunnel replaces it */
body::before{ display:none !important; }
body{ background:transparent !important; }
html{ background:#050507; }

/* ---------- HERO: let 3D panels + shuriken show through ---------- */
/* ---------- HERO: cyber-ninja centrepiece blended into the 3D tunnel ---------- */
.hero{ min-height:840px; }
.hero-ninja{
  position:absolute; top:0; right:-4%; bottom:0; width:64%;
  z-index:2; pointer-events:none;
  background:url("ninja-opt.jpg") right 24% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 48%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 48%);
  filter:saturate(1.06) contrast(1.04);
  will-change:transform, filter; transform:translate3d(0,0,0);
  animation:ninjaGlow 4.6s ease-in-out infinite;
}
/* faint red wash so the ninja sits inside the world's lighting (pulsing) */
.hero-ninja::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(58% 78% at 72% 42%, rgba(255,34,48,.16), transparent 70%);
  mix-blend-mode:screen;
  animation:ninjaWash 5.2s ease-in-out infinite;
}
/* drifting hologram scanlines over the figure */
.hero-ninja::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,46,58,.06) 0 2px, transparent 2px 5px);
  mix-blend-mode:screen; opacity:.55;
  animation:ninjaScan 7s linear infinite;
}
@keyframes ninjaGlow{
  0%,100%{ filter:saturate(1.06) contrast(1.04) brightness(1); }
  50%{ filter:saturate(1.16) contrast(1.08) brightness(1.08); }
}
@keyframes ninjaWash{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
@keyframes ninjaScan{ from{ background-position:0 0; } to{ background-position:0 64px; } }
@media (prefers-reduced-motion: reduce){
  .hero-ninja, .hero-ninja::after, .hero-ninja::before{ animation:none !important; }
}

.hero{ background:transparent; }
.hero-media{ mix-blend-mode:screen; opacity:.16; }
body.realvideo .hero-media video{ opacity:.18; }
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(5,5,7,.82) 0%, rgba(5,5,7,.32) 30%, transparent 56%),
    linear-gradient(0deg, var(--black) 0%, rgba(5,5,7,.42) 20%, transparent 46%) !important;
}
/* a touch more depth on the headline */
.hero h1{ text-shadow:0 2px 40px rgba(0,0,0,.8); }
.hero-sub{ text-shadow:0 1px 18px rgba(0,0,0,.9); }

/* ---------- CONTENT SCRIMS ----------
   Each section's content floats in a soft pool of darkness so
   text stays readable while the 3D world glows around the edges. */
.block .wrap, .cta-band .inner{ position:relative; }
.block .wrap::before, .cta-band .inner::before{
  content:""; position:absolute; inset:-70px -40px; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 100% at 50% 50%, rgba(6,6,9,.82) 0%, rgba(6,6,9,.6) 48%, transparent 80%);
}

/* translucent bands so the corridor is visible behind them */
.seo-band{
  background:linear-gradient(180deg, rgba(10,10,14,.46), rgba(7,7,11,.6)) !important;
  backdrop-filter:blur(2px);
}
.ticker{ background:rgba(10,10,13,.6) !important; backdrop-filter:blur(3px); }
.hero-readout{ background:linear-gradient(180deg, transparent, rgba(5,5,8,.7)) !important; backdrop-filter:blur(2px); }
.cta-band{ background:radial-gradient(70% 130% at 50% 0%, rgba(255,34,48,.2), transparent 60%), transparent !important; }
footer{ background:rgba(9,9,13,.66) !important; backdrop-filter:blur(6px); }

/* cards / value cards read as solid holographic UI floating in space */
.card{ background:rgba(19,19,24,.9) !important; backdrop-filter:blur(4px); }
.card.featured{ background:linear-gradient(180deg, rgba(26,18,22,.92), rgba(19,19,24,.9) 40%) !important; }
.seo-card{ background:rgba(8,8,11,.82) !important; }
.value-card, .step{ background:rgba(19,19,24,.86) !important; backdrop-filter:blur(4px); }
.form-card{ background:rgba(19,19,24,.92) !important; backdrop-filter:blur(6px); }

/* ---------- SCROLL-REVEAL with subtle depth ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:perspective(1100px) translateY(46px) translateZ(-90px) rotateX(7deg);
    transition:opacity .9s cubic-bezier(.16,.84,.34,1), transform .9s cubic-bezier(.16,.84,.34,1);
    will-change:transform, opacity;
  }
  .reveal.in{
    opacity:1;
    transform:perspective(1100px) translateY(0) translateZ(0) rotateX(0);
  }
  /* stagger children of grids */
  .cards.reveal-group > *, .value-grid.reveal-group > *, .process.reveal-group > *{
    opacity:0; transform:translateY(40px) scale(.96);
    transition:opacity .7s cubic-bezier(.16,.84,.34,1), transform .7s cubic-bezier(.16,.84,.34,1);
  }
  .cards.reveal-group.in > *, .value-grid.reveal-group.in > *, .process.reveal-group.in > *{
    opacity:1; transform:translateY(0) scale(1);
  }
  .reveal-group.in > *:nth-child(1){ transition-delay:.04s; }
  .reveal-group.in > *:nth-child(2){ transition-delay:.13s; }
  .reveal-group.in > *:nth-child(3){ transition-delay:.22s; }
  .reveal-group.in > *:nth-child(4){ transition-delay:.31s; }
}

/* hero copy floats up on a gentle parallax handled in JS */
.hero-copy{ will-change:transform; }

/* a vignette over the whole viewport to seat the 3D world (behind content) */
.world-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 50%, rgba(5,5,7,.55) 100%),
    radial-gradient(100% 120% at 50% 120%, rgba(255,34,48,.06), transparent 60%);
}

/* scroll hint cue under the hero */
.verse-cue{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-soft);
  pointer-events:none; transition:opacity .4s ease;
}
.verse-cue .bar{ width:1px; height:34px; background:linear-gradient(180deg, var(--red), transparent); position:relative; overflow:hidden; }
.verse-cue .bar::after{ content:""; position:absolute; left:0; top:0; width:100%; height:10px; background:#fff; animation:cueDrop 1.8s infinite; }
@keyframes cueDrop{ 0%{ transform:translateY(-12px); opacity:0; } 40%{ opacity:1; } 100%{ transform:translateY(34px); opacity:0; } }
.verse-cue.hidden{ opacity:0; }

/* ===========================================================
   CURSOR GLOW — red light that follows the mouse
   =========================================================== */
.cursor-glow{
  position:fixed; top:0; left:0; width:340px; height:340px;
  margin:-170px 0 0 -170px;            /* centre on the pointer */
  border-radius:50%; pointer-events:none; z-index:60;
  background:radial-gradient(circle closest-side,
    rgba(255,46,58,.34) 0%, rgba(255,34,48,.16) 38%, rgba(255,34,48,.05) 62%, transparent 78%);
  mix-blend-mode:screen; opacity:0;
  transition:opacity .35s ease, width .3s ease, height .3s ease, margin .3s ease;
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
/* swell + intensify over interactive elements */
.cursor-glow.hot{
  width:460px; height:460px; margin:-230px 0 0 -230px;
  background:radial-gradient(circle closest-side,
    rgba(255,70,80,.46) 0%, rgba(255,40,52,.2) 40%, rgba(255,34,48,.06) 64%, transparent 80%);
}
@media (prefers-reduced-motion: reduce){ .cursor-glow{ transition:opacity .2s ease; } }

/* ---------- HERO NINJA: mobile — keep the original VIDEO hero ---------- */
@media (max-width:860px){
  .hero{ min-height:auto; }
  /* drop the ninja and restore the full-bleed video hero on phones */
  .hero-ninja{ display:none !important; }
  .hero-media{ mix-blend-mode:normal; opacity:1; }
  body.realvideo .hero-media video{ opacity:1; }
}

/* ===========================================================
   PAGE HEADERS (About / Contact / Websites Built)
   Show the 3D world + floating weapon behind the header.
   =========================================================== */
.page-head{ background:transparent !important; }
.page-head .wrap{ position:relative; z-index:2; }
.page-head .hud{ z-index:2; }
/* left-weighted scrim for left-aligned headers (About / Contact),
   keeping the right side clear so the floating weapon reads */
.page-head:not(.built-head)::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,6,9,.94) 0%, rgba(6,6,9,.55) 44%, rgba(6,6,9,.12) 72%, transparent 88%),
    linear-gradient(0deg, var(--black) 0%, transparent 42%);
}
/* centred radial scrim for the centred Websites-Built header */
.built-head::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(82% 92% at 50% 42%, rgba(6,6,9,.74), rgba(6,6,9,.45) 60%, transparent 86%);
}

/* ===========================================================
   WEBSITES BUILT — portfolio of live sites (holographic cards)
   =========================================================== */
.built-head{
  position:relative; z-index:2;
  padding:160px 0 40px; text-align:center;
}
.built-head .wrap{ position:relative; }
.built-head .eyebrow{ justify-content:center; margin-bottom:18px; }
.built-head h1{
  font-family:var(--display); font-weight:900; line-height:.94;
  font-size:clamp(46px, 8vw, 104px); letter-spacing:-.02em; margin:0;
}
.built-head p{
  max-width:620px; margin:22px auto 0; color:var(--text-soft);
  font-size:clamp(15px,1.5vw,18px); line-height:1.6;
}
.built-head .count{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-soft);
}
.built-head .count b{ color:var(--red); font-size:14px; }

.built{ position:relative; z-index:2; padding:30px 0 110px; }
.built-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px;
  perspective:1400px;
}
.built-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:rgba(16,16,22,.82); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px; overflow:hidden; position:relative;
  transition:transform .5s cubic-bezier(.16,.84,.34,1), border-color .4s ease, box-shadow .5s ease;
  transform-style:preserve-3d; will-change:transform;
}
.built-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,34,48,0); transition:box-shadow .4s ease; mix-blend-mode:screen;
}
.built-card:hover{
  transform:translateY(-8px) rotateX(4deg);
  border-color:rgba(255,34,48,.55);
  box-shadow:0 30px 70px -28px rgba(255,34,48,.5), 0 0 0 1px rgba(255,34,48,.25);
}
.built-card:hover::after{ box-shadow:inset 0 0 60px -10px rgba(255,34,48,.4); }

/* mock browser frame + live preview shot */
.bc-frame{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0c11; }
.bc-bar{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  background:rgba(8,8,11,.92); border-bottom:1px solid rgba(255,255,255,.07);
  position:absolute; top:0; left:0; right:0; z-index:3;
}
.bc-bar i{ width:9px; height:9px; border-radius:50%; background:#2a2a33; }
.bc-bar i:first-child{ background:#ff5a63; }
.bc-bar .url{
  margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--text-soft);
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bc-shot{
  position:absolute; inset:34px 0 0 0; overflow:hidden;
  background-size:cover; background-position:top center;
  transition:transform 4.5s linear; z-index:1;
}
/* designed fallback that sits behind the live screenshot (shows if it can't load) */
.bc-mono{
  position:absolute; inset:34px 0 0 0; z-index:0;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:84px; letter-spacing:.04em;
  color:rgba(255,255,255,.1);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,34,48,.22), transparent 60%),
    linear-gradient(180deg, #14141b, #0a0a0e);
}
.bc-mono::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
}
.built-card:hover .bc-shot{ transform:scale(1.06); }
/* gradient veil so the brand reads over any screenshot */
.bc-frame::before{
  content:""; position:absolute; inset:34px 0 0 0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(8,8,11,.55) 100%);
}
/* live badge */
.bc-live{
  position:absolute; top:46px; left:14px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:999px;
  background:rgba(8,8,11,.7); border:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.bc-live .dot{ width:6px; height:6px; border-radius:50%; background:#39d98a; box-shadow:0 0 8px #39d98a; animation:livePulse 1.8s infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.bc-meta{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; }
.bc-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.bc-meta h3{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,28px); margin:0; letter-spacing:-.01em; }
.bc-dom{ font-family:var(--mono); font-size:12px; color:var(--text-soft); }
.bc-visit{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#fff; font-weight:700;
}
.bc-visit .arw{ color:var(--red); transition:transform .35s ease; }
.built-card:hover .bc-visit .arw{ transform:translateX(6px); }

@media (max-width:760px){
  .built-grid{ grid-template-columns:1fr; gap:22px; }
  .built-head{ padding:130px 0 26px; }
}