/* hero.css: the layered photo hero and the video hero, ported from hero/hero_template3.html (approved round 4).
   Protected effects 1, 3, 4, 5: 4 planes at 0.10/0.25/0.45/0.85, copy + scrims at 0.65 (site.js reads data-rate),
   short-landscape single column with the headline lifted onto the foreground (--ls-lt, --ls-fy per scene), video pauses off-screen.
   Markup is generated by build.py from a <!--#hero {...}--> directive; see README.md. Per-scene knobs on .scene (inline style):
   --fx / --fxp (focus column desktop / portrait), --ptop, --ls-fy, --ls-lt, --ls-padl, --ls-leadw, --ls-sbh, --ls-below. */

.scene{position:relative;background:var(--ground)}
.hero{position:relative;height:100svh;min-height:360px;overflow:hidden;display:grid;grid-template:1fr/1fr;background:var(--ground);isolation:isolate}
.plane{position:absolute;left:0;right:0;top:var(--ptop,-9%);height:118%;will-change:transform;backface-visibility:hidden}
.plane img,.plane video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--fx,50%) 50%}
@media (max-aspect-ratio:3/4){.plane img,.plane video{object-position:var(--fxp,var(--fx,50%)) 50%}}
.p0{z-index:1}.p1{z-index:2}.p2{z-index:3}
.scrim--a{z-index:4}
.hero__in--under{z-index:5}
.p3{z-index:6}
.scrim--b{z-index:7}
.hero__feather{z-index:8}
.hero__in--over,.hero__foot{z-index:9}
.scrim{position:absolute;inset:0;pointer-events:none}
.hc{display:contents}
.fsep{display:none}
.hero__in,.scrim,.hero__foot{will-change:transform}

/* feathered bottom edge: the stage dissolves into the dark ground, no hard cut (new, allowed by the brief) */
.hero__feather{position:absolute;left:0;right:0;bottom:0;height:clamp(96px,14vh,150px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,16,14,0) 0%,rgba(20,16,14,.55) 55%,var(--ground) 100%)}
body[data-ground="deep"] .hero__feather{background:linear-gradient(to bottom,rgba(14,11,9,0) 0%,rgba(14,11,9,.55) 55%,var(--ground-deep) 100%)}

.hero__in{grid-area:1/1;align-self:end;position:relative;padding:0 var(--gutter) calc(clamp(56px,9vh,110px) + var(--lift,0px));max-width:var(--maxw);width:100%;margin:0 auto}
/* --lift / --lift-p (portrait): a page whose source has no lead or CTA lifts its headline by the missing block, so it sits where the approved demo put it, above the foreground at rest */
.hero .eyebrow{font:600 12px/1 var(--font-body);letter-spacing:.2em;margin:0 0 22px;color:var(--accent-on-photo);text-shadow:0 1px 10px rgba(12,9,7,.55)}
.hero .h1{font-size:var(--fs-display);line-height:var(--lh-display);max-width:12ch;color:var(--ink);text-shadow:0 2px 28px rgba(12,9,7,.35)}
.scene[data-long] .h1{font-size:clamp(44px,6.4vw,100px);max-width:20ch}
@media (max-width:700px){.scene[data-long] .h1{font-size:clamp(34px,10.6vw,56px)}}
.hero .lead{font-size:var(--fs-lede);line-height:1.5;font-weight:400;max-width:56ch;margin:28px 0 36px;color:rgba(250,247,242,.94);
  text-shadow:0 1px 2px rgba(12,9,7,.35),0 1px 18px rgba(12,9,7,.5)}
.hero .lead:last-child{margin-bottom:0}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
/* hero buttons exactly as the approved demo (hero_template3): pills, 500 14px, .02em */
.hero .btn{border-radius:var(--r-pill);padding:16px 26px;font:500 14px/1 var(--font-body);letter-spacing:.02em}
.hero .btn--secondary,.hero .btn--ghost{border-color:rgba(250,247,242,.5);color:var(--ink);background:rgba(250,247,242,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero__foot{position:absolute;right:var(--gutter);bottom:clamp(56px,9vh,110px);font:400 12px/1.6 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,242,.8);text-align:right}
.foot-m{display:none;margin:18px 0 0;font:400 11.5px/1.6 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,242,.8)}
@media (max-width:900px){.hero__foot{display:none}.foot-m{display:block}}

/* C-20260925-98 (Michael, phone 9:16: "mijlocul atenției", not the middle of the image): on portrait phones every hero is
   framed on its centre of attention. --pc = that centre as a fraction of the source frame width, the SAME for all four planes
   (they stay registered). The plane stack is scaled down to the smallest size that still never shows an edge: 101% of the hero
   height (the parallax only ever moves a plane DOWN inside the hero, so 101% covers every scroll offset; checked with the
   debug-shift frames in qa/fix1/hero-frame.mjs). The image left edge is clamped so no side is ever exposed. Landscape untouched. */
@media (orientation:portrait) and (max-width:600px){
  .scene{--hh:100svh;--pc:.5}
  .scene[data-banner]{--hh:60svh}
  .plane{top:-.5%;height:101%}
  .plane img,.plane video{object-position:clamp(calc(100vw - var(--hh) * 1.01 * 16 / 9),calc(50vw - var(--pc) * var(--hh) * 1.01 * 16 / 9),0px) 50%}
  .scene[data-scene="s2a"]{--pc:.62}    /* the lit tasting pavilion and its tower, river and sunset above */
  .scene[data-scene="s6c2"]{--pc:.47}   /* the winery's main block with the terrace, vine rows around it */
  .scene[data-scene="s1a"],.scene[data-scene="s1a2"]{--pc:.63}    /* the sunrise over the hills, the house and the vine rows running to it */
  .scene[data-scene="s6bg2"]{--pc:.45}  /* the lit glass floor of the winery at dusk */
  .scene[data-kind="video"]{--pc:.69}   /* bottle lip, the stream and the glass, all three */
  .scene[data-scene="s3b"]{--pc:.66}    /* the farmhouse, whole */
  /* the smaller stack brings the foreground leaves up: the headline rises by --pl so it still sits above them at rest
     (the leaves then cross it on scroll, protected effect 1) */
  .scene .hero__in{padding-bottom:calc(40px + var(--lift-p,var(--lift,0px)) + var(--pl,0px))}
  .scene[data-scene="s6c2"]{--pl:max(0px,calc(55svh - 416px))}   /* measured: 0 at 660, 48 at 844, 96 at 932 px tall */
  .scene[data-scene="s1a"],.scene[data-scene="s1a2"]{--pl:max(0px,calc(27.3svh - 206px))}  /* 0 at 660, 24 at 844, 48 at 932 */
  .scene[data-scene="s6bg2"]{--pl:max(0px,calc(12svh - 36px))}   /* 40 at 660, 64 at 844, 72 at 932 */
}

/* the headline lives between L2 and L3; everything else sits above L3 */
.hero__in--under .eyebrow,.hero__in--under .lead,.hero__in--under .cta,.hero__in--under .foot-m{visibility:hidden}
.hero__in--over .h1{color:transparent;text-shadow:none}

/* scrims (paper copy on a photograph). A under the headline carries the copy block; B above L3 stops at the headline's bottom edge. */
.scene .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.32) 0%,rgba(var(--scrim-rgb),0) 20%),
    radial-gradient(74% 72% at 16% 68%,rgba(var(--scrim-rgb),.6) 0%,rgba(var(--scrim-rgb),.32) 52%,rgba(var(--scrim-rgb),0) 100%)}
.scene .scrim--b{background:
    linear-gradient(to top,rgba(var(--scrim-rgb),.62) 0%,rgba(var(--scrim-rgb),.42) 20%,rgba(var(--scrim-rgb),.2) 29%,rgba(var(--scrim-rgb),0) 34%),
    radial-gradient(52% 34% at 14% 100%,rgba(var(--scrim-rgb),.40) 0%,rgba(var(--scrim-rgb),0) 100%)}
/* bright sky behind the header, lit windows behind the eyebrow (s6bg2, s6c2): deeper veil + scrim */
.scene[data-sky="bright"] .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.7) 0%,rgba(var(--scrim-rgb),.4) 11%,rgba(var(--scrim-rgb),0) 24%),
    radial-gradient(74% 72% at 16% 68%,rgba(var(--scrim-rgb),.66) 0%,rgba(var(--scrim-rgb),.4) 52%,rgba(var(--scrim-rgb),0) 100%)}
/* heavier scenes opt in with data-scrim="deep" on .scene */
.scene[data-scrim="deep"] .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.6) 0%,rgba(var(--scrim-rgb),.3) 12%,rgba(var(--scrim-rgb),0) 24%),
    radial-gradient(80% 78% at 16% 70%,rgba(var(--scrim-rgb),.74) 0%,rgba(var(--scrim-rgb),.48) 52%,rgba(var(--scrim-rgb),0) 100%)}

@media (max-width:700px){
  .scene .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.28) 0%,rgba(var(--scrim-rgb),0) 16%),
    linear-gradient(to top,rgba(var(--scrim-rgb),.62) 0%,rgba(var(--scrim-rgb),.42) 45%,rgba(var(--scrim-rgb),0) 70%)}
  .scene .scrim--b{background:linear-gradient(to top,rgba(var(--scrim-rgb),.55) 0%,rgba(var(--scrim-rgb),.3) 25%,rgba(var(--scrim-rgb),0) 40%)}
  .scene[data-sky="bright"] .scrim--a,.scene[data-scrim="deep"] .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.4) 0%,rgba(var(--scrim-rgb),0) 16%),
    linear-gradient(to top,rgba(var(--scrim-rgb),.72) 0%,rgba(var(--scrim-rgb),.6) 48%,rgba(var(--scrim-rgb),.46) 60%,rgba(var(--scrim-rgb),0) 82%)}
  .hero__in{padding-bottom:calc(40px + var(--lift-p,var(--lift,0px)))}
  .hero .lead{margin:22px 0 26px}
  .hero .eyebrow{margin-bottom:16px}
}

/* short landscape (phones on their side): ONE column, eyebrow, headline, lead, CTA row, foot line, all above the browser bars.
   The headline group is lifted until its bottom edge sits on the top of the foreground leaves (--ls-lt, fraction of the photo),
   so the leaves touch it at rest and cross it on scroll; lead/CTA/foot stay anchored at the bottom. --below = lead + CTA + foot. */
@media (max-height:520px) and (orientation:landscape){
  .hero{--fs-display:clamp(28px,8vh,40px)}
  .hero__in{padding-left:max(var(--ls-padl,var(--gutter)),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
    padding-bottom:calc(12px + var(--bars))}
  .hero .eyebrow{margin:0 0 8px;font-size:11px}
  .hero .h1,.scene[data-long] .h1{font-size:var(--fs-display);max-width:none}
  .hero .lead{font-size:13.5px;line-height:1.35;max-width:var(--ls-leadw,60ch);margin:10px 0 12px}
  .hero .btn{min-height:44px;padding:12px 18px;font-size:13px}
  .hero .cta{flex-wrap:nowrap;gap:10px}
  .hero__foot{display:none}
  .foot-m{display:block;margin:10px 0 0;white-space:nowrap;font-size:10.5px;line-height:16px}
  .foot-m br{display:none}
  .foot-m .fsep{display:inline}
  .hc{display:block}
  .hero__in{--F:max(56.25vw,118svh);--below:var(--ls-below,calc(10px + 3 * 13.5px * 1.35 + 12px + 44px + 10px + 16px))}
  .hc--l{padding-bottom:max(0px,calc(100svh - 12px - var(--bars) - var(--below) - var(--ls-lt,2) * var(--F) + var(--ls-fy,0) * (var(--F) - 100svh)))}
  /* pages with a lead but no CTA/foot (data-ls-group): the lead travels with the headline, the same lift sits under the lead */
  .scene[data-ls-group] .hc--r{padding-bottom:max(0px,calc(100svh - 12px - var(--bars) - var(--below) - var(--ls-lt,2) * var(--F) + var(--ls-fy,0) * (var(--F) - 100svh)))}
  .scene[data-ls-group] .hc--l{padding-bottom:0}
  .plane{top:calc(var(--ls-fy,0) * -18%)}
  .plane img,.plane video{object-position:var(--fx,50%) calc(var(--ls-fy,0) * 100%)}
  .scene .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.3) 0%,rgba(var(--scrim-rgb),0) 18%),
    radial-gradient(64% 86% at 18% 78%,rgba(var(--scrim-rgb),.64) 0%,rgba(var(--scrim-rgb),.38) 52%,rgba(var(--scrim-rgb),0) 100%)}
  .scene[data-sky="bright"] .scrim--a,.scene[data-scrim="deep"] .scrim--a{background:
    linear-gradient(to bottom,rgba(var(--scrim-rgb),.55) 0%,rgba(var(--scrim-rgb),0) 26%),
    radial-gradient(64% 86% at 18% 78%,rgba(var(--scrim-rgb),.74) 0%,rgba(var(--scrim-rgb),.48) 52%,rgba(var(--scrim-rgb),0) 100%)}
  .scene .scrim--b{background:
    radial-gradient(52% var(--ls-sbh,34%) at 20% 100%,rgba(var(--scrim-rgb),.5) 0%,rgba(var(--scrim-rgb),.26) 55%,rgba(var(--scrim-rgb),0) 100%)}
  .hero__feather{height:48px}
}

/* video hero (Magazin): one plane at 0.10, muted loop while on screen, poster = first frame, paused in reduced motion */
.scene[data-kind="video"] .plane video{background:var(--ground)}
/* no foreground plane on the video scene: the headline is drawn in the OVER layer so scrim B never greys it (SHOP_NEEDS 2, absorbed) */
.scene[data-kind="video"] .hero__in--over .h1{color:var(--ink);text-shadow:0 2px 28px rgba(12,9,7,.35)}
.scene[data-kind="video"] .hero__in--under .h1{visibility:hidden}

/* copy-free banner (Contact, s3b engraving): same four planes and rates, 60svh, the engraving graded dark so the page never
   opens on a light screen (protected effect 6); the feathered edge dissolves it into the ground. No copy on it. */
.scene[data-banner] .hero{height:60svh;min-height:280px}
.scene[data-banner] .plane img{filter:brightness(.46) sepia(.25) saturate(.9)}
.scene[data-banner] .hero::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.45) 0%,rgba(var(--scrim-rgb),0) 30%)}
.scene[data-banner] .hero__feather{height:clamp(110px,18vh,190px)}
@media (max-height:520px) and (orientation:landscape){.scene[data-banner] .hero{height:62svh}}