/* ============================================================
   CLARET — bucătărie de autor, în lumină de lumânare
   Design tokens
   ============================================================ */
:root{
  --bg: #150c10;
  --surface: #1d1116;
  --surface-2: #241319;
  --text: #f3e9e2;
  --muted: #b8a79c;
  --claret: #8e1638;
  --claret-deep: #5c0e22;
  --claret-bright: #b3204a;
  --claret-text: #e06a8a; /* variantă deschisă, doar pt. text (WCAG 4.5:1+ pe bg/surface-2) */
  --brass: #c9a05b;
  --brass-soft: rgba(201,160,91,.16);
  --line: rgba(243,233,226,.14);
  --line-strong: rgba(243,233,226,.26);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-lux: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .3s;
  --dur-med: .6s;
  --dur-slow: 1.4s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p,figure{ margin: 0; }

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

h1,h2,h3,.font-display{ font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }
em, .italic{ font-style: italic; }
.accent{ color: var(--brass); font-style: italic; }

.eyebrow{
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before{ content: ''; width: 2.25rem; height: 1px; background: var(--brass); }

.h-xl{ font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .96; }
.h-lg{ font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.02; }
.h-md{ font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.08; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.65; color: var(--muted); font-weight: 400; max-width: 42ch; }

/* ============================================================
   Cursor custom
   ============================================================ */
body.cursor-hidden .cursor-dot, body.cursor-hidden .cursor-ring{ opacity: 0; }
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: opacity .3s ease, width .3s var(--ease-lux), height .3s var(--ease-lux);
}
.cursor-dot{ width: 6px; height: 6px; background: #fff; }
.cursor-ring{ width: 34px; height: 34px; border: 1px solid #fff; }
.cursor-ring.is-active{ width: 60px; height: 60px; background: rgba(255,255,255,.08); }
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; height: 3.1rem; padding-inline: 2rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
}
.btn-primary{ background: var(--claret); color: var(--text); }
.btn-primary span{ position: relative; z-index: 2; }
.btn-primary::before{
  content: ''; position: absolute; inset: 0; background: var(--brass);
  transform: translateX(-101%); transition: transform .5s var(--ease-lux); z-index: 1;
}
.btn-primary:hover::before{ transform: translateX(0); }
.btn-primary:hover{ color: var(--bg); }
.btn-ghost{ border: 1px solid var(--line-strong); color: var(--text); background: transparent; transition: background .5s var(--ease-lux), border-color .5s var(--ease-lux); }
.btn-ghost:hover{ background: rgba(243,233,226,.06); border-color: var(--brass); }
.btn-brass{ background: var(--brass); color: var(--bg); }
.btn-brass:hover{ background: var(--claret-bright); color: var(--text); }
.btn-sm{ height: 2.6rem; padding-inline: 1.4rem; font-size: .68rem; }
.btn-block{ width: 100%; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{
  position: fixed; inset-inline: 0; top: 0; z-index: 500;
  padding-block: 1.6rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease-lux), border-color .5s var(--ease-lux), padding .4s var(--ease-lux);
}
.site-header.is-solid{
  background: rgba(21,12,16,.92);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  padding-block: 1.05rem;
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand{ font-family: var(--font-display); font-size: 1.55rem; letter-spacing: .05em; }
.brand small{ display: block; font-family: var(--font-body); font-size: .58rem; letter-spacing: .3em; color: var(--brass); font-weight: 700; margin-top: .1rem; }

.nav-links{ display: flex; align-items: center; gap: 2.4rem; }
.nav-links a{
  position: relative; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding-block: .3rem;
}
.nav-links a::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--brass);
  transition: right .4s var(--ease-lux);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right: 0; }
.nav-links a[aria-current="page"]{ color: var(--brass); }

.nav-cta{ display: flex; align-items: center; gap: 1.4rem; }
.nav-toggle{
  display: none; flex-direction: column; gap: 5px; width: 26px; z-index: 600;
}
.nav-toggle span{ height: 1px; background: var(--text); transition: transform .35s var(--ease-lux), opacity .35s var(--ease-lux); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-links{
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: flex-start;
    gap: 1.6rem; padding: 7.5rem var(--gutter) 3rem; background: var(--surface-2);
    transform: translateY(-115%); visibility: hidden;
    transition: transform .45s var(--ease-lux), visibility 0s .45s;
  }
  .nav-links.is-open{ transform: translateY(0); visibility: visible; transition: transform .45s var(--ease-lux), visibility 0s; }
  .nav-links a{ font-size: 1.4rem; font-family: var(--font-display); text-transform: none; letter-spacing: 0; }
  .nav-cta .btn-ghost{ display: none; }
  .nav-toggle{ display: flex; }
}

/* ============================================================
   Hero (Acasă)
   ============================================================ */
.hero{
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--bg);
}
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
  animation: heroZoom 22s var(--ease-lux) infinite alternate;
}
@keyframes heroZoom{ from{ transform: scale(1); } to{ transform: scale(1.09); } }
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(21,12,16,.96) 0%, rgba(21,12,16,.5) 42%, rgba(21,12,16,.35) 100%),
    linear-gradient(90deg, rgba(21,12,16,.55) 0%, rgba(21,12,16,0) 45%);
}
.hero-embers{ position: absolute; inset: 0; z-index: 2; opacity: .8; pointer-events: none; }
.hero-embers canvas{ width: 100%; height: 100%; display: block; }

.hero-body{ position: relative; z-index: 3; width: 100%; padding-block: 8rem 4.5rem; }
.hero-body .container{ display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; }
.hero-copy{ max-width: 44rem; }
.hero-title{ margin-block: 1rem 1.4rem; }
.hero-title .reveal-line{ overflow: hidden; }
.hero-title .reveal-line span{ display: block; }
.hero-cta{ display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }

.reserve-card{
  width: 19.5rem; background: rgba(29,17,22,.86); border: 1px solid var(--line-strong);
  padding: 1.75rem; backdrop-filter: blur(6px);
}
.reserve-card h3{ font-size: 1.15rem; margin-bottom: .35rem; }
.reserve-card p{ font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; }
.reserve-card .field{ margin-bottom: .8rem; }

@media (max-width: 980px){
  .hero-body .container{ grid-template-columns: 1fr; }
  .reserve-card{ width: 100%; }
}

/* ============================================================
   Fields
   ============================================================ */
.field label{ display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.field input, .field select, .field textarea{
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--text); font-family: var(--font-body); font-size: .92rem; padding: .55rem 0;
  transition: border-color .3s var(--ease-lux);
}
.field textarea{ resize: vertical; min-height: 5rem; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--brass); }
.field input::placeholder, .field textarea::placeholder{ color: rgba(184,167,156,.55); font-style: italic; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--claret-text); }
.field-error{ display: none; color: var(--claret-text); font-size: .72rem; margin-top: .35rem; }
.field.has-error .field-error{ display: block; }
select{ appearance: none; -webkit-appearance: none; }
.field select{ background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 4px) 1rem, calc(100% - 0px) 1rem; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option{ background: var(--surface-2); }

/* ============================================================
   Sections generic
   ============================================================ */
section{ position: relative; }
.pad-lg{ padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.pad-md{ padding-block: clamp(3.5rem, 6vw, 6rem); }
.divider{ height: 1px; background: var(--line); }

.reveal{ opacity: 0; transform: translateY(34px); }
.reveal-mask{ overflow: hidden; }
.js-ready .reveal{ transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }
.js-ready .reveal.in{ opacity: 1; transform: translateY(0); }

.section-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap; }

/* Story split */
.story{ display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.story-media{ position: relative; aspect-ratio: 4/5; overflow: hidden; }
.story-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) saturate(1.05); transition: transform 1.8s var(--ease-lux), filter 1.8s var(--ease-lux); }
.story-media:hover img{ transform: scale(1.06); filter: grayscale(0) saturate(1.15); }
.story-media::after{ content:''; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(243,233,226,.12); }
.story-text p + p{ margin-top: 1.1rem; }
.story-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.story-stats .stat b{ display:block; font-family: var(--font-display); font-size: 2.4rem; color: var(--brass); }
.story-stats .stat span{ font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px){
  .story{ grid-template-columns: 1fr; }
  .story-stats{ grid-template-columns: repeat(3,1fr); gap: 1rem; }
}

/* Signature preview strip (index) */
.dish-strip{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.dish-card{ position: relative; background: var(--bg); aspect-ratio: 3/4; overflow: hidden; }
.dish-card img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.75); transition: filter 1.6s var(--ease-lux), transform 1.6s var(--ease-lux); }
.dish-card:hover img{ filter: grayscale(0) brightness(.95); transform: scale(1.05); }
.dish-card .dish-info{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; background: linear-gradient(0deg, rgba(21,12,16,.92), transparent); }
.dish-card .dish-info span{ font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.dish-card .dish-info h3{ font-size: 1.4rem; margin-top: .3rem; }
@media (max-width: 760px){ .dish-strip{ grid-template-columns: 1fr; } }

/* Quote */
.quote{ text-align: center; max-width: 46rem; margin-inline: auto; }
.quote blockquote{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem,3vw,2.4rem); line-height: 1.3; }
.quote cite{ display: block; margin-top: 1.5rem; font-style: normal; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* CTA band */
.cta-band{ text-align: center; background: var(--surface-2); }
.cta-band h2{ margin-bottom: 1.6rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top: 1px solid var(--line); padding-top: clamp(3rem,6vw,5rem); }
.footer-cta{ text-align: center; padding-bottom: clamp(2.5rem,5vw,4rem); border-bottom: 1px solid var(--line); }
.footer-cta h2{ max-width: 30ch; margin-inline: auto; margin-bottom: 1.8rem; }
.footer-grid{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; padding-block: 3rem; }
.footer-grid h4{ font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.footer-grid p, .footer-grid li{ font-size: .88rem; color: var(--muted); line-height: 1.9; }
.footer-grid a:hover{ color: var(--brass); }
.footer-brand .brand{ font-size: 1.7rem; }
.footer-brand p{ margin-top: 1rem; max-width: 26ch; }
.socials{ display: flex; gap: 1rem; margin-top: 1.2rem; }
.socials a{ width: 2.2rem; height: 2.2rem; border: 1px solid var(--line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; transition: border-color .3s, color .3s; }
.socials a:hover{ border-color: var(--brass); color: var(--brass); }
.footer-bottom{ display: flex; justify-content: space-between; padding-block: 1.5rem; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--line); flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction: column; text-align: center; } }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero{ padding-block: 9.5rem 3.5rem; }
.page-hero .breadcrumb{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }
.page-hero .breadcrumb a:hover{ color: var(--brass); }
.page-hero-media{ position: relative; height: 340px; overflow: hidden; margin-top: 3rem; }
.page-hero-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.6); }

/* ============================================================
   Menu page
   ============================================================ */
.menu-filters{ display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.menu-filters button{
  padding: .6rem 1.3rem; border: 1px solid var(--line-strong); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; transition: all .35s var(--ease-lux);
}
.menu-filters button.is-active, .menu-filters button:hover{ background: var(--claret); border-color: var(--claret); }

.menu-category{ margin-bottom: 4.5rem; }
.menu-category-title{ display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.menu-category-title h2{ font-size: 1.9rem; }
.menu-category-title .cat-note{ color: var(--muted); font-size: .82rem; font-style: italic; }

.menu-item{ padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.menu-item.is-hidden{ display: none; }
.menu-item-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.menu-item-name{ display: flex; align-items: baseline; gap: .6rem; flex: 1; min-width: 0; }
.menu-item-name h3{ font-size: 1.2rem; white-space: nowrap; }
.menu-item-name .leader{ flex: 1; border-bottom: 1px dotted var(--line-strong); height: 1px; margin-bottom: .4rem; min-width: 1rem; }
.menu-item-desc{ display: block; font-size: .84rem; color: var(--muted); margin-top: .5rem; max-width: 46ch; }
.menu-item-price{ font-family: var(--font-display); font-size: 1.2rem; color: var(--brass); white-space: nowrap; }
.menu-item-tags{ display: inline-flex; gap: .35rem; margin-left: .5rem; }
.menu-item-tags span{ font-size: .6rem; border: 1px solid var(--line-strong); padding: .1rem .4rem; letter-spacing: .05em; color: var(--muted); }

@media (max-width: 640px){
  .menu-item-top{ flex-direction: column; align-items: flex-start; gap: .3rem; }
  .menu-item-name .leader{ display: none; }
}

/* Signature 3D section */
.signature{ background: var(--surface-2); overflow: hidden; }
.signature-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
/* Animație de turnare — CSS pur, buclă infinită, ZERO ascultători de eveniment.
   Deliberat needependentă de mouse/touch (cerere explicită a clientului: un pahar
   3D interactiv a creat probleme de percepție pe anumite hover-uri; înlocuit cu o
   animație simplă, decorativă, imună la orice interacțiune a utilizatorului).
   Scenariu (fizica turnării): sticla stă dreaptă pe masă → se ridică și se apleacă
   până gâtul ajunge deasupra paharului → vinul curge (linie verticală, cade drept
   sub gravitație, indiferent de unghiul sticlei) → paharul se umple → sticla se
   îndreaptă și coboară singură la loc pe masă. Punctul de pivot (transform-origin)
   e fixat chiar în gura sticlei, ca gâtul să rămână "ancorat" deasupra paharului
   cât timp toarnă, în loc să alunece vizual pe măsură ce sticla se rotește. */
.pour-scene{ position: relative; aspect-ratio: 1/1; }
.pour-table{
  position: absolute; left: 6%; right: 4%; bottom: 4%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

.pour-bottle{
  position: absolute; width: 17%; height: 44%;
  transform-origin: 50% -4%; /* pivotul e chiar în gura sticlei */
  animation: pourBottle 7s ease-in-out infinite;
}
.pour-bottle-neck{ position: absolute; top: 0; left: 32%; width: 36%; height: 30%; background: linear-gradient(180deg, #2a3a2c, #12190f); border: 1px solid var(--line-strong); border-radius: 3px 3px 1px 1px; }
.pour-bottle-cap{ position: absolute; top: -4%; left: 38%; width: 24%; height: 8%; background: var(--brass); border-radius: 2px; }
.pour-bottle-body{ position: absolute; bottom: 0; left: 0; width: 100%; height: 74%; background: linear-gradient(160deg, #33452f, #101a10 70%); border: 1px solid var(--line-strong); border-radius: 38% 38% 12% 12% / 22% 22% 8% 8%; box-shadow: inset -6px 0 14px rgba(0,0,0,.5); }
.pour-bottle-label{ position: absolute; bottom: 28%; left: 14%; width: 72%; height: 30%; background: var(--surface-2); border: 1px solid var(--brass-soft); display: flex; align-items: center; justify-content: center; }
.pour-bottle-label span{ font-family: var(--font-display); font-style: italic; font-size: .62rem; letter-spacing: .06em; color: var(--brass); transform: rotate(90deg); white-space: nowrap; }

.pour-stream{
  position: absolute; top: 27%; left: 51.5%; width: 3px; height: 21%;
  background: linear-gradient(180deg, rgba(142,22,56,.15), var(--claret) 30%, var(--claret-bright));
  border-radius: 2px; transform: scaleY(0); transform-origin: top center;
  animation: pourStream 7s ease-in-out infinite;
}

.pour-glass{ position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 40%; height: 46%; }
.glass-bowl{
  position: absolute; top: 0; left: 18%; width: 64%; height: 60%;
  border: 1.5px solid var(--line-strong); border-radius: 10% 10% 62% 62% / 8% 8% 78% 78%;
  overflow: hidden; background: linear-gradient(180deg, rgba(243,233,226,.05), rgba(243,233,226,.02));
  box-shadow: inset 0 0 18px rgba(243,233,226,.06);
}
.wine-fill{
  position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--claret-bright), var(--claret-deep));
  animation: pourFill 7s ease-in-out infinite;
}
/* Picior de pahar premium: atinge cupa și talpa exact la margine (fără să intre
   în cavitate sau să străpungă talpa) — doar o suprapunere infimă (.5%) cu cupa,
   ca să nu rămână un gol de 1px vizibil, fără NICIO suprapunere cu talpa. */
.glass-stem{ position: absolute; top: 59.5%; left: 48.7%; width: 2.6%; height: 35%; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: .85; }
.glass-foot{
  position: absolute; bottom: 0; left: 24%; width: 52%; height: 5.5%; border-radius: 50%;
  border: 1px solid var(--brass-soft);
  background: radial-gradient(ellipse at 50% 35%, rgba(201,160,91,.4), rgba(201,160,91,.12) 65%, transparent 100%);
}

@keyframes pourBottle{
  0%, 8%   { top: 52%;    left: 69.5%; transform: rotate(0deg); }
  26%      { top: 28.76%; left: 43%;   transform: rotate(120deg); }
  54%      { top: 28.76%; left: 43%;   transform: rotate(120deg); }
  84%, 100%{ top: 52%;    left: 69.5%; transform: rotate(0deg); }
}
@keyframes pourStream{
  0%, 27%  { transform: scaleY(0); opacity: 0; }
  31%      { transform: scaleY(1); opacity: 1; }
  51%      { transform: scaleY(1); opacity: 1; }
  55%,100% { transform: scaleY(0); opacity: 0; }
}
@keyframes pourFill{
  0%, 27%  { height: 0%;   opacity: 1; }
  55%      { height: 66%;  opacity: 1; }
  90%      { height: 66%;  opacity: 1; }
  96%      { height: 66%;  opacity: 0; }
  97%,100% { height: 0%;   opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pour-bottle, .pour-stream, .wine-fill{ animation: none; }
  .pour-bottle{ top: 52%; left: 69.5%; transform: rotate(0deg); }
  .wine-fill{ height: 55%; }
  .pour-stream{ transform: scaleY(0); opacity: 0; }
}

.signature-hint{ margin-top: 1rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (max-width: 860px){ .signature-grid{ grid-template-columns: 1fr; } }
@media (max-width: 860px){ .pour-scene{ width: 100%; max-width: 20rem; margin-inline: auto; } }

.wine-band{ position: relative; padding-block: clamp(4rem,8vw,7rem); }
.wine-band-media{ position: absolute; inset: 0; z-index: 0; }
.wine-band-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.32); }
.wine-band-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, var(--bg), rgba(21,12,16,.55) 30%, var(--bg)); }
.wine-band-body{ position: relative; z-index: 1; }
.wine-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 3rem; margin-top: 2.5rem; }
.wine-list .menu-item{ border-bottom-color: var(--line-strong); }
@media (max-width: 760px){ .wine-list{ grid-template-columns: 1fr; } }

/* ============================================================
   Despre page
   ============================================================ */
.dropcap::first-letter{
  font-family: var(--font-display); font-size: 4.2rem; float: left; line-height: .8;
  margin: .08em .18em 0 0; color: var(--brass);
}
.values-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
.value-card{ border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.value-card .num{ font-family: var(--font-display); font-size: 1.1rem; color: var(--brass); }
.value-card h3{ font-size: 1.3rem; margin-block: .8rem .6rem; }
.value-card p{ color: var(--muted); font-size: .9rem; }
@media (max-width: 760px){ .values-grid{ grid-template-columns: 1fr; gap: 1.75rem; } }

.team-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.team-card{ position: relative; overflow: hidden; aspect-ratio: 3/4; }
.team-card img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 1.6s var(--ease-lux); }
.team-card:hover img{ filter: grayscale(0); }
.team-card .team-info{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; background: linear-gradient(0deg, rgba(21,12,16,.92), transparent); }
.team-card .team-info span{ display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-top: .2rem; }
@media (max-width: 760px){ .team-grid{ grid-template-columns: 1fr 1fr; } }

.cellar-band{ display: grid; grid-template-columns: 1fr 1fr; }
.cellar-media{ position: relative; min-height: 26rem; }
.cellar-media img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cellar-text{ display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem,5vw,5rem); background: var(--surface-2); }
@media (max-width: 860px){ .cellar-band{ grid-template-columns: 1fr; } .cellar-media{ min-height: 20rem; } }

/* ============================================================
   Galerie page
   ============================================================ */
.gallery-filters{ display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.gallery-filters button{ padding: .55rem 1.2rem; border: 1px solid var(--line-strong); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; transition: all .3s var(--ease-lux); }
.gallery-filters button.is-active, .gallery-filters button:hover{ background: var(--brass); color: var(--bg); border-color: var(--brass); }

/* Grid uniform (nu masonry pe coloane CSS) — predictibil, aceleași proporții pe
   fiecare placă, indiferent de raportul de aspect al sursei; mai curat pentru un
   site editorial fine-dining decât un masonry inegal. */
.masonry{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.masonry-item{ position: relative; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/5; }
.masonry-item.is-hidden{ display: none; }
.masonry-item img{ width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.05); transition: transform 1.4s var(--ease-lux), filter 1.4s var(--ease-lux); }
.masonry-item:hover img{ transform: scale(1.06); filter: saturate(1.2) brightness(1.05); }
.masonry-item .zoom-mark{ position: absolute; right: .9rem; bottom: .9rem; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(243,233,226,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; opacity: 0; transition: opacity .3s var(--ease-lux); background: rgba(21,12,16,.4); }
.masonry-item:hover .zoom-mark{ opacity: 1; }
@media (max-width: 860px){ .masonry{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .masonry{ grid-template-columns: 1fr; gap: .8rem; } }

.lightbox{
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(10,6,8,.94); padding: 2rem;
}
.lightbox.is-open{ display: flex; }
.lightbox img{ max-width: min(92vw, 1100px); max-height: 82vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute; color: var(--text); width: 2.8rem; height: 2.8rem; border: 1px solid var(--line-strong);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: border-color .3s, background .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color: var(--brass); background: rgba(201,160,91,.12); }
.lightbox-close{ top: 1.5rem; right: 1.5rem; }
.lightbox-prev{ left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-caption{ position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); font-size: .78rem; color: var(--muted); letter-spacing: .06em; }
@media (max-width: 640px){ .lightbox-prev, .lightbox-next{ width: 2.3rem; height: 2.3rem; font-size: .95rem; } }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem,6vw,6rem); align-items: start; }
.contact-form{ background: var(--surface-2); padding: clamp(1.75rem,4vw,3rem); border: 1px solid var(--line); }
.contact-info-block + .contact-info-block{ margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.contact-info-block h3{ font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.hours-table{ width: 100%; font-size: .9rem; }
.hours-table tr{ border-bottom: 1px solid var(--line); }
.hours-table td{ padding-block: .55rem; color: var(--muted); }
.hours-table td:last-child{ text-align: right; color: var(--text); }
.map-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 1rem; border: 1px solid var(--line-strong); overflow: hidden; }
.map-grid img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) sepia(.15) brightness(.85); transition: filter .4s; }
.map-grid a:hover img{ filter: grayscale(0) sepia(0) brightness(1); }
.form-status{ margin-top: 1.2rem; font-size: .85rem; display: none; }
.form-status.is-visible{ display: block; }
.form-status.is-success{ color: var(--brass); }
.form-status.is-error{ color: var(--claret-text); }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .field-row{ grid-template-columns: 1fr; } .map-grid{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   Utility
   ============================================================ */
.skip-link{ position: fixed; top: -100%; left: 1rem; background: var(--brass); color: var(--bg); padding: .7rem 1.2rem; z-index: 2000; font-size: .8rem; }
.skip-link:focus{ top: 1rem; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }