/* Usa. Un singur ecran, fara derulare, fara catalog.
   Se da din mana in mana; nu se gaseste in cautare. */

:root{
  --negru:#070707;
  --aur:#BB9D7B;
  --alb:#F5F3EF;
  --fum:#A49C91;
  --umbra:#5A6164;
  --f:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ft:ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--negru);color:var(--alb);
  font:300 18px/1.8 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

.scena{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,4.4vw,56px);
  overflow:hidden;
}

.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.voal{
  position:absolute;inset:0;z-index:-1;
  /* trei straturi, ca textul sa ramana lizibil pe ORICE cadru al filmului:
     vigneta, o umbra dinspre stanga sub bloculile de text, si o baza sub subsol */
  background:
    radial-gradient(135% 100% at 52% 40%,rgba(7,7,7,.12) 0%,rgba(7,7,7,.82) 68%,rgba(7,7,7,.97) 100%),
    linear-gradient(100deg,rgba(7,7,7,.9) 0%,rgba(7,7,7,.62) 34%,rgba(7,7,7,.12) 62%,rgba(7,7,7,0) 100%),
    linear-gradient(to bottom,rgba(7,7,7,.62) 0%,rgba(7,7,7,0) 24%,rgba(7,7,7,0) 54%,rgba(7,7,7,.88) 100%);
}

/* ----- sus ----- */
.sus{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.sus .marca img{width:clamp(108px,11vw,138px);display:block}

.cheie{
  display:inline-flex;align-items:center;gap:10px;
  font:500 11px var(--f);letter-spacing:.22em;text-transform:uppercase;
  color:var(--aur);text-decoration:none;
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:border-color .24s cubic-bezier(.22,.61,.36,1),color .24s;
}
.cheie:hover,.cheie:focus-visible{border-bottom-color:var(--aur)}
.cheie svg{width:13px;height:13px;flex:none}

/* ----- mijloc ----- */
/* Masura sta pe FRAZA, nu pe cutia din jurul ei. Unitatea ch se calculeaza
   dupa fontul elementului pe care e scrisa, iar .mijloc mosteneste 18px de la
   body: 31ch acolo insemnau 324px, adica sapte cuvinte rupte pe cinci randuri
   sub un font de 47px. Pe fraza, aceeasi unitate masoara litera mare. */
.mijloc{padding:clamp(32px,6vh,72px) 0}
.mijloc p{
  font-weight:200;font-size:clamp(25px,3.7vw,47px);
  line-height:1.26;letter-spacing:.01em;margin:0;
  max-width:24ch;
  text-wrap:balance;
}
.mijloc .semnatura{
  display:block;margin-top:clamp(22px,3vh,34px);
  font:400 12px var(--ft);letter-spacing:.34em;text-transform:uppercase;color:var(--aur);
}

/* ----- jos ----- */
.jos{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.telefon{
  font-weight:200;font-size:clamp(27px,3.6vw,44px);letter-spacing:.08em;
  color:var(--aur);text-decoration:none;transition:color .24s;
  white-space:nowrap;
}
.telefon:hover,.telefon:focus-visible{color:var(--alb)}

.coordonate{font:400 13px/1.9 var(--ft);color:var(--fum);text-align:right;margin:0;
  text-shadow:0 1px 14px rgba(7,7,7,.95),0 0 40px rgba(7,7,7,.8)}
.coordonate a{color:inherit;text-decoration:none}
.coordonate a:hover{color:var(--aur)}

.atelier{
  display:inline-block;margin-top:14px;
  font:500 10px var(--f);letter-spacing:.24em;text-transform:uppercase;
  color:var(--fum);text-decoration:none;transition:color .24s;
}
.atelier:hover,.atelier:focus-visible{color:var(--aur)}

:focus-visible{outline:1px solid var(--aur);outline-offset:4px}

@media(max-width:760px){
  .jos{flex-direction:column;align-items:flex-start;gap:26px}
  .coordonate{text-align:left}
}

/* Afisul sta sub film pe orice ecran mic: daca sistemul refuza pornirea
   automata, se vede primul cadru, nu un dreptunghi negru. Filmul se opreste
   doar la cererea de miscare redusa. */
@media(prefers-reduced-motion:reduce){
  .film{display:none}
  .scena{background:url(img/poster-hero.jpg?v=atlantis) right center/cover no-repeat}
}
/* Pe telefon (18.10): ceasul real SUS, sub marca, iar fraza si datele de contact sub el, pe negru. Inainte,
   ceasul statea jos si telefonul, adresa si emailul cadeau peste cadran, ilizibile. */
/* Stingerea sta IN fundal, peste imagine: .voal (z-index -1) cade sub fundalul .scenei. Negrul e al imaginii
   (#0a0a0a), nu --negru (#070707): altfel se vedeau marginile patratului. */
@media(max-width:640px),(orientation:portrait){
  .film,.voal{display:none}
  body{background:#0a0a0a}   /* acelasi negru sub scena, cand ecranul e mai inalt decat ea */
  /* plafon de inaltime: in modul desktop al Chrome (980 x ~2100) golul dintre fraza si contacte devenea cat un ecran */
  .scena{min-height:min(100svh,1000px);justify-content:flex-start;background:
    linear-gradient(to bottom,rgba(10,10,10,0) calc(72px + min(92vw,560px)*.7),#0a0a0a calc(72px + min(92vw,560px)*.96)),
    url(img/hero-mobil-ceas.webp?v=1) center 72px/min(92vw,560px) auto no-repeat,
    #0a0a0a}
  .mijloc{padding-top:calc(min(92vw,560px)*.9)}
  .jos{margin-top:auto}
}
.scena .film{object-fit:contain;object-position:right center}

/* Usa se deschide cel mai des de pe telefon: legatura se da prin mesaj.
   Aceleasi praguri de atingere ca in restul site-ului. */
@media (pointer:coarse){
  a{-webkit-tap-highlight-color:rgba(187,157,123,.2)}
  .cheie{min-height:46px;padding-bottom:0}
  .marca{display:inline-flex;align-items:center;min-height:46px}
  .telefon{display:inline-flex;align-items:center;min-height:52px}
  .coordonate a{display:inline-block;padding:11px 0}
  .atelier{display:inline-flex;align-items:center;min-height:46px;margin-top:6px}
}

@supports (padding:max(0px)){
  .scena{
    padding-left:max(clamp(28px,4.4vw,56px),env(safe-area-inset-left));
    padding-right:max(clamp(28px,4.4vw,56px),env(safe-area-inset-right));
    padding-bottom:max(clamp(28px,4.4vw,56px),env(safe-area-inset-bottom));
  }
}