/* ================================
   HOME — retro pixel orbit ring
   ================================ */

@font-face{
  font-family:'FD'; font-weight:700; font-style:normal; font-display:swap;
  src:url('assets/fonts/fredoka-he-700.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'FD'; font-weight:700; font-style:normal; font-display:swap;
  src:url('assets/fonts/fredoka-lat-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC;
}

:root{
  --fd:'FD','Fredoka','Arial Rounded MT Bold',system-ui,sans-serif;   /* chubby comic display font */
  --fs:18px;
  --ltxt:20px;
  --red:#d3112b;
  --ink:#131211;
  --cream:#fffdf6;
}
@media (min-width:900px) and (min-height:560px){
  :root{ --fs:32px; --ltxt:42px; }
}

html.home, body.home{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.home{
  margin:0;
  font-family:var(--fd);
  font-weight:700;
  font-size:var(--fs);
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- stage ---------- */
#stage{
  position:fixed; inset:0;
  overflow:hidden;
  direction:ltr;
  touch-action:none;
  background:var(--paper) url('assets/paper-texture.jpg') center / cover no-repeat;
}
/* faint CRT scanlines over everything */
#stage::after{
  content:''; position:absolute; inset:0; z-index:900; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(19,18,17,.035) 0 2px, transparent 2px 4px);
}

/* ---------- ring items ---------- */
.it{
  position:absolute; left:0; top:0;
  width:calc(var(--W, 200px) * var(--m, 1));
  margin:0; padding:0; border:0; background:none;
  font:inherit; color:inherit; text-decoration:none;
  display:block; opacity:0;
  will-change:transform, opacity;
  -webkit-appearance:none; appearance:none;
}
.it:focus{ outline:none; }
.it:focus-visible .sp{ outline:4px dashed var(--red); outline-offset:8px; }
.it .sp{ display:block; position:relative; animation:bob 1.6s steps(1,end) infinite; }
.it:nth-child(2) .sp{ animation-delay:-.3s; }
.it:nth-child(3) .sp{ animation-delay:-.7s; }
.it:nth-child(4) .sp{ animation-delay:-1.1s; }
.it:nth-child(5) .sp{ animation-delay:-1.4s; }
@keyframes bob{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.it img{ display:block; width:100%; height:auto; -webkit-user-drag:none; }
@media (hover:hover){
  .it:hover .sp{ animation:none; transform:translateY(-10px); }
}
.it.flip .sp{ animation:flip .5s steps(1,end); }
@keyframes flip{
  0%{ transform:scaleX(1); } 20%{ transform:scaleX(.55); } 40%{ transform:scaleX(.1); }
  60%{ transform:scaleX(.55); } 80%{ transform:scaleX(1.12); } 100%{ transform:scaleX(1); }
}

/* text inside the language bubble */
.ltxt{
  position:absolute; left:0; right:0; top:38%;
  transform:translateY(-50%);
  display:flex; justify-content:center; gap:.5em;
  direction:rtl;
  font-size:var(--ltxt, var(--fs)); line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.ltxt b, .ltxt i{ font-weight:700; font-style:normal; }
.lang-he .ltxt .he, .lang-en .ltxt .en{ color:var(--red); }


/* ---------- the old TV (work) ---------- */
.it .tvscr{
  position:absolute; left:13.6%; top:33.06%; width:49.6%; height:45.45%;
  overflow:hidden; border-radius:13% / 14%;
  background:#050505; z-index:1; pointer-events:none;
  animation:tvflick 3.4s steps(1,end) infinite;
}
.it .tvscr img{
  position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.25) contrast(1.15) brightness(.92);
}
/* scanlines + vignette + glass glare */
.it .tvscr::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 2px, transparent 2px 4px);
}
.it .tvscr::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.2) 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.6) 100%);
}
.it .tvscr.cut img{ animation:tvcut .22s steps(4,end); }
@keyframes tvcut{
  0%{ transform:translateX(-7%) scaleY(1.08); filter:saturate(0) contrast(1.8) brightness(2); }
  35%{ transform:translateX(6%) scaleY(.96); filter:saturate(.3) contrast(1.5) brightness(1.4); }
  70%{ transform:translateX(-2%); }
  100%{ transform:none; }
}
@keyframes tvflick{ 0%{opacity:1} 41%{opacity:.93} 43%{opacity:1} 88%{opacity:.95} 90%{opacity:1} }
.it .tvnoise{
  position:absolute; inset:0; width:100%; height:100%; display:none; z-index:2;
  image-rendering:pixelated; background:#111;
}
.it .tvscr.static .tvnoise{ display:block; }
.it .tvosd{
  position:absolute; left:9%; top:8%; z-index:3; display:none;
  font-family:var(--fd); font-weight:700; line-height:1;
  font-size:calc(var(--W, 200px) * .082); letter-spacing:.04em;
  color:#fff; text-shadow:2px 2px 0 var(--red), 0 0 6px rgba(0,0,0,.8);
}
.it .tvscr.static .tvosd{ display:block; }
.it .sp img.tape{
  position:absolute; left:56.8%; top:1.65%; width:36.8%; height:auto;
  transform-origin:50% 100%; z-index:3;
}

/* ---------- Guy's speech bubble ---------- */
#bubble{
  position:absolute; left:0; top:0; z-index:300;
  width:max-content;
  max-width:min(440px, calc(100vw - 56px));
  padding:12px 16px;
  background:var(--cream); color:var(--ink);
  box-shadow:
    0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink),
    8px 8px 0 0 var(--red);
  opacity:0; pointer-events:none;
  line-height:1.25;
}
@media (min-width:900px) and (min-height:560px){ #bubble{ padding:16px 24px; } }
@media not all and (min-width:900px) and (min-height:560px){ #bubble{ max-width:150px; } }
#bubble.on{ opacity:1; pointer-events:auto; }
#bubble .bs{ visibility:hidden; text-align:center; }
#bubble .bt{
  position:absolute; inset:12px 16px;
  text-align:center;
}
@media (min-width:900px) and (min-height:560px){ #bubble .bt{ inset:16px 24px; } }
#bubble .cur{
  display:inline-block; width:calc(var(--fs)/2); height:calc(var(--fs)*.9);
  margin-inline-start:2px; vertical-align:-.1em;
  background:var(--red);
  animation:blink .8s steps(1,end) infinite;
}
#bubble.done .cur{ animation:blink .8s steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
#bubble::before, #bubble::after{
  content:''; position:absolute; top:100%;
}
#bubble::before{
  left:calc(50% - 8px); width:44px; height:24px; background:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 16.667%,81.82% 16.667%,81.82% 33.333%,63.64% 33.333%,63.64% 50%,45.45% 50%,45.45% 66.667%,27.27% 66.667%,27.27% 83.333%,9.09% 83.333%,9.09% 100%,0 100%);
}
#bubble::after{
  left:calc(50% - 4px); width:32px; height:16px; background:var(--cream);
  clip-path:polygon(0 0,100% 0,100% 25%,75% 25%,75% 50%,50% 50%,50% 75%,25% 75%,25% 100%,0 100%);
}

/* ---------- name of the front icon: arched sticker text, red + white ---------- */
#lbl{
  position:absolute; left:0; top:0; z-index:310;
  pointer-events:none; opacity:0;
  --o:3px;
}
#lbl.on{ opacity:1; }
#lblSvg{ display:block; overflow:visible; }
#lbl text{
  font-family:var(--fd); font-weight:700;
  stroke-linejoin:round; stroke-linecap:round; paint-order:stroke fill;
  direction:ltr; unicode-bidi:bidi-override;
  letter-spacing:.02em;
}
#lbl .tc{ fill:#9b1021; stroke:#9b1021; animation:jc .5s steps(1,end) infinite; }   /* hard drop shadow (deep red) */
#lbl .to{ fill:#fff; stroke:#fff; }                                                   /* white sticker outline */
#lbl .tr{ fill:#f0263a; stroke:#f0263a; }                                             /* red fill */
@keyframes jc{
  0%{ transform:translate(calc(var(--o)*1.5),calc(var(--o)*2.3)); }
  34%{ transform:translate(calc(var(--o)*2),calc(var(--o)*2.7)); }
  67%{ transform:translate(calc(var(--o)*1.1),calc(var(--o)*1.9)); }
}
#lbl .lc{ transform-origin:50% 100%; transform-box:fill-box; }
#lbl.pop .lc{
  animation:lpop .6s cubic-bezier(.2,1.6,.35,1) both, lflick 2.4s steps(1,end) .7s infinite;
}
@keyframes lpop{
  0%{ transform:translateY(70px) scale(.12) rotate(-10deg); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:none; opacity:1; }
}
@keyframes lflick{ 0%,86%,91%,100%{ opacity:1; } 88%{ opacity:.3; } 93%{ opacity:.65; } }

/* ---------- box + fx + flash ---------- */
#box{
  position:absolute; left:0; top:0; z-index:60;
  visibility:hidden; pointer-events:none;
}
#box .bx{ position:relative; }
#box .bx.pop{ transform:scale(1.07); }
#box img{ display:block; width:100%; height:auto; -webkit-user-drag:none; }
#box .o{ position:absolute; left:0; top:0; opacity:0; }
#box.open .o{ opacity:1; }
#box.open .c{ opacity:0; }

#fx{
  position:absolute; inset:0; width:100%; height:100%; z-index:320;
  image-rendering:pixelated; image-rendering:crisp-edges;
  pointer-events:none;
}
#flash{
  position:absolute; inset:0; z-index:400; background:#fff;
  opacity:0; pointer-events:none;
}

/* ---------- hint + corner language button ---------- */
#hint{
  position:absolute; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:200; display:flex; justify-content:center; gap:1em;
  color:var(--red); direction:ltr; pointer-events:none;
  opacity:0;
}
#hint.on{ opacity:1; }
#hint.off{ opacity:0; transition:opacity .4s steps(4,end); }

#langCorner{
  position:absolute; left:calc(16px + env(safe-area-inset-left)); top:calc(16px + env(safe-area-inset-top));
  z-index:500;
  display:flex; gap:.5em; direction:rtl;
  padding:8px 12px; margin:0; border:0;
  font:inherit; font-size:var(--fs); line-height:1; color:var(--ink);
  background:var(--cream);
  box-shadow:0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink),
             6px 6px 0 0 var(--red);
  opacity:0; pointer-events:none;
}
#langCorner.on{ opacity:1; pointer-events:auto; }
#langCorner b, #langCorner i{ font-weight:700; font-style:normal; }
.lang-he #langCorner .he, .lang-en #langCorner .en{ color:var(--red); }
#langCorner:focus-visible{ outline:4px dashed var(--red); outline-offset:10px; }
@media (hover:hover){ #langCorner:hover{ background:#fff; } }

/* ---------- boot screen ---------- */
#boot{
  position:absolute; inset:0; z-index:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--fs)*.75);
  background:var(--paper) url('assets/paper-texture.jpg') center / cover no-repeat;
  text-align:center;
}
#boot.out{ opacity:0; transition:opacity .25s steps(3,end); pointer-events:none; }
#boot .t1{ font-size:calc(var(--fs)*2); line-height:1.25; letter-spacing:.04em; }
#boot .t2{ font-size:var(--fs); color:var(--red); margin-bottom:calc(var(--fs)*.75); }
#boot .bar{
  position:relative; width:calc(var(--fs)*11 + 8px); height:calc(var(--fs)*1.25);
  padding:4px; background:var(--cream);
  box-shadow:0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink);
}
#boot .fill{
  height:100%; width:0;
  background:repeating-linear-gradient(90deg, var(--red) 0 calc(var(--fs)*.875), transparent calc(var(--fs)*.875) var(--fs));
}

/* ---------- leaving / zoom ---------- */
.zoomimg{
  position:absolute; left:0; top:0; z-index:700; max-width:none;
  image-rendering:pixelated; image-rendering:crisp-edges;
  pointer-events:none;
}
#veil{
  position:absolute; inset:0; z-index:800; opacity:0; pointer-events:none;
}
body.leaving .it, body.leaving #bubble, body.leaving #hint, body.leaving #langCorner, body.leaving #lbl{
  opacity:0 !important; transition:opacity .3s steps(3,end);
  pointer-events:none;
}
body.leaving .it.zoomed{ visibility:hidden; }

/* ---------- no-JS fallback ---------- */
.ns{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; gap:24px;
  background:var(--paper); font-family:'Aharoni CLM', sans-serif; font-size:32px; }
.ns a{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .it .sp{ animation:none; }
  .it.flip .sp{ animation:none; }
  #bubble .cur{ animation:none; }
  #lbl .tc, #lbl .tm, #lbl.pop .lc{ animation:none; }
  .it .tvscr{ animation:none; }
}