/* ============================================================
   GARAGE TOUR — homepage hero styling (js/hero/garage-hero.js)
   Ported from the lab (site/lab/hall/_hall.css + garage.css) but EVERY
   selector is scoped under #fhero so the generic class names
   (.stage/.film/.grain/.progress/.wlabel/.titlecard/.spec) can never leak
   into the rest of the page. Loaded AFTER home.css. Brand tokens come from
   base.css (--accent --drita --serif --mono --ease --text/2/3 --line/2/3).
   Motion = transform + opacity only.
   ============================================================ */

/* ---------- chrome while the hero owns the screen ----------
   the floating WhatsApp pill is hidden during the tour (the nav bar itself is
   kept transparent via nav.js data-lock, not here); both return when the pin
   collapses. */
html.in-hero .cpill{opacity:0;pointer-events:none}
/* …except with the mobile menu open. The in-menu WhatsApp button was removed on
   purpose, so the pill is the ONLY way to reach WhatsApp from the open menu —
   and this file loads after base.css, so its z-index bump alone was not enough
   to undo the hide above. Needs the extra class to outrank it. */
html.in-hero.menu-open .cpill{opacity:1;pointer-events:auto}
.cpill{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* ---------- pinned stage ---------- */
#fhero .stagewrap{position:relative}
#fhero .stage{position:relative;height:100dvh;width:100%;overflow:hidden;background:#040405}
#fhero .stage--film{background:#040405}

/* full-bleed film layers */
#fhero .film{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
#fhero .filmvig{z-index:1;pointer-events:none;
  background:
    radial-gradient(122% 104% at 50% 45%, rgba(3,3,4,0) 40%, rgba(3,3,4,.34) 80%, rgba(3,3,4,.74) 100%),
    linear-gradient(180deg, rgba(3,3,4,.60) 0%, rgba(3,3,4,0) 17%, rgba(3,3,4,0) 63%, rgba(3,3,4,.72) 100%)}
/* scroll-driven "emerge from black" veil — at scroll 0 only the Bugatti's
   front + headlights + lit smoke punch through; lifts over the first ~7%. */
#fhero .filmreveal{z-index:7;pointer-events:none;will-change:opacity;
  background:radial-gradient(64% 48% at 50% 58%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.94) 100%)}
/* search-reveal scrim — this hero ends on a LIT Bugatti 3/4, not a black tail,
   so a dark layer (z between the film and the #fheroFinal search at z4) dims the
   held car while the search blooms over it. Driven by garage-hero.js settle(). */
#fhero .filmscrim{z-index:3;pointer-events:none;will-change:opacity;opacity:0;background:#050506}
/* fine desaturated grain — dithers the dark gradients (below the copy) */
#fhero .grain{z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:130px 130px}

/* ---------- intro title (the Bugatti-frame welcome) ---------- */
#fhero .titlecard{position:absolute;inset:0;z-index:8;display:grid;place-content:center;text-align:center;gap:.9rem;pointer-events:none;will-change:transform,opacity}
#fhero .titlecard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 48%, rgba(3,3,4,.7) 0%, rgba(3,3,4,.36) 44%, rgba(3,3,4,0) 74%)}
/* the greeting. It was --text-3 when it only carried the salon's name, but it
   is the client's «Mirë se vini» now and it sits over moving smoke — one tier
   brighter plus the same shadow the headline gets, or it dissolves into the frame. */
#fhero .titlecard .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--text-2);
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 20px rgba(0,0,0,.7)}
/* The name alone is the headline now — the greeting moved up into the eyebrow.
   --display is Cinzel: CAPITALS ONLY, and at 400 rather than 500 because
   heavier Trajan caps at this scale read as a film title, not a salon.

   ★ 5.65vw / 600 / .14em IS THE SIGNED-OFF SETTING — do not "improve" it. It
   was walked in from both sides over five passes and every bound below is a
   real rejection, not a guess:
       9.3vw / 400  — name across ~80% of the screen · "very big"
       4.8vw / 400  — · "not main enough"
       5.4vw / 500  — · still a touch light
       5.9vw / 600  — · a hair too large
       5.65vw / 600 — ✓ ~46% of a 1440 laptop
   Capitals read a full step larger than lowercase at the same px, so the
   safe-looking number is not the safe-looking screen: only ever change this
   against a screenshot, never by reasoning about the number. Cinzel sets
   «AUTO ALBERTI» ~864px wide per 100px at 600/.14em as rendered — size, weight
   and tracking all move that, so re-measure if any of them changes.

   ★ MOBILE IS TUNED SEPARATELY and was signed off on its own — see the ≤760px
   block below. Do not scale the two together.

   The 4.8rem ceiling is high enough that the vw term still does something up to
   ~1360px. An earlier 4.5rem cap meant the vw was dead above ~1220px and the
   name quietly shrank as a share of the screen on exactly the display it gets
   reviewed on. */
#fhero .titlecard .ttl{font-family:var(--display);font-weight:600;
  font-size:clamp(2.3rem,5.65vw,4.8rem);line-height:1.14;letter-spacing:.14em;
  /* tracking adds a trailing gap after the last capital — pull it back or the
     centred line sits visibly left of centre */
  text-indent:.14em;
  text-shadow:0 2px 30px rgba(0,0,0,.68)}
#fhero .titlecard .sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-2)}

/* the scroll cue — deliberately prominent: bright mono + a bold bouncing chevron */
#fhero .gcue{margin-top:2.4rem;display:inline-flex;flex-direction:column;align-items:center;gap:.95rem;justify-self:center;
  background:none;border:0;cursor:pointer;pointer-events:auto;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text);
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.7);transition:color .3s}
#fhero .gcue:hover{color:var(--drita)}
#fhero .gcue__chev{width:16px;height:16px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);animation:gcueBounce 1.5s var(--ease) infinite;filter:drop-shadow(0 2px 10px rgba(0,0,0,.75))}
@keyframes gcueBounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}
@media (prefers-reduced-motion:reduce){#fhero .gcue__chev{animation:none}}

/* the skip button — quiet counterweight to the scroll cue; fades out on the
   same band as the titlecard (driven in hall-tour.js), so it never lingers.
   pointer-events only while it is actually visible, or an invisible button
   would keep swallowing clicks over the film. */
#fhero .gskip{position:absolute;z-index:9;left:3vw;bottom:3.1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1.15rem;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:rgba(6,6,8,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  cursor:pointer;pointer-events:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,.85);
  transition:border-color .3s,background .3s,color .3s,transform .3s;will-change:opacity}
#fhero .gskip.is-live{pointer-events:auto}
#fhero .gskip:hover{border-color:rgba(255,255,255,.62);background:rgba(12,12,14,.6);transform:translateY(-1px)}
#fhero .gskip:active{transform:scale(.98)}
#fhero .gskip::after{content:"→";font-size:.9rem;line-height:1;opacity:.9;
  transition:transform .3s}
#fhero .gskip:hover::after{transform:translateX(3px)}

/* ---------- spec popups ---------- */
#fhero .wlabel{position:absolute;inset:auto auto 12dvh 6vw;max-width:min(40vw,440px);z-index:9;pointer-events:none;display:block;
  opacity:0;will-change:transform,opacity}
#fhero .wlabel__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--accent);margin-bottom:.9rem}
#fhero .wlabel__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.01em;margin-bottom:.2rem}
#fhero .wlabel__name em{font-style:italic}
#fhero .wlabel__meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:.7rem}
/* per-car "view listing" button — clickable only while its car is on screen
   (.is-live toggled by hall-tour.js); the rest of the panel stays pointer-events:none
   so scroll gestures pass straight through */
#fhero .wlabel__cta{display:inline-flex;align-items:center;gap:.4em;margin-top:1.1rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  padding:.6em 1.15em;border:1px solid var(--line-2);border-radius:999px;
  pointer-events:none;opacity:.92;transition:border-color .3s,background .3s,color .3s}
#fhero .wlabel.is-live .wlabel__cta{pointer-events:auto}
#fhero .wlabel__cta:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.03)}
#fhero .wlabel__rule{margin-top:1.1rem;width:64px;height:1px;background:var(--accent);opacity:.75}
#fhero .spec{margin-top:1.2rem;display:flex;flex-direction:column;gap:.05rem;max-width:340px}
#fhero .spec .row{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem;padding:.62rem 0;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-variant-numeric:tabular-nums}
#fhero .spec .k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
#fhero .spec .v{font-size:.8rem;letter-spacing:.02em;color:var(--text);white-space:nowrap}
/* right-aligned variant for the F9XX (so it never sits on the car) */
#fhero .wlabel--right{left:auto;right:6vw;text-align:right}
#fhero .wlabel--right .wlabel__rule{margin-left:auto}
#fhero .wlabel--right .spec{margin-left:auto}

/* salon metrics — the dealership at a glance (replaces per-car specs on the home
   hero). Bottom-left, out of the Bugatti's 3/4; big serif numerals, mono labels. */
#fhero .wlabel--salon{bottom:12dvh;left:6vw;max-width:min(60vw,560px)}
#fhero .salonrow{display:flex;gap:2.8rem;margin-top:1.1rem}
#fhero .salonstat{display:flex;flex-direction:column;gap:.4rem}
#fhero .salonstat b{font-family:var(--serif);font-weight:460;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#fhero .salonstat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:760px){
  #fhero .salonrow{gap:2rem}
  #fhero .salonstat b{font-size:clamp(2rem,9vw,2.8rem)}
}

/* ---------- scroll progress (bottom hairline, red tip) ---------- */
#fhero .progress{position:absolute;left:0;bottom:0;top:auto;right:auto;width:100%;height:2px;z-index:20;
  background:rgba(255,255,255,.07);pointer-events:none}
#fhero .progress span{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg, rgba(243,243,243,.55) 0%, rgba(243,243,243,.9) 82%, var(--accent) 100%)}
/* homepage hero: no bottom progress hairline — Anes wanted no line separating the
   hero from the sections below. (The Hall tour /te-shitur keeps it for the 90s scrub.) */
#fhero[data-hero="garage"] .progress{display:none}

/* ---------- poster fallback (weak devices / reduced motion / video failure) ---
   home.css already opens #fheroFinal and shows .fhero__poster on .is-poster;
   here we point the poster at the garage still and hide the film + overlays. */
#fhero .fhero__poster{z-index:0;
  background-image:url('/assets/hall/garage-poster.jpg');
  background-image:-webkit-image-set(url('/assets/hall/garage-poster.webp') 1x);
  background-image:image-set(url('/assets/hall/garage-poster.webp') type('image/webp'),
                             url('/assets/hall/garage-poster.jpg') type('image/jpeg'))}

/* ★ Portrait screens get a PORTRAIT still. The frame above is 1600x892; with
   background-size:cover a 390x844 phone scales it to ~1514px wide and shows only
   the middle 390 — the dark roof and windscreen of a black car — and the
   .is-poster ::after gradient then darkens the bottom .82 on top of that. The
   poster read as an empty black screen with the search floating on nothing.
   This frame is the one the film itself settles on (p >= HOLD), so the poster
   tier now lands on the same image the scroll ends on. */
@media (orientation:portrait) and (max-width:900px){
  #fhero .fhero__poster{
    background-image:url('/assets/hall/garage-poster-portrait.jpg');
    background-image:-webkit-image-set(url('/assets/hall/garage-poster-portrait.webp') 1x);
    background-image:image-set(url('/assets/hall/garage-poster-portrait.webp') type('image/webp'),
                               url('/assets/hall/garage-poster-portrait.jpg') type('image/jpeg'))}
}
#fhero.is-poster .film,
#fhero.is-poster .titlecard,
#fhero.is-poster .gskip,
#fhero.is-poster .wlabel,
#fhero.is-poster .progress{display:none}

/* ★★ THE reason the poster tier has always looked like a black screen: .stage
   carries an OPAQUE background:#040405, sits after .fhero__poster in the DOM
   and so paints straight over it. The poster was loading and rendering
   perfectly the whole time — nobody could see it. In poster mode the video
   inside the stage is display:none, so the box has nothing left to hide and
   the still belongs behind the search. */
#fhero.is-poster .stage,
#fhero.is-poster .stage--film{background:transparent}

/* The scrim in home.css was balanced against the LANDSCAPE still, whose centre
   crop was nearly black anyway. Against the portrait frame the car sits right
   under the brand row and the «Salla e Ikonave» button, and the headlights eat
   them. Deeper through the 45-70% band buys the text back without flattening
   the car to a silhouette. ID selector so it wins wherever this file loads. */
@media (orientation:portrait) and (max-width:900px){
  #fhero.is-poster .fhero__poster::after{
    background:linear-gradient(180deg,
      rgba(5,5,5,.58) 0%,
      rgba(5,5,5,.40) 24%,
      rgba(5,5,5,.60) 46%,
      rgba(5,5,5,.80) 66%,
      rgba(5,5,5,.92) 100%)}
}

/* ---------- mobile: full-bleed, fills the screen vertically ----------
   Anes wants the film to fill the phone screen (portrait), not sit letterboxed
   as a small landscape strip. object-fit:cover fills the viewport height; the
   16:9 travel is cropped at the sides but reads as a full cinematic frame.
   Overlays sit over the video (welcome up top, spec popups bottom-left). */
@media (max-width:760px){
  #fhero .film{object-fit:cover;object-position:center 50%}
  #fhero .titlecard{place-content:end center;padding-bottom:9dvh}
  #fhero .titlecard::before{background:radial-gradient(64% 42% at 50% 76%, rgba(3,3,4,.72) 0%, rgba(3,3,4,.4) 46%, rgba(3,3,4,0) 78%)}
  #fhero .wlabel{bottom:8dvh;left:7vw;max-width:82vw}
  #fhero .wlabel--right{right:7vw}
  #fhero .spec{max-width:80vw}
  #fhero .spec .v{font-size:.74rem}
  /* «AUTO ALBERTI» is 12 tracked capitals — the widest thing this slot has ever
     carried, and the desktop 5.9vw would be unreadably small on a phone. At
     weight 600 it sets 893px per 100px at .12em (measured), so 9.9vw fills ~83%
     of the width — near the practical ceiling before 12 tracked capitals wrap.
     ★ SIGNED OFF AS-IS. This is NOT a scaled copy of the desktop size and must
     not be re-derived from it: the desktop line was reduced afterwards and this
     one was explicitly kept. Verified on one line at 360 / 390 / 414; do not
     push past ~10.2vw without re-checking 360. */
  #fhero .titlecard .ttl{font-size:clamp(1.6rem,9.9vw,2.7rem);letter-spacing:.12em;text-indent:.12em}
  #fhero .gskip{left:6vw;bottom:2.4rem;font-size:.58rem}
}

/* ---------- reduced motion: honest static (poster path handles the rest) ---- */
@media (prefers-reduced-motion:reduce){
  #fhero .titlecard{transform:none !important;opacity:1 !important}
}