/* ============================================================
   IOSUA HANC - două filme
   Sticla refractă fizic (feDisplacementMap în backdrop-filter).
   Mișcarea urmează curbele din design engineering: ease-out puternic,
   sub 300ms pe UI, niciodată din scale(0), hover doar pe pointer fin.
   ============================================================ */

@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
 src:url('../fonts/schibsted-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
 src:url('../fonts/schibsted-latin-ext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:300 700;font-display:swap;
 src:url('../fonts/azeret-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:300 700;font-display:swap;
 src:url('../fonts/azeret-latin-ext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  color-scheme:dark;
  --deep:#060706; --ink:#0a0b0a;
  --text:#f2f1ec; --dim:#b9bcb6; --faint:#8e938c;
  --rim:rgba(255,255,255,.10);
  --spec:rgba(255,255,255,.20);
  --r:20px; --r-lg:28px; --r-pill:100px;

  --fs-label:0.75rem; --fs-code:0.875rem; --fs-body:1.0625rem;
  --fs-lead:1.375rem; --fs-h:2rem; --fs-d:clamp(2.5rem,5.6vw,4.5rem);

  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Curbele implicite din CSS sunt prea slabe. Astea au punch. */
  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
  /* Arc amortizat esantionat ca linear(): depasire de ~7%, exact cat
     sa se simta ca aluneca, nu ca sare. Bezier-ul nu poate depasi 1. */
  --spring:linear(0,0.0434,0.1463,0.2771,0.4143,0.5445,0.6599,0.7572,0.8357,0.8964,0.9416,0.9736,0.9952,1.0087,1.0162,1.0194,1.0198,1.0185,1.0162,1.0135,1.0108,1.0083,1.0061,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--deep);color:var(--text);font-family:var(--sans);
 font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;overflow-x:clip;}
body.locked{overflow:hidden;}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3,p{margin:0;}

::selection{background:var(--text);color:var(--ink);}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--deep);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border:2px solid var(--deep);border-radius:6px;}
html{scrollbar-color:rgba(255,255,255,.14) var(--deep);scrollbar-width:thin;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

.skip{position:fixed;top:10px;left:10px;z-index:500;padding:11px 18px;border-radius:var(--r-pill);
 background:var(--text);color:var(--ink);font-family:var(--mono);font-size:var(--fs-label);
 font-weight:700;transform:translateY(-180%);transition:transform .2s var(--out);}
.skip:focus-visible{transform:translateY(0);}

/* ---- fundalul pe care refractă sticla: propriile filme ---- */
.bg{position:fixed;inset:-6%;z-index:0;overflow:hidden;}
.bg video{width:100%;height:100%;object-fit:cover;opacity:.42;
 filter:saturate(1.05) brightness(.66);transform:scale(1.06);}
.bg::after{content:'';position:absolute;inset:0;background:
 radial-gradient(120% 80% at 60% 0%,rgba(0,0,0,0),rgba(6,7,6,.6) 55%,rgba(6,7,6,.92)),
 linear-gradient(to bottom,rgba(6,7,6,.5),rgba(6,7,6,.18) 30%,rgba(6,7,6,.8));}

.shell{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 clamp(14px,3vw,28px);}

/* ---- sticla ---- */
.glass{
  position:relative;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.05) 46%,rgba(255,255,255,.03));
  backdrop-filter:blur(var(--gb,14px)) saturate(185%) url(#lg);
  -webkit-backdrop-filter:blur(var(--gb,14px)) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),
             inset 0 0 0 1px var(--rim),0 26px 64px -26px rgba(0,0,0,.85);
  isolation:isolate;
  transition:transform .16s var(--out),box-shadow .24s var(--out);
}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
 background:radial-gradient(280px circle at var(--px,50%) var(--py,0%),
   var(--spec),rgba(255,255,255,.05) 42%,transparent 72%);
 opacity:var(--sheen,0);transition:opacity .24s var(--out);}
.glass > *{position:relative;z-index:2;}
.glass.press{transform:scale(.985);}
.glass.strong{backdrop-filter:blur(var(--gb,14px)) saturate(200%) url(#lg-strong);
 -webkit-backdrop-filter:blur(calc(var(--gb,14px) * 1.5)) saturate(200%);}

@supports not (backdrop-filter: url(#lg)){ .glass{backdrop-filter:blur(18px) saturate(190%);} }

/* Sticla ramane pornita si cand sistemul cere transparenta redusa (macOS
   Accessibility, iOS Reduce Transparency). E o alegere asumata: efectul e
   identitatea vizuala a site-ului, nu un ornament. Contrastul textului nu
   depinde de el — literele stau pe .glass > * cu fundal propriu. */

/* ---- nav ---- */
.nav{position:sticky;top:clamp(10px,1.6vw,18px);z-index:60;margin-top:clamp(10px,1.6vw,18px);
 border-radius:var(--r-lg);display:flex;align-items:center;gap:20px;padding:11px 11px 11px 20px;--gb:18px;}
/* Monograma JH, vectoriala: mosteneste culoarea si ramane clara la orice zoom. */
.mark{display:flex;align-items:center;color:var(--text);
 /* Zona de apasare creste la ~47x50, peste minimul de 44 pentru atingere.
    Marginea negativa anuleaza padding-ul din asezare, deci sigla nu se misca. */
 padding:12px 14px;margin:-12px -14px;
 border-radius:var(--r-pill);
 transition:opacity .18s var(--out),transform .16s var(--out);}
.mark:active{transform:scale(.94);}
.mark svg{display:block;height:26px;width:auto;}
@media (hover:hover) and (pointer:fine){ .mark:hover{opacity:.72;} }
.mark:active{opacity:.6;}
.nav__links{position:relative;display:grid;grid-auto-flow:column;
 grid-auto-columns:1fr;gap:4px;margin:0 auto;}
.nav__links a{position:relative;z-index:2;text-align:center;
 font-size:var(--fs-label);font-weight:600;
 letter-spacing:.11em;color:var(--dim);padding:13px 26px;border-radius:var(--r-pill);
 transition:color .22s var(--out);}
.nav__links a[aria-current]{color:var(--text);}

/* Ovalul care arata sectiunea curenta, permanent vizibil ca la o bara de taburi.
   E un element de dimensiunea unui tab, deci conturul lui inconjoara chiar ovalul.
   Se muta DOAR prin translate3d: ramane pe compositor, fara repaint pe cadru.
   De aceea taburile sunt coloane egale (grid 1fr) — latimea nu se mai schimba
   intre ele, deci nu trebuie animata niciodata. */
.nav__pill{
  position:absolute; left:0; top:0; bottom:0; z-index:1; pointer-events:none;
  width:0;                      /* setata din JS la latimea unui tab */
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 0 0 1px rgba(255,255,255,.14),
             0 2px 8px rgba(0,0,0,.18);
  border-radius:var(--r-pill);
  will-change:transform;
  transition:transform 431ms var(--spring);
}
.nav__pill.jump{ transition:none; }
.nav__right{display:flex;align-items:center;gap:9px;}

.lang{display:flex;border-radius:var(--r-pill);overflow:hidden;background:rgba(255,255,255,.06);
 box-shadow:inset 0 0 0 1px var(--rim);}
.lang button{padding:8px 11px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
 color:var(--faint);transition:color .16s var(--out),background .16s var(--out);}
.lang button.on{background:rgba(255,255,255,.9);color:var(--ink);}

.pill{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);
 padding:10px 11px 10px 19px;font-size:var(--fs-label);font-weight:700;letter-spacing:.11em;
 --gb:10px;white-space:nowrap;}
.pill i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
 background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--rim);
 transition:background .16s var(--out);}
.pill svg{width:13px;height:13px;}

/* ---- hero ---- */
.hero{padding:clamp(48px,9vw,120px) 0 clamp(30px,5vw,64px);
 display:grid;grid-template-columns:minmax(0,1fr) auto;
 gap:clamp(24px,5vw,64px);align-items:start;}
.hero__line{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
 display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;}
/* Numele, nu doar monograma: la prima privire trebuie sa se stie al cui e site-ul.
   Il tinem peste marimea de eticheta, altfel se citeste tot ca o sub-nota. */
.hero__name{color:var(--text);font-weight:700;text-transform:uppercase;
 font-size:var(--fs-lead);letter-spacing:.02em;line-height:1;}
.hero__role{color:var(--dim);}
.hero__role::before{content:'';display:inline-block;width:16px;height:1px;
 background:currentColor;vertical-align:middle;margin-right:12px;opacity:.6;}
.hero h1{margin:20px 0 0;font-size:var(--fs-d);line-height:1.02;letter-spacing:-.042em;
 text-wrap:balance;}
.hero__sub{margin:24px 0 0;color:var(--dim);max-width:52ch;text-wrap:pretty;}

/* Semnatura, in dreapta hero-ului. Sta pe fundalul liber, deci nu inghesuie
   textul si umple golul fara sa adauge inca un bloc de continut. */
/* Coborata pe linia de baza a paragrafului, ca o semnatura pusa sub text. */
.hero__sign{color:var(--text);opacity:.9;align-self:end;padding-bottom:2px;}
.sign{display:block;width:clamp(255px,31vw,430px);height:auto;overflow:visible;
 /* Inclinarea sta INAUNTRUL svg-ului, nu pe element: asa caseta de layout
    coincide cu conturul vizibil, iar alinierea la baza textului tine la
    orice latime. Rotita din CSS, caseta ramanea dreapta si semnatura
    atarna sub ea. */
 /* umbra subtila: desprinde cerneala de fundal fara sa se vada ca efect */
 /* umbra mai discreta: la o linie subtire, una groasa o ingroasa optic */
 filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));}
/* Se scrie singura la incarcare. Lungimea fiecarui traseu o masoara JS-ul,
   ca sa mearga oricat de lung ar fi conturul. */
/* Se scrie ca de mana, trasatura cu trasatura, de la stanga la dreapta.
   Cheia: pornim conturul cu 9 unitati DINCOLO de capatul traseului. La offset
   egal cu lungimea, portiunea desenata e zero dar capatul rotund tot se
   randeaza — si de acolo veneau punctele risipite peste tot inainte sa inceapa
   scrisul. Impins afara, nu exista niciun capat de desenat.
   'both' + un 'from' explicit tin traseul invizibil pe toata intarzierea lui. */
.sign__p{stroke-dasharray:var(--len,1200);stroke-dashoffset:0;}
html.sign-draw .sign__p{
  animation-name:signdraw;animation-timing-function:linear;
  animation-fill-mode:both;}
@keyframes signdraw{
  from{stroke-dashoffset:var(--off,1210);}
  to{stroke-dashoffset:0;}
}
@media (prefers-reduced-motion:reduce){
  html.sign-draw .sign__p{animation:none;stroke-dashoffset:0;}
}
@media (max-width:820px){
  /* Semnatura iese de pe telefon. Incaputa langa paragraf doar la ~128px, iar
     la marimea aia isi pierde tocmai ce o face buna: se citeste ca o zgarietura,
     nu ca o semnatura. Regulile ei raman mai jos, deci se poate reactiva. */
  .hero{grid-template-columns:1fr;}
  .hero__sign{display:none;}
  .hero__sub{margin-top:24px;}
}

/* ---- filme ---- */
.films{display:grid;gap:clamp(20px,3vw,40px);padding-bottom:clamp(40px,7vw,90px);}
.film{border-radius:var(--r-lg);overflow:hidden;padding:12px;--gb:16px;}
.film__frame{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#000;cursor:pointer;}
.film__frame video,.film__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film__frame video{opacity:0;transition:opacity .32s var(--out);}
.film.on .film__frame video{opacity:1;}
.film__frame::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0) 52%);}
.film__play{position:absolute;left:50%;top:50%;z-index:3;width:74px;height:74px;border-radius:50%;
 display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);
 transform:translate(-50%,-50%) scale(1);
 transition:transform .18s var(--out),opacity .24s var(--out);
 box-shadow:0 14px 40px -12px rgba(0,0,0,.85);}
.film__play svg{width:22px;height:22px;margin-left:3px;}
.film.on .film__play{opacity:0;transform:translate(-50%,-50%) scale(.94);pointer-events:none;}
/* Bara de progres: pe toata baza cadrului, lipita de margine.
   Zona de click e mai inalta decat linia, ca sa se poata prinde usor. */
.film__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:22px; display:flex; align-items:flex-end;
  cursor:pointer; touch-action:none;
}
.film__bar::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.18);
}
.film__prog{
  position:relative; display:block; width:100%; height:3px;
  background:var(--text); transform:scaleX(0); transform-origin:left center;
  will-change:transform;
}
.film.on .film__bar::before{ background:rgba(255,255,255,.22); }

.film__meta{position:absolute;left:20px;right:20px;bottom:26px;z-index:3;
 display:flex;align-items:flex-end;justify-content:space-between;gap:18px;}
.film__meta h2{font-size:var(--fs-lead);font-weight:700;letter-spacing:-.02em;}
.film__meta p{margin-top:5px;color:var(--dim);font-size:var(--fs-label);max-width:52ch;}
.film__tag{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);white-space:nowrap;}

/* ---- secțiuni ---- */
.sec{padding:clamp(44px,7vw,96px) 0;}
.sec h2{font-size:clamp(1.9rem,4vw,var(--fs-h));line-height:1.06;letter-spacing:-.035em;
 font-weight:700;text-wrap:balance;}
.sec__lead{margin-top:14px;color:var(--dim);max-width:62ch;text-wrap:pretty;}

/* ---- bibliotecă ---- */
.lib{display:grid;gap:12px;margin-top:clamp(22px,3vw,34px);}
.libitem{border-radius:var(--r);display:flex;align-items:center;gap:18px;padding:13px;
 cursor:pointer;text-align:left;width:100%;--gb:12px;}
.libitem__th{width:124px;flex:none;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#0b0c0b;}
.libitem__th img{width:100%;height:100%;object-fit:cover;}
.libitem__b{flex:1;min-width:0;}
.libitem__b h3{font-size:var(--fs-body);font-weight:700;letter-spacing:-.015em;}
.libitem__b p{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);margin-top:4px;}
.libitem__go{border-radius:var(--r-pill);padding:11px 18px;font-size:var(--fs-label);font-weight:700;
 letter-spacing:.1em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--rim);
 white-space:nowrap;transition:background .16s var(--out),color .16s var(--out);}
.note{margin-top:20px;font-size:var(--fs-label);color:var(--faint);}

/* ---- foaia cu prompt ---- */
.sheet{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(10px,2.4vw,32px);
 background:rgba(4,5,4,.66);opacity:0;visibility:hidden;
 transition:opacity .26s var(--out),visibility .26s;}
.sheet.open{opacity:1;visibility:visible;}
.sheet__box{border-radius:var(--r-lg);width:min(1020px,100%);max-height:94vh;display:flex;
 flex-direction:column;overflow:hidden;--gb:22px;
 transform:scale(.97);transition:transform .26s var(--out);}
.sheet.open .sheet__box{transform:scale(1);}
.sheet__top{display:flex;align-items:center;gap:14px;padding:15px 17px;
 border-bottom:1px solid var(--rim);flex:none;}
.sheet__top h3{font-size:var(--fs-body);font-weight:700;letter-spacing:-.02em;flex:1;min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
 background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--rim);
 transition:background .16s var(--out),transform .16s var(--out);}
.iconbtn svg{width:14px;height:14px;}
.sheet__body{overflow-y:auto;padding:17px;display:grid;
 grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:17px;}
.sheet__vid{border-radius:var(--r);overflow:hidden;background:#000;align-self:start;}
.sheet__vid video{width:100%;height:auto;}
.facts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;}
.fact{border-radius:var(--r-pill);padding:7px 13px;font-family:var(--mono);font-size:var(--fs-label);
 color:var(--dim);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--rim);
 font-variant-numeric:tabular-nums;}
.why{margin-top:13px;color:var(--dim);font-size:.98rem;text-wrap:pretty;}
.why b{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
 text-transform:uppercase;color:var(--faint);margin-bottom:6px;font-weight:600;}
.pbox{display:flex;flex-direction:column;min-height:0;}
.shots{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px;}
.shots[hidden]{display:none;}
.shots button{border-radius:var(--r-pill);padding:8px 14px;font-family:var(--mono);
 font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;color:var(--faint);
 background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--rim);
 transition:color .16s var(--out),background .16s var(--out);white-space:nowrap;}
.shots button.on{background:rgba(255,255,255,.92);color:var(--ink);}
.shots button:active{transform:scale(.97);}
.pbox__top{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.pbox__top b{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
 text-transform:uppercase;color:var(--faint);font-weight:600;margin-right:auto;}
.cbtn{border-radius:var(--r-pill);padding:10px 16px;font-family:var(--mono);font-size:var(--fs-label);
 font-weight:700;letter-spacing:.07em;background:rgba(255,255,255,.92);color:var(--ink);
 transition:background .16s var(--out),transform .16s var(--out);white-space:nowrap;}
.cbtn--ghost{background:rgba(255,255,255,.08);color:var(--text);box-shadow:inset 0 0 0 1px var(--rim);}
.cbtn.done{background:#7bd694;color:var(--ink);}
pre.prompt{margin:0;flex:1;min-height:0;overflow:auto;border-radius:var(--r);padding:17px;
 background:rgba(6,7,6,.55);box-shadow:inset 0 0 0 1px var(--rim);
 font-family:var(--mono);font-size:var(--fs-code);line-height:1.7;color:var(--dim);
 white-space:pre-wrap;word-break:break-word;max-height:50vh;font-variant-numeric:tabular-nums;}
.share{margin-top:11px;font-size:var(--fs-label);color:var(--faint);}

/* ---- contact ---- */
.out{border-radius:var(--r);overflow:hidden;--gb:14px;margin-top:clamp(22px,3vw,32px);}
.out a{display:flex;align-items:center;gap:13px;padding:16px 19px;border-bottom:1px solid var(--rim);
 transition:background .16s var(--out);}
.out a:last-child{border-bottom:0;}
.out a svg{width:17px;height:17px;color:var(--dim);flex:none;}
.out a b{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);font-weight:400;}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 padding:24px 0 32px;font-size:var(--fs-label);color:var(--faint);}

/* ---- hover doar unde există cursor fin ---- */
@media (hover:hover) and (pointer:fine){
  .film__bar:hover::before,.film__bar:hover .film__prog{height:5px;}
  .film__bar::before,.film__bar .film__prog{transition:height .16s var(--out);}
  .shots button:not(.on):hover{color:var(--text);background:rgba(255,255,255,.12);}
  .nav__links a:hover{color:var(--text);}
  .lang button:not(.on):hover{color:var(--text);}
  .pill:hover i{background:rgba(255,255,255,.26);}
  .libitem:hover .libitem__go{background:rgba(255,255,255,.92);color:var(--ink);}
  .iconbtn:hover{background:rgba(255,255,255,.2);}
  .cbtn:hover{background:#fff;}
  .cbtn--ghost:hover{background:rgba(255,255,255,.18);}
  .out a:hover{background:rgba(255,255,255,.1);}
  .film__frame:hover .film__play{transform:translate(-50%,-50%) scale(1.06);}
}

/* apăsarea trebuie să se simtă: feedback instant, sub 200ms */
.pill:active,.cbtn:active,.libitem:active,.iconbtn:active{transform:scale(.97);}
.film__frame:active .film__play{transform:translate(-50%,-50%) scale(.95);}

@media (max-width:900px){
  .sheet__body{grid-template-columns:1fr;}
  pre.prompt{max-height:42vh;}
}
@media (max-width:680px){
  /* Taburile nu mai incap in bara de sus alaturi de limba si buton, dar nici
     nu pot sa dispara: erau singura cale spre sectiuni. Coboara ca bara de
     jos, la indemana degetului — exact tiparul din care vine si ovalul. */
  .nav__links{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;
    /* Latime hotarata, nu stransa pe continut: pozitionarea fixa face
       containerul sa se stranga, iar atunci coloanele 1fr nu se mai egalizeaza
       si ovalul si-ar schimba latimea la fiecare trecere. */
    width:min(86vw,330px);
    padding:5px;border-radius:var(--r-pill);
    background:rgba(16,18,17,.55);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
               inset 0 0 0 1px rgba(255,255,255,.10),
               0 12px 34px -10px rgba(0,0,0,.75);}
  .nav__links a{padding:11px 20px;}
  /* doar pe verticala: offsetLeft include deja padding-ul */
  .nav__pill{top:5px;bottom:5px;}
  .nav{padding:10px 10px 10px 16px;}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));}
  /* butonul isi pastreaza sensul si fara eticheta */
  .pill span[data-t="nav.cta"]{display:none;}
  .pill{padding:9px;gap:0;}
  .libitem{flex-wrap:wrap;}
  .libitem__th{width:100%;aspect-ratio:16/9;}
  .libitem__go{width:100%;text-align:center;}
  .sheet{padding:0;}
  .sheet__box{max-height:100vh;height:100%;border-radius:0;}
  pre.prompt{max-height:none;}
  .film__meta{left:14px;right:14px;bottom:13px;}
  .film__meta p{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .bg video{display:none;}
}


/* ---- poarta de email pentru prompturi ---- */
.gate{border-radius:var(--r);padding:clamp(18px,3vw,26px);
 background:rgba(255,255,255,.045);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);}
.gate__lead{margin:0 0 16px;max-width:46ch;text-wrap:pretty;}
.gate__form{display:flex;gap:10px;flex-wrap:wrap;}
.gate__in{flex:1 1 220px;min-width:0;
 padding:12px 15px;border-radius:var(--r-pill);
 border:0;outline:0;color:var(--text);
 background:rgba(255,255,255,.07);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
 font:inherit;font-size:var(--fs-body,1rem);
 transition:box-shadow .18s var(--out),background .18s var(--out);}
.gate__in::placeholder{color:var(--dim);}
.gate__in:focus{background:rgba(255,255,255,.10);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 0 0 3px rgba(255,255,255,.07);}
.gate__form .cbtn{flex:0 0 auto;}
.gate__err{margin:12px 0 0;color:#ff9c8a;font-size:var(--fs-label);letter-spacing:.02em;}
.gate__note{margin:14px 0 0;color:var(--dim);font-size:var(--fs-label);
 letter-spacing:.02em;max-width:52ch;text-wrap:pretty;}
@media (max-width:520px){
  .gate__form .cbtn{flex:1 1 100%;justify-content:center;}
}


/* ---- indemnul la contact ----
   Nu un pop-up peste ecran: un card mic in colt, care nu blocheaza nimic si
   se inchide. Apare o singura data, si numai dupa ce omul chiar s-a uitat. */
.nudge{position:fixed;z-index:80;
 right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
 width:min(340px,calc(100vw - 28px));padding:20px 20px 18px;
 border-radius:var(--r);
 opacity:0;transform:translateY(12px) scale(.985);pointer-events:none;
 transition:opacity .32s var(--out),transform .32s var(--out);}
.nudge.on{opacity:1;transform:none;pointer-events:auto;}
.nudge__x{position:absolute;top:10px;right:10px;width:30px;height:30px;}
.nudge__x svg{width:13px;height:13px;}
.nudge__lead{margin:0;font-weight:700;letter-spacing:-.01em;padding-right:26px;}
.nudge__sub{margin:6px 0 15px;color:var(--dim);font-size:var(--fs-label);
 line-height:1.5;letter-spacing:.01em;text-wrap:pretty;}
.nudge__row{display:flex;gap:9px;}
.nudge__row .cbtn{flex:1 1 0;justify-content:center;}

@media (max-width:680px){
  /* deasupra barei de taburi, nu peste ea */
  .nudge{left:12px;right:12px;width:auto;
   bottom:calc(78px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion:reduce){
  .nudge{transition:opacity .2s linear;transform:none;}
  .nudge.on{transform:none;}
}