/* ============================================================================
   YahuCode — styles.css
   Rebuilt by hand from the design-canvas export (reference/mockup.html).
   Every value below is transcribed from the export; the export is the source
   of truth for pixels and copy.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:   #0B0B0E;
  --ink:  #ECEAE1;
  --dim:  #8C8D97;
  --line: rgba(236,234,225,.10);
  --card: #131318;
  --card2:#17171D;

  /* "Signature" accent — a single swappable token.
     Export default #3E74E6; the export's alternates are #E0463A and #37B36A. */
  --acc:  #3E74E6;
  --acc2: #7FA6F0;   /* light accent — static fallback, overridden below */

  --red:  #E0463A;
  --grn:  #37B36A;

  --disp: 'Bricolage Grotesque', sans-serif;
  --body: 'Space Grotesk', sans-serif;
  --mono: 'Space Mono', monospace;
  --heb:  'Frank Ruhl Libre', serif;
}
/* The export derives the light accent at runtime by mixing the accent 42%
   toward white; this reproduces that, so swapping --acc re-tints --acc2. */
@supports (color: color-mix(in srgb, red 58%, white)){
  :root{ --acc2: color-mix(in srgb, var(--acc) 58%, #fff); }
}

/* ------------------------------------------------------------------ base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--acc); color:var(--bg) }
button{ font:inherit; color:inherit }
a{ color:var(--acc2) }
a:hover{ color:var(--ink) }
:focus-visible{ outline:2px solid var(--acc2); outline-offset:2px }

/* ------------------------------------------------------------- keyframes */
@keyframes ringbuzz{
  0%,100%{ transform:translate(0,0) }
  25%{ transform:translate(-.7px,0) }
  50%{ transform:translate(.7px,0) }
  75%{ transform:translate(-.4px,0) }
}
@keyframes impactshake{
  0%{ transform:translate(0,0) }
  6%{ transform:translate(0,13px) scale(1.014) }
  14%{ transform:translate(-4px,-7px) }
  24%{ transform:translate(5px,5px) }
  36%{ transform:translate(-4px,-3px) }
  50%{ transform:translate(3px,2px) }
  66%{ transform:translate(-2px,-1px) }
  82%{ transform:translate(1px,1px) }
  100%{ transform:translate(0,0) }
}
@keyframes blast{
  0%{ opacity:0 }
  4%{ opacity:1 }
  22%{ opacity:.9 }
  100%{ opacity:0 }
}
@keyframes fadeup{ to{ opacity:1; transform:none } }

/* --------------------------------------------------------- scroll reveal */
.reveal{ opacity:0; transform:translateY(22px) }
.reveal.in{ animation:fadeup 1s cubic-bezier(.2,.7,.2,1) forwards }
.reveal.d1{ animation-delay:.08s }
.reveal.d2{ animation-delay:.16s }
.reveal.d3{ animation-delay:.24s }
.reveal.d4{ animation-delay:.32s }

/* -------------------------------------------------------------- redaction */
.rd{ position:relative; display:inline }
.rd .bar{
  position:absolute; inset:-1px -3px;
  background:#26262E; cursor:pointer;
  transition:opacity .4s ease, transform .4s ease;
  border-radius:2px;
}
.rd .bar:hover{ background:#33333D }
.rd.open .bar{ opacity:0; transform:scaleX(.15); pointer-events:none }
.rd.open .tx{ color:var(--acc) }

/* ---------------------------------------------------------- site / gate */
#site{ opacity:0; transition:opacity 1.1s ease }
#site.on{ opacity:1 }
#gate{ transition:opacity .8s ease }

/* ------------------------------------------------------------ Hebrew mode
   Order matters: the .disp rule must come after the [data-he] rule so
   display type gets Rubik while everything else gets Frank Ruhl Libre. */
body[data-lang="he"]{
  direction:rtl;
  --disp:'Rubik', sans-serif;
  --body:'Rubik', sans-serif;
}
body[data-lang="he"] [data-he]{ font-family:var(--heb) !important; letter-spacing:normal !important }
body[data-lang="he"] .disp{ font-family:'Rubik', sans-serif !important; font-weight:900 !important }
body[data-lang="he"] .ltr{ direction:ltr }
body[data-lang="he"] .lang-btn{ font-family:var(--mono) }

/* ---------------------------------------------------------------- callbar */
#callbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px clamp(14px,4vw,34px);
  background:rgba(11,11,14,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.cb-left{ display:flex; align-items:center; gap:10px; min-width:0 }
.cb-dot{
  width:8px; height:8px; border-radius:50%; background:var(--grn); flex:none;
  box-shadow:0 0 0 0 rgba(55,179,106,.6);
}
.cb-status{ color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cb-status b{ color:var(--ink) }
.cb-quote{ color:var(--acc2) }
.cb-actions{ display:flex; align-items:center; gap:8px; flex:none }
#cb-lang{
  font-family:var(--heb); font-size:14px; font-weight:700;
  background:rgba(255,255,255,.08);
  border:1px solid var(--acc2); border-radius:999px;
  padding:4px 13px; cursor:pointer; color:var(--acc2);
}
#cb-lang:hover{ background:var(--acc); border-color:var(--acc); color:#fff }
.cb-sources{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-decoration:none;
  background:var(--acc); border:1px solid var(--acc); border-radius:999px;
  padding:5px 13px; color:#fff;
}
.cb-sources:hover{ background:#5385F0; border-color:#5385F0; color:#fff }
#cb-end{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  background:var(--red); border:1px solid var(--red); border-radius:999px;
  padding:5px 13px; cursor:pointer; color:#fff;
}
#cb-end:hover{ background:#C73429; border-color:#C73429 }

/* ------------------------------------------------------------- 01 — hero */
#hero{
  max-width:1080px; margin:0 auto;
  padding:clamp(60px,11vw,150px) clamp(18px,4vw,40px) clamp(40px,7vw,90px);
}
.hero-kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; color:var(--dim) }
#hero h1{
  margin:20px 0 0;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(58px,13vw,180px); line-height:.86; letter-spacing:-.03em;
}
.hero-tag{
  margin:26px 0 0;
  font-size:clamp(19px,2.6vw,30px); line-height:1.4; max-width:20ch; font-weight:500;
}
.accent2{ color:var(--acc2) }
.hero-sub{
  margin:20px 0 0;
  font-size:clamp(14.5px,1.7vw,17px); line-height:1.65; max-width:52ch; color:var(--dim);
}
.hero-row{ margin-top:38px; display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.termbox{
  display:flex; align-items:stretch;
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.termbox code{
  font-family:var(--mono); font-size:13px; color:var(--ink);
  padding:13px 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:min(64vw,440px);
}
#hero-copy{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  background:var(--card2); border:0; border-left:1px solid var(--line);
  padding:0 16px; cursor:pointer; color:var(--dim);
}
#hero-copy:hover{ color:var(--ink) }
.hero-watch{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-decoration:none;
  color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:13px 20px;
}
.hero-watch:hover{ border-color:var(--acc); color:var(--acc2) }

/* ---------------------------------------------------------- 02 — premise */
#premise{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--card);
}
.premise-inner{
  max-width:1280px; margin:0 auto;
  padding:clamp(30px,5vw,56px) clamp(18px,4vw,40px);
  font-family:var(--disp); font-weight:600;
  font-size:clamp(20px,2.7vw,32px); line-height:1.3; letter-spacing:-.01em;
  text-align:center; text-wrap:balance;
}

/* -------------------------------------------------------- 03 — mechanics */
#mechanics{
  max-width:1080px; margin:0 auto;
  padding:clamp(48px,7vw,96px) clamp(18px,4vw,40px);
}
.mech-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim) }
.mech-grid{
  margin-top:32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.card{
  background:var(--bg);
  padding:clamp(24px,3vw,34px);
  display:flex; flex-direction:column; gap:14px;
}
.card-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--acc2) }
.card-code{ font-family:var(--mono); font-size:13px; line-height:1.75 }
.card-clearance{ font-family:var(--mono); font-size:12.5px; line-height:1.9 }
.card p{ margin:0; font-size:14px; line-height:1.6; color:var(--dim) }
.dim{ color:var(--dim) }
.heb-word{ font-family:var(--heb); color:var(--acc2) }

/* ------------------------------------------------------------- 04 — demo */
#demo{ border-top:1px solid var(--line); background:var(--card) }
.demo-inner{
  max-width:1120px; margin:0 auto;
  padding:clamp(48px,7vw,96px) clamp(18px,4vw,40px);
}
#demo h2{
  margin:0;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(30px,5vw,54px); line-height:1; letter-spacing:-.02em;
}
.demo-sub{
  margin:14px 0 0;
  font-size:clamp(14.5px,1.7vw,17px); line-height:1.6; color:var(--dim); max-width:52ch;
}
.demo-wrap{ margin-top:30px }
#d-term{
  background:#0E0E13; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  max-width:460px; margin:0 auto;
  transition:max-width .75s cubic-bezier(.4,0,.2,1), margin-left .75s cubic-bezier(.4,0,.2,1);
}
.term-titlebar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.tl{ width:11px; height:11px; border-radius:50% }
.tl-r{ background:#E0463A }
.tl-y{ background:#E8B23A }
.tl-g{ background:#37B36A }
.term-name{ margin-left:10px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim) }
.diffgrid{ display:flex; align-items:stretch }
.pane{ flex:1 1 0; background:#0E0E13; padding:16px 18px; min-width:0 }
.pane-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  margin-bottom:12px; white-space:nowrap;
}
.pane-label-src{ color:#E0463A }
.pane-label-off{ color:var(--grn) }
.code{
  font-family:var(--mono); font-size:clamp(11px,1.35vw,13px); line-height:1.95;
  color:var(--ink); white-space:nowrap;
}
.ln{ display:inline-block; width:1.8em; color:#54555F }
.cmt{ color:#54555F }
.bad{ color:var(--red) }
.spun{ color:var(--acc2) }
#d-right{
  overflow:hidden; opacity:0; max-width:0;
  border-left:1px solid var(--line);
  transition:max-width .75s cubic-bezier(.4,0,.2,1), opacity .55s ease .15s;
}
.d-line{ transition:opacity .3s ease }
#d-out{
  padding:14px 18px; border-top:1px solid var(--line); display:none;
  font-family:var(--mono); font-size:clamp(11.5px,1.4vw,13.5px); line-height:1.7;
}
.run-row{
  display:flex; flex-wrap:nowrap; gap:12px; align-items:center;
  padding:14px 16px; border-top:1px solid var(--line);
}
#d-run{
  flex:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  background:var(--acc); color:#fff; border:0; border-radius:8px;
  padding:11px 22px; cursor:pointer; font-weight:700;
}
#d-run:hover{ background:#5385F0 }
#d-runstat{
  flex:1; min-width:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.passed{ color:#5FCF92 }
.impressed{ color:var(--acc2); font-style:italic }

/* -------------------------------------------------------------- 05 — cta */
#cta{
  max-width:1080px; margin:0 auto;
  padding:clamp(56px,9vw,120px) clamp(18px,4vw,40px);
  text-align:center;
}
#cta h2{
  margin:0;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(34px,7vw,84px); line-height:.95; letter-spacing:-.03em;
  text-transform:uppercase;
}
.cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.cta-primary{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-decoration:none;
  color:#fff; background:var(--acc); border-radius:10px; padding:15px 28px;
}
.cta-primary:hover{ background:#5385F0; color:#fff }
.cta-secondary{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-decoration:none;
  color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:15px 28px;
}
.cta-secondary:hover{ border-color:var(--acc); color:var(--acc2) }

/* ----------------------------------------------------------------- footer */
footer{ border-top:1px solid var(--line); padding:clamp(30px,5vw,54px) clamp(18px,4vw,40px) }
.foot-inner{
  max-width:1080px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--dim);
}
/* Owner-requested addition (not in the mockup): a short note on what
   YahuCode is, tucked under the footer line. */
.foot-about{
  max-width:1080px; margin:22px auto 0;
  font-size:12.5px; line-height:1.7; color:var(--dim);
}

/* ---------------------------------------------------- gate — incoming call */
#gate{ position:fixed; inset:0; z-index:100; background:#000; overflow:hidden }
.gate-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 46% at 50% 44%, rgba(36,40,58,.22), transparent 72%);
}
#g-lang{
  position:absolute; top:16px; right:16px; z-index:6;
  font-family:var(--heb); font-size:14px;
  background:rgba(20,20,26,.7); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:5px 14px; cursor:pointer; color:#ECEAE1;
}
#g-lang:hover{ border-color:var(--acc) }

/* call view */
#g-call{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:14px; overflow-y:auto;
}
#g-frame{
  position:relative;
  background:linear-gradient(150deg,#2C2E35,#0A0A0D 44%);
  border-radius:52px; padding:10px;
  box-shadow:0 46px 110px rgba(0,0,0,.9), 0 10px 34px rgba(0,0,0,.6),
             inset 0 0 0 1.5px rgba(255,255,255,.09), inset 0 2px 3px rgba(255,255,255,.16);
}
.side{ position:absolute; width:3px; border-radius:2px; background:#34363E }
.side-r{ right:-2px; top:27%; height:62px }
.side-l1{ left:-2px; top:22%; height:30px }
.side-l2{ left:-2px; top:32%; height:30px }
.screen{
  position:relative;
  height:min(82svh,700px); aspect-ratio:278/490;
  overflow:hidden; border-radius:42px; user-select:none;
  background:#12213B;
}
.screen img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 16%;
}
.screen-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 24%,
             rgba(255,255,255,0) 80%, rgba(255,255,255,.05) 100%);
}
.screen-notch{
  position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:92px; height:27px; border-radius:16px; background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events:none; z-index:4;
}
.screen-topgrad{
  position:absolute; left:0; right:0; top:0; height:40%;
  background:linear-gradient(rgba(5,7,12,.74), transparent); pointer-events:none;
}
.caller{
  position:absolute; left:0; right:0; top:0;
  padding:56px 18px 0; text-align:center; pointer-events:none;
}
.caller-name{
  font-family:var(--body); font-weight:700; font-size:clamp(30px,5.4vw,50px);
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55); letter-spacing:-.01em;
}
.caller-sub{
  font-family:var(--body); font-size:clamp(13px,1.7vw,16px);
  color:rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(0,0,0,.6); margin-top:3px;
}
.screen-botgrad{
  position:absolute; left:0; right:0; bottom:0; height:32%;
  background:linear-gradient(transparent, rgba(6,8,12,.74)); pointer-events:none;
}
.call-actions{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 9% 30px;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.call-action{ display:flex; flex-direction:column; align-items:center; gap:9px }
.call-action > span{
  font-family:var(--body); font-size:13px; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.g-btn{
  width:clamp(54px,9vw,70px); height:clamp(54px,9vw,70px);
  border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.g-btn:hover{ filter:brightness(1.12) }
.g-decline{ background:#FF3B30 }
.g-accept{ background:#34C759 }
.gate-caption{
  text-align:center; margin-top:14px;
  font-family:var(--mono); font-size:clamp(13px,1.7vw,15px); font-weight:700;
  letter-spacing:.16em; line-height:1.6;
}
.gate-caption > span{ color:#F2EEE6; text-shadow:0 1px 10px rgba(0,0,0,.7) }

/* bomb view */
#g-bomb{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; text-align:center;
  padding:24px; overflow:hidden; background:#000;
}
#g-redglow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity 1.1s ease;
  background:radial-gradient(125% 96% at 50% 50%, transparent 48%, rgba(150,22,16,.55) 100%);
}
.bomb-stack{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:16px; max-width:28ch;
}
#g-bombkicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.36em; color:#D24A40;
  min-height:14px; opacity:0; transition:opacity .5s ease;
}
#g-bombcap{
  font-family:var(--mono); font-weight:400; font-size:clamp(15px,2.1vw,23px);
  color:#DAD7CE; letter-spacing:.1em; line-height:1.7; text-transform:uppercase;
}
#g-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6 }
#g-smoke{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity 1.6s ease; z-index:5;
  background:radial-gradient(85% 78% at 50% 56%, rgba(26,22,18,0), rgba(5,4,3,.92) 100%);
}

/* epitaph view */
#g-epitaph{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:16px; padding:24px; background:#050506;
}
.epi-kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.28em; color:#6C6D77 }
.epi-big{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(38px,8vw,96px); line-height:.9; letter-spacing:-.03em; color:#fff;
}
.epi-note{ font-family:var(--body); font-style:italic; font-size:clamp(15px,2vw,20px); color:var(--acc2) }
#g-retry{
  margin-top:20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:13px 26px; cursor:pointer; color:#fff;
}
#g-retry:hover{ border-color:var(--acc); color:var(--acc2) }

/* --------------------------------------------------- optional film grain
   The export defines a "grain" prop (default OFF) but ships no overlay
   implementation; this minimal static overlay activates only if you add
   class="grain" to <body>. TODO: confirm desired grain look with owner. */
body.grain::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
  .reveal.in{ animation:none }
  #site{ transition:none }
  #d-term, #d-right, .d-line, .rd .bar{ transition:none }
}