/* Yalla Vending | the home page's own styles: the scrub hero and the
   marketing sections. Shared with the Arabic home page, which loads this file
   and then rtl.css on top. Site-wide shell styles live in site.css. */

/* ============================================================
   THE RAIL | the signature. The machine's side panel as navigation.
   ============================================================ */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:.15rem;padding:.55rem .4rem;
  background:rgba(31,28,24,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,152,49,.18);border-right:0;border-radius:.9rem 0 0 .9rem}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;
  width:60px;padding:.6rem .2rem;border-radius:.6rem;text-decoration:none;
  color:var(--text-secondary);transition:color .45s var(--ease),background .45s var(--ease)}
.rail-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.rail-item span{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.13em}
.rail-item:hover{color:var(--text-primary)}
.rail-item.on{color:var(--accent);background:rgba(255,152,49,.1)}
.rail-item.on svg{transform:translateY(-2px) scale(1.08)}
@media (max-width:1180px){.rail{display:none}}
@media (max-height:620px){.rail{display:none}}


/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:520vh;z-index:1}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0E0D0B}

.poster{position:absolute;inset:0;background-image:url(hero-poster.webp);
  background-size:cover;background-position:center;
  transition:opacity .8s var(--ease)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.ring{position:absolute;left:50%;bottom:2.5rem;transform:translateX(-50%);
  width:42px;height:42px;color:rgba(255,243,212,.55);pointer-events:none;
  transition:opacity .5s var(--ease)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}

/* the cue lives in the left gutter, clear of the centre action lane, and retires on first scroll */
.cue{position:absolute;left:var(--gut);bottom:2.2rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;pointer-events:none;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:rgba(255,243,212,.5);
  text-shadow:var(--tshadow);transition:opacity .6s var(--ease)}
.stage.moved .cue{opacity:0}
.cue svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;
  animation:cueBob 2.6s var(--ease) -.6s infinite}
@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (max-height:560px){.cue,.ring{display:none}}

/* --- caption bands --- */
.bands{position:absolute;inset:0}
.band{position:absolute;inset:0;opacity:0;pointer-events:none;
  display:grid;align-items:center;padding:0 var(--gut);text-shadow:var(--tshadow)}
.band .btn{text-shadow:none}

.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1))}

/* Left-column band. A directional ramp, not a soft ellipse: a wide headline needs even
   cover across its whole box, and the bright water jet crosses this zone mid-shot.
   The centre lane keeps its light, so the cup and the pour stay bright. */
.band[data-pos="left"]{grid-template-columns:minmax(0,1fr) 38%;justify-items:start}
.band[data-pos="left"]::before{
  background:linear-gradient(90deg,rgba(5,5,10,.90) 0%,rgba(5,5,10,.87) 38%,
    rgba(5,5,10,.72) 52%,rgba(5,5,10,.34) 66%,rgba(5,5,10,0) 80%)}

/* right-column band: mirror */
.band[data-pos="right"]{grid-template-columns:38% minmax(0,1fr);justify-items:end;text-align:right}
.band[data-pos="right"] .band-body{grid-column:2}
.band[data-pos="right"]::before{
  background:linear-gradient(270deg,rgba(5,5,10,.90) 0%,rgba(5,5,10,.87) 38%,
    rgba(5,5,10,.72) 52%,rgba(5,5,10,.34) 66%,rgba(5,5,10,0) 80%)}

/* settle band: the cup sits low, so text takes the clear upper centre */
/* dropped lower so the block sits optically centred in the clear space above the cup,
   measuring from under the nav rather than from the top of the viewport */
.band[data-pos="top"]{grid-template-rows:1fr;align-items:start;justify-items:center;
  text-align:center;padding-top:min(24vh,13rem)}
.band[data-pos="top"]::before{
  background:radial-gradient(ellipse 62% 46% at 50% 26%,rgba(5,5,10,.72) 0%,rgba(5,5,10,.5) 46%,rgba(5,5,10,0) 76%)}

.band-body{position:relative;max-width:none}
.band[data-pos="left"] .band-body,.band[data-pos="right"] .band-body{grid-row:1}
/* Three of the four captions are lines of film, not document sections, so they
   are paragraphs; the fourth carries the page heading. They share one class so
   the type is identical whichever element it lands on. */
.band .band-h{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.028em;
  margin:0;font-size:clamp(1.85rem,1rem + 3.35vw,4.1rem);max-width:19ch;text-wrap:balance}
/* reserve the rail's lane so no caption ever runs under it */
@media (min-width:1181px) and (min-height:621px){
  .band[data-pos="right"]{padding-right:calc(var(--gut) + 5.5rem)}
  .band[data-pos="top"]{padding-inline:calc(var(--gut) + 3rem)}
}
.band[data-pos="right"] .band-h{margin-left:auto}
.band[data-pos="top"] .band-h{max-width:16ch;margin-inline:auto}
.band .sub{margin-top:1.15rem;font-size:clamp(1rem,.94rem + .34vw,1.2rem);
  color:var(--text-primary);opacity:.9;max-width:46ch;text-wrap:balance}
.band[data-pos="top"] .sub{margin-inline:auto}
.band .cta-row{margin-top:1.8rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}

/* --- text splitting primitives --- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down | echoes the falling powder */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
/* (d) word-punch with overshoot | echoes the jet landing */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (a) scatter | echoes powder and water gathering into one thing */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (e) word-by-word rise into a staged settle | echoes the arrival at rest */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px))}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:calc(var(--ks)*.9);
  transform:translateY(calc((1 - var(--ks)) * 14px))}
.e-rise .cta-row{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 16px))}

/* --- static hero (the five gates) --- */
.static-hero{display:none;position:relative;min-height:100svh;
  align-items:center;justify-content:center;text-align:center;padding:7rem var(--gut) 4rem}
.static-hero .sh-bg{position:absolute;inset:0;background-image:url(hero-ending.webp);
  background-size:cover;background-position:center 42%}
.static-hero .sh-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,13,11,.9) 0%,rgba(14,13,11,.55) 42%,rgba(14,13,11,.94) 100%)}
.static-hero .sh-body{position:relative;max-width:34rem;text-shadow:var(--tshadow)}
.static-hero h1{font-size:clamp(2.3rem,1.3rem + 5.4vw,3.6rem);margin-top:.9rem}
.static-hero .sub{margin-top:1.1rem;font-size:1.0625rem;opacity:.9;margin-inline:auto;max-width:34ch}
.static-hero .cta-row{margin-top:1.9rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.static-hero .btn{text-shadow:none}


/* ============================================================
   1. THERE IS NO SHELF  (image left, text right)
   ============================================================ */
.shelf .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
/* the cutout already carries its own empty space, so the section does not need
   a full pad underneath it before the steps begin */
.shelf{padding-bottom:clamp(1.5rem,3vw,2.75rem)}
#steps{padding-top:clamp(2rem,4vw,3.25rem)}

/* a cutout render, so it stands on the page rather than sitting in a box */
.shelf figure{margin:0;position:relative;display:flex;justify-content:center;align-items:flex-end}
.shelf figure img{width:auto;max-width:100%;max-height:min(78vh,700px);height:auto;
  object-fit:contain;filter:drop-shadow(0 34px 46px rgba(0,0,0,.62))}
.glowpulse{position:absolute;inset:-8%;border-radius:1.6rem;pointer-events:none;z-index:-1}
.glowpulse::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(255,152,49,.3),transparent 70%);
  opacity:.42;animation:breathe 8s var(--ease) -2.4s infinite alternate}
@keyframes breathe{from{opacity:.24}to{opacity:.6}}
@media (max-width:860px){.shelf .grid{grid-template-columns:1fr;gap:2.5rem}}


/* ============================================================
   2. PICK PAY BLEND BUILD  (four-step rail, all equal)
   ============================================================ */
.steps{border-top:1px solid rgba(255,243,212,.12);margin-top:3.2rem;
  display:grid;grid-template-columns:repeat(4,1fr)}
.step{padding:2.1rem 1.4rem 0 0;position:relative}
.step+.step{padding-left:1.6rem;border-left:1px solid rgba(255,243,212,.12)}
.step .node{position:absolute;top:-9px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--canvas);border:3px solid var(--accent)}
.step+.step .node{left:1.6rem}
.step:last-child .node{background:var(--accent)}
.step svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.step h3{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--accent);
  letter-spacing:.02em}
.step p{margin-top:.55rem;color:var(--text-secondary);font-size:.9375rem;line-height:1.55}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){border-left:0;padding-left:0}
  .step:nth-child(3) .node{left:0}
  .step:nth-child(3),.step:nth-child(4){margin-top:2.4rem;
    border-top:1px solid rgba(255,243,212,.12)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step{border-left:0!important;padding-left:0!important;margin-top:2.4rem;
    border-top:1px solid rgba(255,243,212,.12)}
  .step .node{left:0!important}
  .step:first-child{margin-top:0;border-top:0}
}


/* ============================================================
   3. THE LINEUP  (3x3 echoing the machine screen)
   ============================================================ */
.lineup .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:stretch;margin-top:0}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.drink{display:flex;flex-direction:column;align-items:flex-start;width:100%;
  font-family:var(--body);color:var(--text-primary);text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid rgba(255,243,212,.09);border-radius:.8rem;
  padding:.95rem .8rem 2.3rem;position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
.drink:hover{border-color:rgba(255,152,49,.42);transform:translateY(-3px);background:var(--panel-hi)}
/* a button may only hold phrasing content, so the drink name is a span that
   is styled like the heading it used to be */
.drink .dname{font-family:var(--display);font-weight:700;font-size:.875rem;line-height:1.22;
  display:block;margin:0;
  letter-spacing:-.01em;min-height:2.1em}
.drink .tag{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.08em;padding:.2rem .45rem;border-radius:.35rem;
  background:rgba(255,152,49,.14);color:var(--accent)}
.drink .tag.zero{background:rgba(255,243,212,.09);color:var(--text-secondary)}
.drink .more{position:absolute;left:.8rem;bottom:.85rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
  transition:color .4s var(--ease)}
.drink .more::after{content:" +";color:var(--accent)}
.drink:hover .more{color:var(--text-primary)}
@media (pointer:coarse){.drink{min-height:44px}}
/* the one place on the page that argues about flavour rather than logistics */
.lineup .taste{margin-top:.85rem;margin-bottom:.15rem;color:var(--text-secondary);
  font-size:.9375rem;line-height:1.6;max-width:46ch}
.lineup .taste b{color:var(--text-primary);font-weight:600}
[dir="rtl"] .lineup .taste{max-width:44ch}
.menu-hint{margin-top:1.1rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
/* trimmed so the whole lineup sits inside one screen */
.lineup{padding-block:clamp(3rem,6vw,5rem)}
/* the render spans the full column: its top meets the heading, its bottom meets
   the last line of text, and the whole image is shown rather than cropped */
.lineup .menu-col{display:flex;flex-direction:column}
.lineup .menu{margin-top:1.9rem}
.lineup .menu-hint{margin-top:1.1rem}
/* the image is taken out of flow so the text column alone sets the row height,
   then stretched to exactly that height. width:auto keeps the box on the picture
   itself, so the corner radius and shadow hug the render and not a letterbox. */
.lineup figure{margin:0;position:relative;min-height:0}
.lineup figure img{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:1rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,243,212,.09)}
@media (max-width:980px){
  .lineup figure{position:static;display:flex;justify-content:center}
  .lineup figure img{position:static;transform:none;height:auto;width:100%;max-height:70vh;
    object-fit:contain}
}
@media (max-width:980px){.lineup .grid{grid-template-columns:1fr}.lineup figure{order:-1}}
@media (max-width:430px){.menu{grid-template-columns:repeat(2,1fr)}}


/* ============================================================
   5. WHAT THE GYM GETS  (offset: list left, tall image right)
   ============================================================ */
.gets{background:var(--panel);border-block:1px solid rgba(255,243,212,.08);
  padding-block:clamp(3rem,6vw,5rem)}
.gets .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.pts{margin:2.6rem 0 0;padding:0;list-style:none}
.pts li{display:flex;gap:1.3rem;padding:1.15rem 0;border-top:1px solid rgba(255,243,212,.12)}
.pts li:first-child{border-top:0;padding-top:0}
.pts .n{font-family:var(--mono);font-size:.8125rem;color:var(--accent);padding-top:.28em;flex:none}
.pts p{color:var(--text-secondary);max-width:46ch}
.pts b{color:var(--text-primary);font-weight:600}
/* the whole render, scaled down to fit rather than cropped. The mangled side-panel
   subtext is already softened in the source file, so no framing trick is needed. */
.gets figure{margin:0;display:flex;justify-content:center;align-items:center}
.gets figure img{display:block;width:auto;max-width:100%;height:auto;
  max-height:min(64vh,620px);object-fit:contain;border-radius:1rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,243,212,.09)}
@media (max-width:900px){.gets .grid{grid-template-columns:1fr;gap:2.5rem}}


/* ============================================================
   6. FAQ
   ============================================================ */
/* two columns so the whole FAQ sits inside one screen */
.faq dl{margin:2.4rem 0 0;max-width:none;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(2rem,5vw,4.5rem)}
.faq .qa{border-top:1px solid rgba(255,243,212,.12);padding:1.3rem 0}
.faq dt{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.015em}
.faq dd{margin:.5rem 0 0;color:var(--text-secondary);max-width:46ch;font-size:.9375rem}
@media (max-width:820px){.faq dl{grid-template-columns:1fr}}


/* ============================================================
   7. EVENTS BAND
   ============================================================ */
.events{position:relative;padding:0;overflow:hidden}
.events img{width:100%;height:clamp(24rem,52vw,34rem);object-fit:cover;object-position:center 30%}
.events .ov{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(2rem,5vw,4rem) var(--gut);
  background:linear-gradient(90deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.72) 42%,rgba(14,13,11,.28) 100%)}
.events .ov > div{max-width:34rem}
.events h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);margin-top:.8rem}
.events p{margin-top:1rem;color:var(--text-primary);opacity:.86;max-width:44ch}
.events .lk{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem;
  font-weight:600;color:var(--accent);text-decoration:none;transition:gap .35s var(--ease)}
.events .lk:hover{gap:.8rem}


/* ============================================================
   8. THE CLOSE
   ============================================================ */
/* The contact section and its form moved to site.css: six pages use them now,
   and any page that did not load this file rendered the form unstyled. */



/* ============================================================
   THE FIVE STATIC-HERO GATES  (must match the JS list exactly)
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{display:flex}
}