/* Biserica Sfânta Treime Buzău: singurul stylesheet. */

@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:200 900;src:url(../assets/fonts/literata-ro-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0102-0103,U+0218-021B}
@font-face{font-family:'Literata';font-style:normal;font-display:swap;font-weight:200 900;src:url(../assets/fonts/literata-latin-opsz-normal.woff2) format('woff2-variations');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:italic;font-display:swap;font-weight:200 900;src:url(../assets/fonts/literata-ro-wght-italic.woff2) format('woff2-variations');unicode-range:U+0102-0103,U+0218-021B}
@font-face{font-family:'Literata';font-style:italic;font-display:swap;font-weight:200 900;src:url(../assets/fonts/literata-latin-wght-italic.woff2) format('woff2-variations');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0F2230;
  --teal:#5BBCB8;
  --teal-deep:#1F6B66;
  --muted:#4B5B68;
  --mist:#EEF6F5;
  --wheat:#E6CFA3;
  --white:#FFFFFF;
  /* umbre bleumarin, nu gri, pe trei trepte: cu cât elementul stă mai „sus”, cu atât umbra e mai lungă și mai moale */
  --umbra-mica:0 1px 2px rgba(15,34,48,.08),0 3px 8px -4px rgba(15,34,48,.18);
  --umbra-medie:0 2px 4px -2px rgba(15,34,48,.12),0 14px 30px -16px rgba(15,34,48,.4);
  --umbra-mare:0 4px 10px -6px rgba(15,34,48,.18),0 30px 60px -30px rgba(15,34,48,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:'Literata',Georgia,serif;
  font-optical-sizing:auto;
  font-size:1.125rem;
  line-height:1.6;
}
img{display:block;max-width:100%;height:auto}
/* <picture> nu face cutie: img rămâne copilul direct al .foto pentru layout și poziționarea absolută */
picture{display:contents}

/* Tipografie */
h1,h2,h3{margin:0 0 1rem;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.5rem,1.4rem + 4.5vw,4.5rem);font-weight:550;line-height:1.05;letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);font-weight:600;line-height:1.15}
h3{font-size:1.25rem;font-weight:600;line-height:1.3}
p{margin:0 0 1rem;max-width:62ch}
.small{font-size:.9375rem}
.muted{color:var(--muted)}
.lead{font-size:1.25rem}

/* Legături, butoane, focus */
a{color:inherit}
.legatura{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.legatura,.nav a,.subsol a{transition:text-decoration-color .2s ease,text-underline-offset .2s ease}
.legatura:hover{text-decoration-color:var(--navy);text-underline-offset:.35em}
a[href^="tel:"]{white-space:nowrap}
/* adresa de email n-are unde să se rupă: pe 320px ar ieși din coloană */
a[href^="mailto:"]{overflow-wrap:anywhere}

.btn,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.75rem 1.25rem;
  font-weight:600;line-height:1.3;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;
  border:2px solid var(--navy);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,text-decoration-color .15s ease,transform .2s ease,box-shadow .2s ease;
}
.btn{background:var(--navy);color:var(--white);position:relative;box-shadow:var(--umbra-mica)}
.btn-outline{background:transparent;color:var(--navy);position:relative}
/* hover doar unde există cursor: pe touch ar rămâne lipit după tap */
@media (hover:hover){
  /* butonul capătă umbra barelor din logo, sus-stânga */
  .btn:hover,.btn-outline:hover{box-shadow:-6px -6px 0 var(--teal),var(--umbra-medie)}
  .btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);text-decoration-color:currentColor}
  .btn-outline:hover{background:var(--navy);color:var(--white);text-decoration-color:currentColor}
  /* pe wheat, butoanele rămân navy și la hover */
  .wheat .btn:hover{background:var(--navy);border-color:var(--navy)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover,.btn-outline:hover{transform:translate(3px,3px)}
  /* zona de click acoperă și locul vechi: altfel butonul fuge de sub cursorul venit de sus și tremură */
  .btn:hover::after,.btn-outline:hover::after{content:"";position:absolute;inset:-5px -2px -2px -5px}
}

a:focus-visible,summary:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.subsol a:focus-visible{outline-color:var(--teal)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:1rem;top:-5rem;z-index:40;
  padding:.75rem 1.25rem;background:var(--navy);color:var(--white);
  font-weight:600;text-decoration:none;
}
.skip:focus{top:1rem}

/* Aranjare */
.container{max-width:72rem;margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.container{padding-inline:2rem}}
.sectiune{padding-block:clamp(3.5rem,8vw,7rem)}
/* două secțiuni albe una după alta: spațiul se adună o singură dată */
.sectiune:not(.mist):not(.wheat) + .sectiune:not(.mist):not(.wheat){padding-top:0}
.mist{background:var(--mist)}
.wheat{background:var(--wheat)}

/* Antet */
.antet{padding-block:1rem}
.antet .container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem}
.marca{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.marca .logo{height:44px;width:auto;flex:none}
/* Logo-ul e SVG: peștele bleumarin stă peste unul alb. Implicit e desenat întreg. Pe prima
   pagină, pe telefon (clasa antet-strange), se desenează la derulare de la stânga la dreapta:
   întâi corpul, care ocupă cam 77% din lățimea peștelui, apoi coada. */
.logo-peste-negru path{stroke-dasharray:1 2;stroke-dashoffset:0}
/* valorile vin din meniu.js, prin --strangere; unde rulează animațiile legate de scroll (mai jos), ele au întâietate */
.antet-strange .logo-peste-negru .corp{stroke-dashoffset:calc(1.01 * (1 - clamp(0, var(--strangere,0) / .77, 1)))}
.antet-strange .logo-peste-negru .coada{stroke-dashoffset:calc(1.01 * (1 - clamp(0, (var(--strangere,0) - .77) / .23, 1)))}
.marca-nume{display:block;font-weight:600;line-height:1.2}
.marca-oras{display:block;font-size:.9375rem;line-height:1.2;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;flex-basis:100%;gap:0 1rem;font-size:.9375rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em}
.nav a:hover{text-decoration-color:currentColor;text-underline-offset:.3em}
@media (min-width:768px){
  .nav{flex-basis:auto;margin-left:auto;gap:0 1.75rem}
}

/* Meniul de pe telefon (assets/meniu.js). Clasa meniu-js o pune scriptul din <head>, fără defer,
   deci înainte de prima desenare: antetul nu sare când vine scriptul. Fără JavaScript linkurile
   rămân la vedere, iar antetul nu stă fix sus (pe două rânduri ar ocupa prea mult). */
.meniu-buton{display:none}
@media (max-width:767px){
  .meniu-js .meniu-buton{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin-left:auto;padding:0;
    background:transparent;color:var(--navy);border:0;cursor:pointer;
  }
  /* logo, nume și buton pe un singur rând și pe ecranele înguste (320-360px):
     numele se micșorează cu ecranul, iar dacă tot nu încape, se taie cu „…” în loc să împingă butonul jos */
  .meniu-js .antet .container{flex-wrap:nowrap;column-gap:1rem}
  .meniu-js .marca,.meniu-js .marca > span{min-width:0}
  .meniu-js .marca-nume{font-size:clamp(.875rem,4.2vw,1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Meniul se deschide peste pagină, sub antet. Nu mai împinge conținutul în jos, deci nimic
     de dedesubt nu se rearanjează în timpul animației; asta făcea butoanele să pâlpâie.
     Închis: visibility:hidden, care scoate linkurile și din ordinea de Tab. */
  /* Antetul rămâne fix sus la derulare; ancorele opresc secțiunile sub el, nu în spatele lui. */
  .meniu-js .antet{position:sticky;top:0;z-index:30;background:var(--white);transition:box-shadow .2s ease}
  html.meniu-js{scroll-padding-top:5.5rem}
  .antet-derulat .antet{box-shadow:0 1px 0 rgba(15,34,48,.08),0 10px 24px -18px rgba(15,34,48,.45)}
  /* Pe prima pagină, titlul mare se strânge în antet la derulare: h1 se micșorează și se stinge,
     numele din antet apare, iar peștele din logo se înnegrește. Unde browserul știe animații legate
     de scroll, le face el, sincron cu degetul (cu JavaScript, efectul rămânea în urma derulării și
     sacada). Altfel, și sub reduced motion (unde animațiile sunt oprite), valorile vin din meniu.js,
     prin --strangere; animațiile, unde rulează, au întâietate față de ele. */
  .antet-strange .hero-text h1{
    transform-origin:left bottom;
    transform:scale(calc(1 - .2 * var(--strangere,0)));
    opacity:calc(1 - var(--strangere,0));
  }
  .antet-strange .marca > span{opacity:var(--strangere,0)}
}
/* 40px și 140px: cât derulezi până trece titlul mare pe sub antet (măsurat la 320-414px) */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .antet-strange .hero-text h1{animation:titlu-strange auto linear both;animation-timeline:scroll(root);animation-range:40px 140px}
    .antet-strange .marca > span{animation:titlu-apare auto linear both;animation-timeline:scroll(root);animation-range:40px 140px}
    .antet-strange .logo-peste-negru .corp{animation:peste-logo auto linear both;animation-timeline:scroll(root);animation-range:40px 117px}
    .antet-strange .logo-peste-negru .coada{animation:peste-logo auto linear both;animation-timeline:scroll(root);animation-range:117px 140px}
  }
}
@keyframes titlu-strange{from{transform:none;opacity:1}to{transform:scale(.8);opacity:0}}
@keyframes titlu-apare{from{opacity:0}to{opacity:1}}
@keyframes peste-logo{from{stroke-dashoffset:1.01}to{stroke-dashoffset:0}}
@media (max-width:767px){
  .meniu-js .nav{
    position:absolute;top:100%;left:0;right:0;z-index:20;
    display:flex;flex-direction:column;gap:0;
    padding:0 16px .5rem;background:var(--white);
    border-top:1px solid rgba(15,34,48,.18);box-shadow:var(--umbra-medie);
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s;
  }
  .meniu-js .nav.deschis{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s;
  }
  .meniu-js .nav a{font-size:1.125rem;min-height:48px;border-bottom:1px solid rgba(15,34,48,.18)}
  .meniu-js .nav a:last-child{border-bottom:0}
}
/* Ecran jos (telefon culcat, zoom de 300-400%): antetul fix ar lua o treime din înălțime, iar ultimele
   linkuri din meniu ar rămâne sub marginea ecranului. Antetul pleacă odată cu pagina (relative, nu
   static: meniul se deschide tot sub el), iar meniul se oprește la marginea de jos și se derulează. */
@media (max-width:767px) and (max-height:30rem){
  .meniu-js .antet{position:relative}
  html.meniu-js{scroll-padding-top:0}
  /* padding-top: overflow-y:auto taie inelul de focus (3px + offset 3px) al primului link */
  .meniu-js .nav{max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto;padding-top:6px}
}
.meniu-buton:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
/* trei linii care devin X când meniul e deschis */
.meniu-linii,.meniu-linii::before,.meniu-linii::after{
  display:block;width:20px;height:2px;background:currentColor;
  transition:transform .2s ease,background-color .2s ease;
}
.meniu-linii{position:relative}
.meniu-linii::before,.meniu-linii::after{content:"";position:absolute;left:0}
.meniu-linii::before{top:-6px}
.meniu-linii::after{top:6px}
.meniu-buton[aria-expanded="true"] .meniu-linii{background-color:transparent}
.meniu-buton[aria-expanded="true"] .meniu-linii::before{transform:translateY(6px) rotate(45deg)}
.meniu-buton[aria-expanded="true"] .meniu-linii::after{transform:translateY(-6px) rotate(-45deg)}
/* contrast ridicat: fundalul liniilor ar deveni Canvas, ca pagina, și butonul ar dispărea */
@media (forced-colors:active){
  .meniu-linii,.meniu-linii::before,.meniu-linii::after{forced-color-adjust:none;background-color:CanvasText}
}

/* Hero */
.hero-grid{display:grid;gap:3rem}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1fr 1.15fr;gap:4rem;align-items:center}
}
.acte{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Programul: logo-ul bisericii devine programul */
.bare{
  --off:clamp(10px,1.6vw,18px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  column-gap:clamp(1.75rem,5vw,3.25rem);
  margin:var(--off) 0 0 var(--off);
  font-variant-numeric:lining-nums tabular-nums;
}
/* pe telefon, bare mai late: umbra are nevoie de ~10px, nu de 28px */
@media (max-width:479px){.bare{column-gap:1.25rem}}
.bare ul{display:contents}
.bara{
  grid-row:1 / 4;
  display:grid;
  grid-template-rows:subgrid;
  min-width:0;
  padding:clamp(.6rem,1.5vw,1.1rem);
  background:var(--teal);
  color:var(--navy);
  box-shadow:calc(-1 * var(--off)) calc(-1 * var(--off)) 0 var(--navy),var(--umbra-mare);
  /* fără JS; cu JS le preia .js .bara.reveal, altfel .js .reveal le-ar înlocui */
  transition:box-shadow .25s cubic-bezier(.22,.61,.36,1),background-color .25s ease;
}
/* hover doar unde există cursor: umbra crește, ca în logo, iar bara se luminează.
   Bara nu se mișcă (fără transform): o bară care fuge de sub cursor tremură. */
@media (hover:hover){
  .bara:hover{
    box-shadow:calc(-1.7 * var(--off)) calc(-1.7 * var(--off)) 0 var(--navy),var(--umbra-mare);
    background-color:#72C8C4;
  }
}
.bara:nth-child(1){grid-column:1}
.bara:nth-child(2){grid-column:2}
.bara:nth-child(3){grid-column:3}
.cand{grid-row:1}
/* containerul stă pe copiii barei: pe .bara, containment-ul ar anula subgrid-ul și peștele ar călca textul */
.cand,.ce{container-type:inline-size}
.ce{grid-row:3;margin:0;font-size:.8125rem;line-height:1.35}
.ce span{font-size:.9375rem;font-size:clamp(.8125rem,18cqi,.9375rem)}
.zi{display:block;font-size:1rem;font-size:clamp(.8125rem,19cqi,1rem);font-weight:600}
.ora{display:block;font-size:clamp(1.5rem,.9rem + 2.6vw,3rem);font-size:clamp(1.25rem,34cqi,3rem);font-weight:600;line-height:1.15}
.pana{display:block;font-size:.9375rem;font-size:clamp(.8125rem,18cqi,.9375rem)}
.bare svg{
  grid-row:2;grid-column:1 / -1;
  position:relative;z-index:1;pointer-events:none;
  width:100%;height:auto;padding-block:.5rem;
}
/* fără subgrid nu putem aranja peștele între bare */
@supports not (grid-template-rows:subgrid){.bare svg{display:none}}

figure{margin:0}
/* versetul din hero, sub titlu: italic, cât să nu concureze cu h1 */
/* linia teal din stânga îl arată ca citat, ca liniile de sub titlurile de la „Ce facem împreună” */
.verset-hero{margin:1.25rem 0 1rem;padding-left:1rem;border-left:4px solid var(--teal)}
.verset-hero blockquote{margin:0;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-style:italic;line-height:1.4;text-wrap:pretty}
.verset-hero figcaption{margin-top:.5rem}

/* Fotografie: sub 900px stă static, 4:3; de la 900px umple exact înălțimea coloanei de text */
.foto img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
/* Poza cu citirea din Biblie: întreagă, netăiată, cu un bloc teal decalat jos-stânga
   (ca barele din logo) și o umbră moale. */
.foto{--decalaj:clamp(14px,2vw,26px)}
.foto-citire img{
  /* raportul pozei, scris explicit: doar „auto” n-ar rezerva loc până se încarcă poza (lazy), iar pagina ar sări */
  aspect-ratio:1638 / 2048;border-radius:4px;
  box-shadow:var(--umbra-mare),calc(-1 * var(--decalaj)) var(--decalaj) 0 var(--teal);
}
/* poza de la Credința: fără ramă, doar o umbră moale care o ridică de pe fundalul mist */
.credinta-grid .foto img{border-radius:4px;box-shadow:var(--umbra-medie)}
/* tot ea: alb-negru, iar sub cursor își recapătă culoarea */
.credinta-grid .foto img{filter:grayscale(1);transition:filter .6s ease}
@media (hover:hover){
  .credinta-grid .foto:hover img{filter:none}
}
/* sub 900px, întreagă, ca să nu se taie versetul de deasupra ușii; raportul scris explicit rezervă locul până se încarcă */
@media (max-width:899px){
  .credinta-grid .foto img{aspect-ratio:1603 / 2004}
}
@media (min-width:900px){
  .foto{position:relative;min-height:26rem}
  .foto img{position:absolute;inset:0;height:100%}
  .foto.foto-citire{min-height:0}
  .foto-citire img{position:static;height:auto}
}
figcaption{margin-top:1rem;font-size:1rem;color:var(--muted)}

/* Ce facem împreună: cele trei puncte una sub alta, în stânga pozei; versetul dedesubt, pe toată lățimea */
.facem-grid{display:grid;gap:2.5rem}
@media (min-width:900px){
  .facem-grid{grid-template-columns:1fr 1fr;column-gap:4rem;row-gap:4rem;align-items:center}
  .facem-grid .verset-lat{grid-column:1 / -1}
}
.trei{display:grid;gap:2.5rem}
/* linia teal stă sub titlul fiecărei categorii */
.punct h3{padding-bottom:.75rem;border-bottom:4px solid var(--teal)}
.verset-lat{text-align:center}
.verset-lat blockquote{margin:0 auto;max-width:52ch;font-style:italic;font-size:clamp(1.5rem,1rem + 1.8vw,2.25rem);line-height:1.35}

/* Credința */
.credinta-grid{display:grid;gap:2.5rem}
@media (min-width:900px){
  .credinta-grid{grid-template-columns:1fr 1fr;column-gap:4rem;row-gap:0;align-items:stretch}
  .credinta-grid > .foto{grid-column:1;grid-row:1 / 3}
  .credinta-intro{grid-column:2;grid-row:1}
  .credinta-lista{grid-column:2;grid-row:2}
}
.credinta-intro p{margin-bottom:2rem}
.credinta-lista details{border-bottom:1px solid rgba(15,34,48,.18)}
.credinta-lista summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;cursor:pointer;list-style:none;
  font-size:1.125rem;font-weight:600;
}
.credinta-lista summary::-webkit-details-marker{display:none}
.credinta-lista summary::after{content:"+";content:"+" / "";flex:none;font-size:1.5rem;font-weight:400;line-height:1;transition:transform .2s ease}
.credinta-lista details[open] summary::after{transform:rotate(45deg)}
/* padding, nu margin: marginea ar ieși din ::details-content când block-size devine auto și conținutul ar sări la final */
.credinta-lista details p{margin:0;padding-bottom:1rem}
/* deschiderea animată a conținutului: îmbunătățire progresivă, fără ea se deschide direct */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .credinta-lista details::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .credinta-lista details[open]::details-content{block-size:auto}
}

/* Rugăciune */
.butoane{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
@media (max-width:479px){.butoane .btn,.butoane .btn-outline{width:100%}}

/* Cum ajungi */
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:768px){.contact-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.adresa{font-size:1.5rem;font-weight:500;line-height:1.3}
.legaturi{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.date-contact{margin:0}
.date-contact dt{font-size:.9375rem;font-weight:600;color:var(--muted)}
.date-contact dd{margin:0 0 1.5rem;overflow-wrap:anywhere}
.date-contact .retele{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}

/* Politica de confidențialitate și 404 */
/* plafon de 10,5vw: „confidențialitate” încape întreg la 320px și cu fontul de rezervă (Georgia);
   de la 381px în sus plafonul nu mai prinde, deci restul ecranelor arată ca înainte */
/* clamp scris direct, nu prin variabilă: unde clamp lipsește, declarația cade la parsare și h1 rămâne 2em */
.pagina h1{margin-bottom:2rem;font-size:min(clamp(2.5rem,1.4rem + 4.5vw,4.5rem),10.5vw)}
.legal h2{margin-top:2.5rem}
mark.todo{background:var(--wheat);color:var(--navy);border:1px dashed var(--navy);padding:0 .25em}

/* Subsol */
.subsol{background:var(--navy);color:var(--white);padding-block:2.5rem}
.subsol .container{display:grid;gap:1.5rem}
@media (min-width:768px){.subsol .container{grid-template-columns:1fr 1fr;gap:2rem 4rem}}
.subsol-marca{display:flex;align-items:center;gap:.75rem}
.subsol-marca img{height:36px;width:auto}
.subsol p{margin:0}
.subsol a{color:var(--teal);text-decoration:underline;text-underline-offset:.2em}
.subsol a:hover{text-decoration-color:var(--white);text-underline-offset:.35em}
.subsol-nume{font-weight:600}
/* semnătura autorului: transparentă, deci se vede doar când e selectată; transparentă, nu bleumarin, ca modurile care întunecă forțat pagina să n-o descopere */
.semnatura{grid-column:1 / -1;justify-self:end;font-size:.75rem;letter-spacing:.02em;color:transparent}
@media (forced-colors:active){.semnatura{forced-color-adjust:none}}
.semnatura::selection,.semnatura ::selection{color:var(--white);background:var(--teal-deep)}

/* Derulare lină spre secțiunile din meniu */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Apariție la derulare (assets/reveal.js): conținutul urcă puțin și se aprinde când intră în ecran.
   Regulile se aplică doar sub html.js, clasă pusă de script, deci fără JavaScript pagina rămâne întreagă. */
/* reveal.js rulează în <head> și ține <main> ascuns până marchează blocurile, ca primul desen
   să nu arate pagina întreagă înainte de intrare. Dacă scriptul se oprește, conținutul apare după 2 s. */
@media screen and (prefers-reduced-motion:no-preference){
  .reveal-asteapta main{opacity:0;animation:reveal-plasa 0s 2s forwards}
}
@keyframes reveal-plasa{to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none}
/* focusul de la tastatură într-un bloc încă neaprins îl arată imediat, ca un link focusat să nu fie invizibil */
.js .reveal:focus-within{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
               transform .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
  }
  /* bara adaugă umbra și fundalul de hover; fără regula asta .js .reveal le-ar tăia tranziția */
  .js .bara.reveal{
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
               transform .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
               box-shadow .25s cubic-bezier(.22,.61,.36,1),
               background-color .25s ease;
  }
}

/* Peștele se desenează: svg-ul doar declanșează desenul, deci fără fade și fără ridicare */
.js svg.reveal{opacity:1;transform:none;transition:none}
/* 1.01, nu 1: așa capetele rotunde ale căilor nu lasă puncte în starea nedesenată */
.js .bare svg path{stroke-dasharray:1 2;stroke-dashoffset:1.01}
.js .bare svg.is-in path{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  /* corpul (primele două path-uri) întâi, apoi coada (ultimele două) */
  .js .bare svg path{transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .45s}
  .js .bare svg path:nth-child(n+3){transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1) 1.3s}
}
/* plasa de siguranță din script: totul apare fără tranziție */
.js .reveal.is-now,.js .bare svg.is-now path{transition:none!important}
/* cât scriptul ascunde blocurile la pornire: fără tranziție, ca apariția să pornească de la 0 */
.reveal-pregatire .reveal,.reveal-pregatire .bare svg path{transition:none!important}

/* sub reduced-motion nu se mișcă nimic: totul e vizibil și peștele e desenat */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  details::details-content{transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .bare svg path{stroke-dashoffset:0}
}
/* pe hârtie nu există derulare: blocurile care n-au intrat în ecran s-ar tipări goale */
@media print{
  .js .reveal{opacity:1!important;transform:none!important}
  .js .bare svg path{stroke-dashoffset:0!important}
  /* și antetul strâns de pe telefon: pe hârtie titlul, numele și peștele din logo apar întregi */
  .antet-strange .hero-text h1,.antet-strange .marca > span{opacity:1!important;transform:none!important}
  .antet-strange .logo-peste-negru path{stroke-dashoffset:0!important}
}