/* ================================
   WORK PAGE: old TV + VHS shelf + CRT frame
   ================================ */
@font-face{
  font-family:'Scrawl'; font-weight:400; font-style:normal; font-display:swap;
  src:url('assets/fonts/gveret-levin-hebrew-400-normal.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+20AA,U+FB1D-FB4F;
}
@font-face{
  font-family:'Scrawl'; font-weight:400; font-style:normal; font-display:swap;
  src:url('assets/fonts/gveret-levin-latin-400-normal.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;
}
@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{ --scrawl:'Scrawl','Gveret Levin','Comic Sans MS',cursive; --fd:'FD','Fredoka',system-ui,sans-serif; --red:#d3112b; }

/* ---------- top: CV, then the title, then the TV in the middle ---------- */
.cv-top{ display:flex; justify-content:center; }
.cv-top .work-intro{ width:100%; max-width:780px; border-bottom:0; padding-bottom:0; margin-bottom:0; }
.cv-label{ font-family:var(--mono); font-style:italic; font-weight:700; font-size:30px; letter-spacing:.06em; color:var(--ink); text-align:center; margin:0 0 14px; line-height:1; }

/* ---------- the bookcase (CV): wood shelves, DVDs, one prop per job ---------- */
.bookcase{
  --u:3px; --wood1:#7a4128; --wood2:#4a2218; --wood3:#2f130e;
  position:relative; padding:calc(var(--u)*3) calc(var(--u)*3) 0; margin:0 auto;
  background:linear-gradient(180deg,#0c0304,#14060a);
  border:calc(var(--u)*3) solid var(--wood2);
  border-image:none; box-shadow:inset 0 0 0 calc(var(--u)*.7) var(--wood3), 0 0 0 calc(var(--u)*.7) #070203, 0 14px 30px rgba(0,0,0,.5);
}
.bc-shelf{ position:relative; }
.bc-items{ direction:ltr; display:flex; align-items:flex-end; gap:calc(var(--u)*.6); height:calc(var(--u)*24); padding:0 calc(var(--u)*2); overflow:hidden; }
.bc-board{
  position:relative; display:flex; align-items:center; gap:14px; min-height:calc(var(--u)*12.5);
  padding:calc(var(--u)*2.8) 16px calc(var(--u)*1) 16px; margin:0 calc(var(--u)*-3);
  background:linear-gradient(180deg,#a2603a 0 calc(var(--u)*1), var(--wood1) calc(var(--u)*1) calc(var(--u)*2), var(--wood2) calc(var(--u)*2) 100%);
  box-shadow:0 calc(var(--u)*1.2) 0 rgba(0,0,0,.45);
  color:#f3e1cc; font-size:18px; line-height:1.3;
}
.bc-board::after{ content:''; position:absolute; inset:calc(var(--u)*2) 0 0 0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 calc(var(--u)*17), rgba(0,0,0,.14) calc(var(--u)*17) calc(var(--u)*17.7)); }
.bc-board .cr-year{ color:#ff7d8a; font-size:16px; text-shadow:0 1px 0 rgba(0,0,0,.6); }
.bc-board .cr-desc{ text-wrap:balance; font-size:18px; text-shadow:0 1px 0 rgba(0,0,0,.55); }
a.bc-shelf{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
a.bc-shelf .prop{ transition:transform .2s; }
a.bc-shelf:hover .prop, a.bc-shelf:focus-visible .prop{ transform:translateY(-4px); }
a.bc-shelf:hover .cr-desc{ text-decoration:underline; text-underline-offset:4px; }
a.bc-shelf:focus-visible{ outline:2px solid #ff7d8a; outline-offset:3px; }
.bc-shelf + .bc-shelf{ margin-top:calc(var(--u)*1.2); }

.dvd, .book{
  position:relative; flex:none; background:var(--c); height:calc(var(--u)*var(--h)); transform-origin:bottom left;
  border:calc(var(--u)*.55) solid #080203; border-bottom:0;
  box-shadow:inset calc(var(--u)*.9) 0 0 rgba(255,255,255,.14), inset calc(var(--u)*-.9) 0 0 rgba(0,0,0,.3);
}
.dvd{ width:calc(var(--u)*5); transform:rotate(var(--r,0deg)); }
.dvd::before{ content:''; position:absolute; top:calc(var(--u)*1.2); left:calc(var(--u)*.5); right:calc(var(--u)*.5); height:calc(var(--u)*1.6); background:var(--a); }
.dvd::after{ content:''; position:absolute; top:calc(var(--u)*5); bottom:calc(var(--u)*4); left:calc(50% - var(--u)*.5); width:var(--u);
  background:repeating-linear-gradient(180deg, var(--a) 0 calc(var(--u)*1.1), transparent calc(var(--u)*1.1) calc(var(--u)*2.2)); opacity:.85; }
.book{ width:calc(var(--u)*var(--w)); }
.book::before{ content:''; position:absolute; left:0; right:0; top:calc(var(--u)*2); height:calc(var(--u)*.9); background:var(--a); box-shadow:0 calc(var(--u)*1.6) 0 var(--a); opacity:.9; }
.book::after{ content:''; position:absolute; left:calc(var(--u)*1); right:calc(var(--u)*1); bottom:calc(var(--u)*3); height:calc(var(--u)*2.6); background:var(--a); opacity:.28; }
.stack{ flex:none; display:flex; flex-direction:column-reverse; align-items:flex-start; width:calc(var(--u)*15); }
.flat{ width:calc(var(--u)*var(--w)); height:calc(var(--u)*4); background:var(--c); border:calc(var(--u)*.55) solid #080203; border-bottom-width:0;
  box-shadow:inset 0 calc(var(--u)*-.9) 0 rgba(0,0,0,.28), inset calc(var(--u)*-2) 0 0 var(--a); margin-bottom:calc(var(--u)*-.55); }
.flat:nth-child(2){ margin-left:calc(var(--u)*1.5); } .flat:nth-child(3){ margin-left:calc(var(--u)*-.5); }
.prop{ flex:none; width:calc(var(--u)*var(--w)); height:auto; image-rendering:pixelated; image-rendering:crisp-edges; margin:0 calc(var(--u)*1); }
@media (max-width:640px){
  .bookcase{ --u:2.5px; }
  .cv-label{ font-size:26px; }
  .bc-board{ gap:10px; padding-left:12px; padding-right:12px; font-size:15px; }
  .bc-board .cr-desc{ font-size:15px; }
  .bc-board .cr-year{ font-size:13.5px; }
}
.sec-work .page-head{ text-align:center; min-height:0; padding:34px 0 8px; }
.sec-work .page-head h1{ display:inline-block; min-height:1.3em; }
.tv-wrap{ display:flex; justify-content:center; }
.tvset{
  position:relative; width:min(660px, 100%); container-type:inline-size;
  margin:6px auto 0; direction:ltr;
}
.tvset .tvbody{ display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; }
.tvset .tvscr{
  position:absolute; left:13.6%; top:33.06%; width:49.6%; height:45.45%;
  overflow:hidden; border-radius:13% / 14%; background:#050505;
  animation:tvflick 3.4s steps(1,end) infinite;
}
.tvset .tvscr img{
  position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.25) contrast(1.15) brightness(.92);
  /* a little real curvature on the glass */
  transform:perspective(500px) scale(1.04);
}
.tvset .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);
}
.tvset .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 50%, rgba(0,0,0,.65) 100%);
}
.tvset .tvscr.cut img{ animation:tvcut .24s 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:perspective(500px) scale(1.04); }
}
@keyframes tvflick{ 0%{opacity:1} 41%{opacity:.93} 43%{opacity:1} 88%{opacity:.95} 90%{opacity:1} }
.tvset .tvnoise{ position:absolute; inset:0; width:100%; height:100%; display:none; z-index:2; image-rendering:pixelated; background:#111; }
.tvset .tvscr.static .tvnoise{ display:block; }
.tvset .tvosd{
  position:absolute; left:9%; top:8%; z-index:3; display:none;
  font-family:var(--fd); font-weight:700; line-height:1; font-size:8cqw; letter-spacing:.04em;
  color:#fff; text-shadow:2px 2px 0 var(--red), 0 0 6px rgba(0,0,0,.8);
}
.tvset .tvscr.static .tvosd, .tvset .tvscr.play .tvosd{ display:block; }
/* off / waiting: dim grey flicker + a line asking for a tape */
.tvset .tvscr.idle .tvnoise{ display:block; opacity:.9; }
.tvset .tvscr.idle img{ display:none; }
.tvset .tvidle{
  position:absolute; left:6%; right:6%; top:50%; transform:translateY(-50%); z-index:3; display:none;
  font-family:var(--sans); font-weight:700; font-size:9cqw; line-height:1.1; text-align:center; direction:rtl; letter-spacing:.02em;
  color:rgba(235,235,240,.82); text-shadow:0 0 8px rgba(200,200,215,.35), 2px 2px 0 rgba(0,0,0,.6);
  animation:tvidle 2.6s steps(1,end) infinite;
}
html[lang="en"] .tvset .tvidle{ direction:ltr; font-family:var(--fd); font-size:6cqw; letter-spacing:.02em; white-space:pre-line; }
.tvset .tvscr.idle .tvidle{ display:block; }
@keyframes tvidle{ 0%{opacity:.85} 46%{opacity:.6} 48%{opacity:.9} 80%{opacity:.75} 83%{opacity:.5} 85%{opacity:.88} }
.tvset .tvcap{
  position:absolute; left:9%; right:9%; bottom:7%; z-index:3; display:none;
  font-family:var(--scrawl); font-size:7.2cqw; line-height:1; color:#fff; text-align:center;
  text-shadow:2px 2px 0 var(--red), 0 0 6px rgba(0,0,0,.9);
}
.tvset .tvscr.play .tvcap{ display:block; }

/* ---------- the shelf: every project is a VHS tape ---------- */
.shelf{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:38px 28px;
  padding:30px 0 40px; margin-top:12px; border-top:1px solid var(--line);
}
@media (max-width:640px){
  .shelf{ grid-template-columns:1fr; gap:30px; }
}

.tape{ position:relative; container-type:inline-size; transition:transform .25s cubic-bezier(.3,.75,.25,1); }
@media (hover:hover){ .tape:hover{ transform:translateY(-6px) rotate(-.8deg); } }
.tape.gone{ visibility:hidden; }

.face{
  display:block; position:relative; margin:0; text-align:inherit; font:inherit; color:inherit; text-decoration:none;
  padding:6cqw 6cqw 5.2cqw;
  border:3px solid #0b080c; border-radius:3.2cqw;
  background:var(--case, #28232b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.45), 0 6px 0 #07050a, 0 14px 20px rgba(0,0,0,.5);
  cursor:pointer;
}
.tape:nth-child(4n+1){ --case:#28232b; }
.tape:nth-child(4n+2){ --case:#3a1219; }
.tape:nth-child(4n+3){ --case:#2c2024; }
.tape:nth-child(4n+4){ --case:#4a141c; }
.face::before, .face::after{                 /* corner screws */
  content:''; position:absolute; top:2cqw; width:2cqw; height:2cqw; border-radius:50%; background:#8f8a96; box-shadow:inset -1px -1px 0 rgba(0,0,0,.4);
}
.face::before{ left:2.4cqw; } .face::after{ right:2.4cqw; }
.face:focus-visible{ outline:3px dashed #fff; outline-offset:4px; }

/* the whole picture, uncropped (16:10 frame) */
.pic{
  position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden;
  background:#000; border:3px solid #f4efe2; border-radius:2px; box-shadow:0 0 0 2px #0b080c;
}
.pic img{ width:100%; height:100%; object-fit:contain; display:block; }
.pic.yt img{ object-fit:cover; transform:scale(1.12); }           /* youtube thumbs carry black bars: crop only those */
.pic.noimg{ background:radial-gradient(ellipse at 50% 40%, #6a1020 0%, #17080b 75%); display:flex; align-items:center; justify-content:center; }
.pic.noimg::after{ content:'\25B6'; color:#f4efe2; font-size:12cqw; opacity:.8; }
.pic.noimg img{ display:none; }

/* handwritten label: project + my role */
.label{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6cqw;
  margin-top:3.4cqw; padding:2cqw 3cqw 2.2cqw;
  background:#f4efe2; border-top:3px solid var(--red); text-align:center;
  transform:rotate(-.9deg);
}
.tape:nth-child(even) .label{ transform:rotate(.7deg); }
.label .name{ font-family:var(--scrawl); font-size:6.4cqw; line-height:1; color:#b3061b; }
.label .role{ font-family:var(--scrawl); font-size:4.8cqw; line-height:1; color:#2a2428; }

.reels{
  display:flex; align-items:center; justify-content:space-around; width:48%; height:6.6cqw; margin:3.6cqw auto 0;
  background:#4b4650; border:2px solid #0b080c; border-radius:2px;
}
.reels i{ width:4.4cqw; height:4.4cqw; border-radius:50%; background:#f4efe2; box-shadow:inset 0 0 0 1.1cqw #0b080c, inset 0 0 0 1.5cqw #f4efe2; }


/* the clone that flies into the TV */
.tape-fly{ position:fixed; margin:0; z-index:90; pointer-events:none; transform-origin:50% 50%; }
.tape-fly .face{ box-shadow:0 18px 30px rgba(0,0,0,.55); }

/* ---------- CRT frame: rounded screen, soft dark edges, faint scanlines + flicker ---------- */
.crt{
  position:fixed; inset:8px; z-index:60; pointer-events:none;
  border-radius:34px / 30px;
  box-shadow:0 0 0 100vmax #040102, inset 0 0 120px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.04);
}
.crt::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
  opacity:.32; animation:crtflick 5.5s steps(1,end) infinite;
}
@keyframes crtflick{ 0%{opacity:.32} 37%{opacity:.25} 39%{opacity:.4} 71%{opacity:.28} 73%{opacity:.34} }
@media (max-width:640px){ .crt{ inset:4px; border-radius:22px / 20px; box-shadow:0 0 0 100vmax #040102, inset 0 0 70px rgba(0,0,0,.6); } }
@media (prefers-reduced-motion: reduce){
  .tvset .tvscr, .crt::after{ animation:none; }
  .tape{ transition:none; }
}