/* ===========================================================================
   TEQUILA MAMA — the HERO and the HEADER, restyled on the MIDTOWN reference
   clients/crazycantina/MIDTOWN-–-Tacos-Tequilas.png            2026-09-14
   ---------------------------------------------------------------------------
   THIS FILE USED TO BE THE WHOLE HOMEPAGE TREATMENT. On 2026-09-15 Santi said
   "everything apart from the video and the header should look like eclipse di
   luna", and that is exactly the cut this file now sits on: the hero video and
   the sticky header are Midtown and stay Midtown; every band beneath them is
   the LUNA treatment in assets/home-luna.css.

   So what is left here is Midtown's section 7 and the tokens it reads. The
   other six sections — the script labels, the zigzag ornament, flat-and-square,
   the keyline cards, the block-colour panels and the torn band edges — were
   DELETED rather than left to be overridden: Midtown squared corners and killed
   shadows with `!important`, and Luna is a rounded, shadowed, pill-shaped
   treatment. Two live treatments arguing through !important is not a cascade,
   it is a coin toss. The whole pre-Luna file is assets/home-mid.css.bak-preluna
   if any of it is ever wanted back.

   WHAT MIDTOWN'S HERO IS, and why it survived the cut: a full-bleed video with
   the nav bar sitting UNDER it rather than over it, riding up on scroll and
   pinning at the top. That is the one part of the reference Santi kept naming
   back, and it is unrelated to anything Luna does below the fold.

   The 2026-09-15 hero pass then put an overlay back on top of the footage —
   the seal, ORDER ONLINE / CHECK MENU, a scroll sign, and the scroll-linked
   fade that takes all three away. Read section 7 for how that is wired; the
   script that drives it is assets/home-mid.js.

   The `tq-mid` body class is unchanged and still comes from inc/midtown.php.
   ========================================================================= */

body.tq-mid {
  /* The reference's three, in this brand's colours. Section 7 reads --mid-pop
     for the scroll sign's ring; the rest are kept because they are the
     treatment's vocabulary and inc/midtown.php still names this file by it. */
  --mid-pop:    var(--tmt-yellow);      /* its lime      — the hot accent   */
  --mid-ink:    var(--tmt-teal-ink);    /* its bottle green — deep ink      */
  --mid-dark:   var(--tmt-teal-deep);   /* its dark band                    */
  --mid-paper:  var(--tmt-cream);       /* its mint                         */
  --mid-line:   2px;                    /* the keyline weight it draws with */
}

/* ======================================================== 7. hero + header */
/* THE REFERENCE'S HERO IS A PHOTOGRAPH AND NOTHING ELSE — no logo, no heading,
   no buttons, no scrim. The media is the whole statement, and the nav bar sits
   under it rather than over it.
   
   Applied here with ONE substitution: the media stays the VIDEO, because Santi
   set that clip as the hero the same day (tm_hero_video = 426). A silent
   full-bleed hero and "play this video in the hero" are the same instruction
   about different layers, so the clip does the job the reference's photograph
   does.
   
   2026-09-15 — THE OVERLAY IS BACK, and the trade the note below described is
   off. Santi asked for the seal, ORDER ONLINE / CHECK MENU and a scroll sign
   over the footage, and for the video to "disappear little by little" as the
   page moves. So the hero now carries three layers that all answer to ONE
   scroll figure, --tq-hero-p (0 at the top of the page, 1 by the time the hero
   has all but left the window), written by assets/home-mid.js:
   
     the SIGN    goes first   — gone by p = 0.18, on the first flick
     the OVERLAY goes second  — gone by p = 0.5, lifting as it goes
     the VIDEO   goes last    — gone by p = 1, drifting at a quarter speed
   
   Reading, then, in that order: the invitation, the lockup, the footage. The
   bands underneath arrive into an empty frame rather than shouldering a
   playing video out of the way.
   
   The fade is opacity and transform ONLY — no height, no layout property — so
   it composites and never reflows the page it is riding on. Everything below
   still works with the script dead: without it --tq-hero-p is simply never set,
   the fallback 0 applies, and the hero is a normal full-bleed hero with a
   lockup on it that scrolls away. */
/* THE FULL WINDOW, 2026-09-15 (Santi: "show the video fully in every screen as
   soon as the website loads").
   It was `calc(100dvh - 80px)` for one round, so that the nav bar sat in view
   under the footage the way the Midtown reference has it. The objection that
   bought that 80px — that a visitor landing here would see nothing but video,
   no logo, no nav, no restaurant name — is answered now by the hero's own
   overlay: the seal IS the restaurant name, and it is on the footage. So the
   video gets the whole screen and the header arrives on the first scroll. */
body.tq-mid.home .tq-hero {
  height: 100dvh; min-height: 440px; max-height: none;
}
@supports not (height: 100dvh) {
  body.tq-mid.home .tq-hero { height: 100vh; }
}

/* --- the three layers, all driven by --tq-hero-p ------------------------- */
/* The floor keeps the rule valid before the script has run and if it never
   does. Every use below is var(--tq-hero-p, 0). */
body.tq-mid.home .tq-hero { --tq-hero-p: 0; }

/* The scrim is back, but not at the 0.52 the data file sets: that figure was
   picked to hold the red script logo against a STILL and is too heavy over
   moving footage. A vertical gradient does the job better anyway — dark where
   the sign sits and where the lockup sits, near-clear across the middle, so
   the shot is legible as a shot. The inline style on the element is the flat
   colour; this overrides it. */
body.tq-mid.home .tq-hero__scrim {
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.22) 34%,
    rgba(0, 0, 0, 0.30) 62%,
    rgba(0, 0, 0, 0.58) 100%) !important;
  /* It belongs to the FOOTAGE, so it leaves with it rather than with the type.
     Fading it on the overlay's faster curve would brighten the video halfway
     through its own exit, which reads as a flicker. */
  opacity: calc(1 - var(--tq-hero-p, 0));
}

/* THE VIDEO. Drifts down at a quarter of the scroll speed while it fades, so
   the shot is still moving as it goes rather than sliding off rigidly. The
   drift is safe against the hero's overflow:hidden in both directions: the
   band it uncovers at the top is always above the window's top edge (the hero
   has scrolled by 4x what the video has), and the overhang at the bottom is
   clipped. */
/* --bg--vid and the <picture>, NOT .tq-hero__bg: in the still branch that
   class is on the <img> INSIDE the picture, and transforming both nests one
   translate in the other and drifts at twice the rate. */
body.tq-mid.home .tq-hero__bg--vid,
body.tq-mid.home .tq-hero > picture {
  opacity: calc(1 - var(--tq-hero-p, 0));
  transform: translate3d(0, calc(var(--tq-hero-y, 0) * 1px), 0);
  will-change: opacity, transform;
}

/* THE OVERLAY — seal, buttons. Off by half a screen, and lifting: it leaves
   upward, against the page, which is what makes it read as being let go of
   rather than merely scrolled past. */
body.tq-mid.home .tq-hero__inner {
  display: flex;
  /* p/0.5, clamped. calc() has no min()/max() of its own; clamp does it. */
  opacity: clamp(0, calc(1 - var(--tq-hero-p, 0) / 0.5), 1);
  transform: translate3d(0, calc(var(--tq-hero-p, 0) * -56px), 0);
  will-change: opacity, transform;
}
/* The seal is a wide cartouche, not a tall lockup, and over video it needs to
   sit clear of both the top edge and the buttons. Slightly smaller than the
   base 36vw so the two buttons under it are not pushed off a short laptop. */
body.tq-mid.home .tq-hero__logo {
  width: clamp(260px, 30vw, 460px);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5))
          drop-shadow(0 22px 34px rgba(0, 0, 0, 0.38));
}
/* Midtown's buttons are already right for this ground: a yellow block and a
   white keyline, both squared. Only the gap is opened up — at 14px the two
   read as one object at hero scale. */
body.tq-mid.home .tq-hero__cta { gap: 16px; }

/* THE SCROLL SIGN. Bottom centre, out of the buttons' way, and the first thing
   to go: it is an instruction, and an instruction still on screen after it has
   been followed is noise. */
body.tq-mid.home .tq-hero__cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(18px, 3.4vh, 34px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--tmt-white); text-decoration: none;
  /* p/0.18, clamped: gone within a fifth of the hero. */
  opacity: clamp(0, calc(1 - var(--tq-hero-p, 0) / 0.18), 1);
  transform: translate3d(-50%, 0, 0);
  transition: color 180ms var(--tq-ease);
}
/* pointer-events go with the opacity, or an invisible link keeps taking taps
   over whatever band has scrolled into that corner. */
body.tq-mid.home .tq-hero__cue[data-gone] { pointer-events: none; }
body.tq-mid.home .tq-hero__cue-txt {
  font-family: var(--font-inria), sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
body.tq-mid.home .tq-hero__cue-ring {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--mid-pop);
  color: var(--mid-pop);
  background: rgba(0, 0, 0, 0.18);
  animation: tq-cue-bob 1.9s var(--tq-ease) infinite;
}
body.tq-mid.home .tq-hero__cue:hover .tq-hero__cue-ring,
body.tq-mid.home .tq-hero__cue:focus-visible .tq-hero__cue-ring {
  background: var(--mid-pop); color: var(--tmt-ink);
}
@keyframes tq-cue-bob {
  0%, 62%, 100% { transform: translateY(0); }
  32%           { transform: translateY(6px); }
}

/* Reduced motion: the bob stops and the drift stops. The FADE stays — it is
   tied to the scroll the reader is performing themselves, not to motion the
   page is inventing, and losing it would leave a playing video sitting under
   the whole page. */
@media (prefers-reduced-motion: reduce) {
  body.tq-mid.home .tq-hero__cue-ring { animation: none; }
  body.tq-mid.home .tq-hero__bg--vid,
  body.tq-mid.home .tq-hero > picture,
  body.tq-mid.home .tq-hero__inner { transform: none; }
}

/* Short landscape windows (a phone turned sideways) have no room for a seal,
   two buttons and a sign between an 80px header and the fold. The sign is what
   goes: the buttons are the point. */
@media (max-height: 520px) and (orientation: landscape) {
  body.tq-mid.home .tq-hero__cue { display: none; }
  body.tq-mid.home .tq-hero__logo { width: clamp(200px, 26vw, 300px); }
}

/* THE HEADER REVEALS ON THE FIRST SCROLL AND THEN STAYS PINNED, 2026-09-15.
   
   It was `position: sticky` for one round, which put it at the hero's bottom
   edge and rode it up. That was right while the hero stopped 80px short of the
   fold. With the hero taking the WHOLE window, sticky means the bar does not
   appear until a full screen has gone past — so the video would be half faded
   out with still no navigation anywhere. That is the wrong kind of nothing.
   
   So it goes back to `fixed`, which is what every interior page already uses,
   and is simply HIDDEN over the first 40px of the page. One scroll and it
   drops in; from then on it is pinned and behaves exactly as it does
   everywhere else on the site. The 40px matches the threshold home-taq.js
   already uses for `.tq-head--small`, so the bar arrives already shrunk and
   already solid rather than sliding in glassy and then changing under the
   pointer.
   
   The class is written by assets/home-mid.js. If that never runs the header is
   simply always visible, which is the pre-2026-09-15 behaviour and is safe. */
body.tq-mid.home .tq-head,
body.tq-mid.home .tq-head--small {
  position: fixed;
  top: 0;
  transition: transform 320ms var(--tq-ease), opacity 220ms var(--tq-ease),
              height 300ms var(--tq-ease), background-color 300ms var(--tq-ease);
}
body.tq-mid.home .tq-head--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* A keyboard user tabbing in from the top of the document reaches the skip
   link and then the header, and would be operating a bar they cannot see.
   Focus brings it back regardless of scroll position. */
body.tq-mid.home .tq-head--hidden:focus-within {
  transform: none; opacity: 1; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  body.tq-mid.home .tq-head,
  body.tq-mid.home .tq-head--small { transition: none; }
}
/* The mobile panel is `position: fixed; inset: 80px 0 0` in the base sheet —
   measured from the top of the WINDOW against an 80px bar. The bar is 64px by
   the time the drawer is reachable here (it only exists once revealed, and
   revealed means `--small`), so anchoring the panel to the header itself keeps
   the two together whatever the bar's height is doing. */
body.tq-mid.home .tq-drawer { position: absolute; top: 100%; inset-inline: 0; bottom: auto;
  max-height: calc(100dvh - 64px); overflow-y: auto; }