/* ECHIVO /horeca — core.css · OWNER: V1 lead. Loaded by src/horeca/template.html in section order.
   New selectors: prefix with the section (#hx-hero / .hx-hero__*, #about, #groups, ...). See v7-notes/STRUCTURE.md. */

/* V9 · A5 (reload bug): a sideways trackpad swipe (or a diagonal one drifting left) is not a scroll here (body is
   overflow-x hidden, Lenis ignores deltaY=0), so the browser treated it as "Back" and left for the previous page,
   usually the landing page. Root overscroll-behavior-x: none turns off that history swipe (Chrome, Edge, Firefox);
   global.js also cancels sideways wheels for Safari. Vertical overscroll is untouched. */
html.hx-root, html.hx-root body { overscroll-behavior-x: none; }
.hx { --hx-card: rgba(255,255,255,0.045); --hx-line: rgba(255,255,255,0.09); }
.hx .section { overflow: clip; }
.hx-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--gold); color: #1a1206; font-weight: 700; }
.hx-skip:focus { top: 12px; }
.hx :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.hx a:not(.btn) { transition: color .2s; }
.hx p a:not(.btn), .hx-terms a, .hx-check a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(245,200,130,.4); text-underline-offset: 3px; }

/* ---------- Nav additions ---------- */
.hx-lang { display: flex; gap: 2px; padding: 3px; margin: 0 4px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--hairline); }
.hx-lang a { min-width: 34px; padding: 6px 8px; border-radius: 999px; text-align: center; font-size: .72rem; font-weight: 750; letter-spacing: .08em; color: var(--text-2); }
.hx-lang a:hover { color: #fff; }
.hx-lang a[aria-current="true"] { background: rgba(245,200,130,.16); color: var(--gold); }
@media (max-width: 760px) { .hx-lang a { min-width: 30px; padding: 6px 6px; } .hx-nav .nav__logo { letter-spacing: .2em; } }
@media (max-width: 360px) { .hx-nav .nav__logo span, .hx-nav .nav__logo { font-size: 0; gap: 0; padding-right: 2px; } }

/* ---------- Shared heads ---------- */
.hx-head { max-width: 820px; margin-bottom: clamp(40px, 7vh, 80px); }
.hx-head--c { margin-left: auto; margin-right: auto; text-align: center; }
.hx-head .eyebrow { margin: 0 0 18px; }
.hx-head h2 { margin: 0; }
.hx-lead { margin: 22px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); max-width: 40ch; }
.hx-head--c .hx-lead { margin-left: auto; margin-right: auto; }
.hx-split .hx-line, .hx-hero__title .hx-line { padding-bottom: .06em; }
.hx-line-mask { padding: .16em .04em .1em; margin: -.16em -.04em -.1em; }
[data-hx-reveal] { opacity: 0; transform: translateY(32px); }
.no-js [data-hx-reveal], .reduced-motion [data-hx-reveal] { opacity: 1; transform: none; }
.hx svg:not([fill]) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }


/* ============================================================ FOOTER (V1) */
.hx-foot { padding: 64px var(--gutter) 48px; border-top: 1px solid var(--hairline); }
.hx-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.hx-foot__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .26em; }
.hx-foot__in > p { margin: 0; }
.hx-foot__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.hx-foot__links a { color: var(--text-2); font-weight: 600; font-size: .92rem; }
.hx-foot__links a:hover { color: var(--gold); }
.hx-foot__made { width: 100%; font-size: .8rem; }
@media (max-width: 760px) { .hx-foot__links { margin-left: 0; width: 100%; } }

/* sections off screen pause their CSS loops (class set by global.js) */
.hx .section.is-asleep *, .hx .section.is-asleep *::before, .hx .section.is-asleep *::after { animation-play-state: paused !important; }

/* ============================================================ V1 · NAV + GLOBAL CHOREOGRAPHY (global.js) */
/* nav: a gold pill slides under the section you're reading; a hairline shows how far down the page you are */
.hx-nav .nav__links { position: relative; }
.hx-nav .nav__links a { position: relative; z-index: 1; }
.hx-nav .nav__links a.is-here { color: var(--gold); }
.hx-nav__pill { position: absolute; z-index: 0; left: 0; top: 0; height: 100%; width: var(--pw, 0px); border-radius: 999px;
  background: rgba(245,200,130,.12); box-shadow: inset 0 0 0 1px rgba(245,200,130,.28);
  transform: translateX(var(--px, 0px)); opacity: 0; transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .3s; pointer-events: none; }
.hx-nav__pill.is-on { opacity: 1; }
.hx-nav__progress { position: absolute; left: 22px; right: 22px; bottom: 0; height: 1.5px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.hx-nav__progress i { display: block; height: 100%; background: linear-gradient(90deg, rgba(245,200,130,.1), var(--gold)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* section seams: a golden-hour horizon line draws itself as each section arrives (one per section, once) */
.hx-seam { position: absolute; left: 50%; top: 0; width: min(880px, 82%); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--seam-rgb, 245,200,130),0), rgba(var(--seam-rgb, 245,200,130),.55) 50%, rgba(var(--seam-rgb, 245,200,130),0));
  transform: scaleX(0); transition: transform 1.6s var(--ease-out); }
.hx-seam::after { content: ""; position: absolute; left: 50%; top: -14px; width: 180px; height: 28px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--seam-rgb, 245,200,130),.28), rgba(var(--seam-rgb, 245,200,130),0)); opacity: 0; transition: opacity 1.2s .4s; }
.hx-seam.is-seen { transform: scaleX(1); }
.hx-seam.is-seen::after { opacity: 1; }
.reduced-motion .hx-seam, .no-js .hx-seam { transform: none; transition: none; }
.reduced-motion .hx-seam::after { opacity: 1; transition: none; }

/* cursor language (fine pointers, full tier only; the native cursor stays): a gold ring that trails the pointer,
   opens on anything interactive, shows a label from [data-hx-cursor="…"], hides over text fields */
.hx-cursor { position: fixed; left: 0; top: 0; z-index: 150; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(245,200,130,.55); opacity: 0; transition: opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .3s, border-color .3s;
  display: grid; place-items: center; }
.hx-cursor.is-on { opacity: 1; }
.hx-cursor.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(245,200,130,.10); border-color: rgba(245,200,130,.8); }
.hx-cursor.is-label { width: auto; min-width: 64px; height: 34px; margin: -17px 0 0 18px; padding: 0 14px; border-radius: 999px; background: var(--gold); border-color: var(--gold); }
.hx-cursor b { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1a1206; white-space: nowrap; display: none; }
.hx-cursor.is-label b { display: block; }
.hx-cursor.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.hx-cursor.is-text { opacity: 0; }

/* phones: nav + footer tap targets ≥ 44px, nav clears the notch (V5 audit) */
@media (pointer: coarse) {
  .hx-nav { top: max(12px, env(safe-area-inset-top)); }
  .hx-lang a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hx-nav .nav__cta { min-height: 44px; display: inline-flex; align-items: center; }
  .hx-nav .nav__logo { min-height: 44px; }
  .hx-foot__links a, .hx-foot__brand, .hx-nav .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================ V8 · DESKTOP LAYOUT GRID (D1). Binding for every part.
   ≥1024px only (phones untouched). .container widens to --hx-max; .hx-g12 = 12 columns (grid-column: 1 / span 5 …);
   .hx-bleed = full viewport width; .hx-scene = full-viewport (svh) centred stage; html.hx-cine (horeca.js) = desktop scenes active. */
:root { --hx-max: 1680px; --hx-gap: clamp(20px, 1.8vw, 36px); }
@media (min-width: 1024px) {
  .hx .container { max-width: var(--hx-max); }
  .hx-g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hx-gap); }
  .hx-bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .hx-scene { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .hx-cine .hx-scene--pin { height: 100vh; height: 100svh; min-height: 0; padding-top: 0; padding-bottom: 0; }
}
/* V8 · D4 (layout audit, v7-notes/V8-D4.md): on very wide screens (2560 QHD at 100 %) the grid keeps growing instead of
   leaving 440 px empty margins, and rem type/spacing steps up 12.5 % at ≥2200 (the base tokens cap at ~1920 sizes).
   Size visuals in grid columns / %, not fixed px, so they follow. */
@media (min-width: 2000px) { :root { --hx-max: min(78vw, 2200px); } }
@media (min-width: 2200px) { html.hx-root { font-size: 112.5%; } }

/* ============================================================ V10 · F4 · SECTION ATMOSPHERE, HAND-OFFS, PRESS STATES
   (v7-notes/V10-F4.md). Every section used to sit on the same flat night; now each one has its own low-alpha wash
   (palette hues only, transparent at every edge, so no banding at the seams), and its seam takes that hue.
   All tiers: static gradients painted once (phones: zero per-frame cost). Desktop cinematic tier only: the wash breathes
   with scroll through a CSS scroll-driven animation (compositor, no JS): it fades/rises in as the section arrives and
   fades/lifts away as it leaves, so one section's colour hands over to the next. Pinned sections hold it during the pin. */
#about, #how, #featured, #pricing { isolation: isolate; }
#about { --seam-rgb: 245,200,130; --wash:
  radial-gradient(42% 46% at 76% 52%, rgba(245,200,130,.075), rgba(245,200,130,0) 72%),
  radial-gradient(38% 34% at 8% 88%, rgba(79,179,255,.045), rgba(79,179,255,0) 70%),
  linear-gradient(180deg, rgba(20,29,51,0), rgba(20,29,51,.32) 30%, rgba(20,29,51,.32) 70%, rgba(20,29,51,0)); }
#how { --seam-rgb: 79,179,255; --wash:
  radial-gradient(46% 42% at 70% 46%, rgba(79,179,255,.065), rgba(79,179,255,0) 72%),
  radial-gradient(34% 30% at 12% 20%, rgba(157,123,255,.04), rgba(157,123,255,0) 70%),
  linear-gradient(180deg, rgba(11,16,32,0), rgba(11,16,32,.75) 26%, rgba(11,16,32,.75) 74%, rgba(11,16,32,0)); }
#featured { --seam-rgb: 255,170,120; --wash:
  radial-gradient(44% 36% at 50% 74%, rgba(255,138,91,.05), rgba(255,138,91,0) 72%),
  radial-gradient(36% 34% at 86% 18%, rgba(157,123,255,.05), rgba(157,123,255,0) 70%),
  linear-gradient(180deg, rgba(20,29,51,0), rgba(20,29,51,.36) 30%, rgba(20,29,51,.36) 70%, rgba(20,29,51,0)); }
#pricing { --seam-rgb: 245,200,130; --wash:
  radial-gradient(56% 34% at 50% 34%, rgba(245,200,130,.07), rgba(245,200,130,0) 72%),
  radial-gradient(40% 30% at 50% 92%, rgba(212,165,96,.05), rgba(212,165,96,0) 70%),
  linear-gradient(180deg, rgba(11,16,32,0), rgba(11,16,32,.55) 24%, rgba(11,16,32,.55) 76%, rgba(11,16,32,0)); }
#about::before, #how::before, #featured::before, #pricing::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--wash); }
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    #about::before, #how::before, #featured::before, #pricing::before {
      animation: hx-wash linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes hx-wash {
  0%   { opacity: 0; transform: translate3d(0, 4%, 0); }
  32%, 68% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate3d(0, -4%, 0); }
}
.reduced-motion #about::before, .reduced-motion #how::before, .reduced-motion #featured::before, .reduced-motion #pricing::before { animation: none; opacity: 1; transform: none; }

/* one easing + press language for the CTAs in hero → pricing (landing curve; press .97, hover lift stays base.css' 2 px) */
:is(#hx-hero, #about, #how, #featured, #pricing) .btn {
  transition: transform .5s var(--ease-out), scale .28s var(--ease-out), background .3s, box-shadow .4s var(--ease-out), border-color .3s; }
:is(#hx-hero, #about, #how, #featured, #pricing) .btn:active { scale: .97; transition-duration: .5s, .1s, .3s, .4s, .3s; }
:is(#hx-hero, #pricing) .btn-gold:hover { box-shadow: 0 14px 46px rgba(245,200,130,.45), 0 0 0 1px rgba(255,236,200,.35) inset; }
:is(#hx-hero, #pricing) .btn-gold svg { transition: transform .45s var(--ease-out); }
:is(#hx-hero, #pricing) .btn-gold:hover svg { transform: translateX(3px); }
#hx-hero .btn-glass:hover { border-color: rgba(245,200,130,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 22px rgba(245,200,130,.10), 0 20px 60px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { :is(#hx-hero, #about, #how, #featured, #pricing) .btn { transition: background .3s, box-shadow .3s; } }
/* Fable 14:40 (#6): on desktop the radial centres were invisible in a JPEG at .05–.075; lift them to .10–.12 there
   (phones keep the quieter values: smaller screen, closer to the eye). */
@media (min-width: 1024px) {
  #about { --wash:
    radial-gradient(42% 46% at 76% 52%, rgba(245,200,130,.12), rgba(245,200,130,0) 72%),
    radial-gradient(38% 34% at 8% 88%, rgba(79,179,255,.08), rgba(79,179,255,0) 70%),
    linear-gradient(180deg, rgba(20,29,51,0), rgba(20,29,51,.36) 30%, rgba(20,29,51,.36) 70%, rgba(20,29,51,0)); }
  #how { --wash:
    radial-gradient(46% 42% at 70% 46%, rgba(79,179,255,.11), rgba(79,179,255,0) 72%),
    radial-gradient(34% 30% at 12% 20%, rgba(157,123,255,.07), rgba(157,123,255,0) 70%),
    linear-gradient(180deg, rgba(11,16,32,0), rgba(11,16,32,.75) 26%, rgba(11,16,32,.75) 74%, rgba(11,16,32,0)); }
  #featured { --wash:
    radial-gradient(44% 36% at 50% 74%, rgba(255,138,91,.10), rgba(255,138,91,0) 72%),
    radial-gradient(36% 34% at 86% 18%, rgba(157,123,255,.09), rgba(157,123,255,0) 70%),
    linear-gradient(180deg, rgba(20,29,51,0), rgba(20,29,51,.4) 30%, rgba(20,29,51,.4) 70%, rgba(20,29,51,0)); }
  #pricing { --wash:
    radial-gradient(56% 34% at 50% 34%, rgba(245,200,130,.11), rgba(245,200,130,0) 72%),
    radial-gradient(40% 30% at 50% 92%, rgba(212,165,96,.08), rgba(212,165,96,0) 70%),
    linear-gradient(180deg, rgba(11,16,32,0), rgba(11,16,32,.6) 24%, rgba(11,16,32,.6) 76%, rgba(11,16,32,0)); }
}
/* Fable 14:40 (#2): featured → pricing bridge. One warm horizon band straddles the seam: the bottom of #featured and the
   top of #pricing carry the same terracotta-gold at the SAME alpha at the boundary, so it reads as one light, not an edge.
   Static (not part of the scroll-driven wash), so both halves always match. */
#featured::after, #pricing::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; height: min(42vh, 420px); }
#featured::after { bottom: 0; background: radial-gradient(60% 100% at 50% 100%, rgba(255,150,100,.075), rgba(255,150,100,0) 100%); }
#pricing::after { top: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(255,150,100,.075), rgba(255,150,100,0) 100%); }
/* G3: the desktop recede (opacity floor .6) never dims a section that holds keyboard focus. */
:is(#about, #how, #featured, #pricing) > .container:has(:focus-visible) { opacity: 1 !important; }
/* /V10 · F4 */

/* G3 v10 · a11y: small notes in --text-3 (.42) measured 3.7:1 on the navy and the glass panels (AA needs 4.5:1), e.g. the
   App Store note, "Prețuri orientative", the founding line, the venue-search hint, "(opțional)". .54 gives 5.2-5.5:1 and keeps
   the hierarchy under --text-2 (.66). Scoped to /horeca only (base.css token untouched for the homepage). */
.hx { --text-3: rgba(243, 241, 236, 0.54); }
/* G3 v10 · a11y: Tab can scroll a [data-hx-reveal] into view mid-reveal (measured: #finish CTA focused at opacity .22,
   hero CTAs .25 during the intro, footer links 0). A reveal that holds KEYBOARD focus is shown at full opacity. */
.hx [data-hx-reveal]:has(:focus-visible) { opacity: 1 !important; visibility: visible !important; }