/* peak: hero + logo + menu bar. Mobile first. */

@font-face {
  font-family: "Readex Pro";
  src: url("assets/fonts/readex-pro-arabic.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  src: url("assets/fonts/readex-pro-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Palette: pink sign + heather-grey storefront. Charcoal text passes AA on every grey here
   (mist 11.6:1, fog 8.4:1, heather 5.3:1); pink-on-slate 3.8:1 is for the logo mark only. */
:root {
  --pink: #E583AA;
  --pink-deep: #D86C98;
  --ink: #2B2B2E;      /* charcoal */
  --slate: #44484A;    /* deeper slate: the small badge */
  --heather: #9FA09E;  /* storefront facade */
  --heather-cool: #909492;
  --fog: #C9CBC8;
  --mist: #E9EAE8;     /* light mist grey */
  --mist-2: #DCDEDA;
  --paper: #FFFFFF;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-hero: clamp(2.5rem, 1.386rem + 4.571vw, 5.5rem);
  --fs-body: clamp(.875rem, .829rem + .19vw, 1rem);
  --fs-nav: clamp(.9375rem, .914rem + .095vw, 1rem);
  --gutter: 16px;
  --logo-w: clamp(180px, 56vw, 300px);   /* the big tab; leaves room for the pill on a 390 phone */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--heather);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, video, svg { display: block; }

:lang(ar) { letter-spacing: 0 !important; text-transform: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; z-index: 200; inset-inline-start: 12px; top: 12px;
  padding: 10px 16px; border-radius: 999px; background: var(--paper);
  font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper); }

/* ---------- logo ----------
   Sharpness rule: nothing here gets a CSS transform, will-change or a compositor animation.
   The morph moves the SVG's own geometry (path data + SVG transforms), so every frame is
   painted as vectors at the device's pixel ratio. */
.logo {
  position: fixed; z-index: 90; top: 0; inset-inline-start: 0;
  width: var(--logo-w);
  pointer-events: none;          /* only the painted badge is clickable */
  -webkit-tap-highlight-color: transparent;
}
.logo__art { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .16)); }
.logo__blob { fill: var(--pink); pointer-events: visiblePainted; cursor: pointer; }
.logo__word { fill: var(--paper); pointer-events: none; }
[dir=rtl] .logo__blob { transform: scaleX(-1); transform-origin: 130px 0; }
.logo:focus-visible { outline: none; box-shadow: none; }
.logo:focus-visible .logo__blob { stroke: var(--paper); stroke-width: 3px; vector-effect: non-scaling-stroke; }

/* reduced motion: a static small badge that crossfades in (JS sets the --m* position) */
.logo__mini {
  position: absolute; top: var(--my, 14px); inset-inline-start: var(--mx, 14px);
  width: var(--ms, 54px); height: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .18));
}
.logo__mini rect { fill: var(--slate); }
.logo__mini path { fill: var(--pink); }
.logo.is-mini .logo__art { opacity: 0; transition: opacity .3s ease; }
.logo.is-mini .logo__mini { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.logo.is-mini .logo__blob { pointer-events: none; }
.logo:focus-visible .logo__mini { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 34%; }

/* ---------- bar (pill) ---------- */
.bar {
  position: fixed; z-index: 90;
  top: calc(14px + var(--safe-top)); inset-inline-end: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 7px; padding-inline-end: 10px;
  background: var(--mist);
  border-start-start-radius: 999px; border-end-start-radius: 999px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .2), inset 0 0 0 1px rgb(255 255 255 / .6);
  transform-origin: 100% 50%;
}
[dir=rtl] .bar { transform-origin: 0% 50%; }
.bar__links { display: none; }
.bar__glow { display: none; }

/* language toggle: two labels, a thumb that slides to the active one (always EN | AR, left to right) */
.lang {
  position: relative; isolation: isolate; direction: ltr;
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  height: 44px; padding: 4px; flex: none;
  border: 0; border-radius: 999px; background: rgb(43 43 46 / .07);
  font-size: .875rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.lang__opt { display: grid; place-items: center; min-width: 34px; padding: 0 6px; border-radius: 999px; transition: color .35s var(--ease); }
.lang__opt[lang=ar] { font-size: .9375rem; }
.lang__opt[lang=en] { letter-spacing: .04em; }
.lang__thumb {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--ink);
  transition: transform .6s var(--spring);
}
html[lang=ar] .lang__thumb { transform: translateX(100%); }
html[lang=en] .lang__opt[lang=en], html[lang=ar] .lang__opt[lang=ar] { color: var(--paper); }
@media (hover: hover) { .lang:hover { background: rgb(43 43 46 / .12); } }

.burger {
  position: relative; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: var(--pink); cursor: pointer;
  transition: background-color .45s var(--ease), scale .5s var(--spring);
}
.burger span {
  position: absolute; inset-inline: 12px; height: 2.5px; border-radius: 2px; background: var(--ink);
  /* close: un-rotate first, then slide apart */
  transition: rotate .35s var(--ease), translate .3s var(--ease) .22s, background-color .3s;
}
.burger span:nth-child(1) { top: calc(50% - 5px); }
.burger span:nth-child(2) { top: calc(50% + 3px); }
.burger[aria-expanded=true] { background: var(--ink); }
.burger[aria-expanded=true] span {
  background: var(--paper);
  /* open: slide together, then spring into an X */
  transition: translate .22s var(--ease), rotate .55s var(--spring) .18s, background-color .3s;
}
.burger[aria-expanded=true] span:nth-child(1) { translate: 0 4px; rotate: 45deg; }
.burger[aria-expanded=true] span:nth-child(2) { translate: 0 -4px; rotate: -45deg; }
@media (hover: hover) { .burger:hover { scale: 1.07; } }
.burger:active { scale: .92; }

/* ---------- CTA pill (arrow disc floods on hover) ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding-inline: 20px 6px;
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font-size: var(--fs-nav); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
}
.cta svg { box-sizing: content-box; width: 16px; height: 16px; padding: 10px; }
.cta::before {
  content: ""; position: absolute; z-index: -1; inset-inline-end: 6px; top: 50%;
  width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--paper);
  transition: transform .55s var(--ease);
}
[dir=rtl] .cta svg { transform: scaleX(-1); }
@media (hover: hover) { .cta:hover::before { transform: scale(14); } }
.cta--bar { display: none; height: 44px; }
.cta--bar::before { width: 32px; height: 32px; margin-top: -16px; }
.cta--bar svg { padding: 8px; }

/* ---------- drawer: circle wipe from the burger, pink edge settling to heather ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(170px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  background: var(--pink); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0 at var(--ox, 100%) var(--oy, 0px));
  visibility: hidden;
  transition: clip-path .55s cubic-bezier(.64, 0, .78, 0) .1s, background-color .3s ease, visibility 0s .65s;
}
.drawer.is-open {
  clip-path: circle(150vmax at var(--ox, 100%) var(--oy, 0px));
  background: var(--heather);
  visibility: visible;
  transition: clip-path .8s var(--ease), background-color .8s ease .3s;
}
.drawer::after { /* soft mist glow that blooms from the burger corner */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--ox, 100%) var(--oy, 0px), rgb(233 234 232 / .55), transparent 60%);
  opacity: 0; transition: opacity .6s ease;
}
.drawer.is-open::after { opacity: 1; transition-delay: .4s; }
.drawer__links { margin-block: auto; }
.link {
  position: relative; display: block; overflow: hidden; text-decoration: none; padding-bottom: .04em;
  font-size: clamp(3.5rem, 18vw, 7rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em;
}
.link__t {
  display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: 0 100%;
  transition: transform .45s cubic-bezier(.5, 0, .75, 0);
}
[dir=rtl] .link__t { transform-origin: 100% 100%; transform: translateY(110%) rotate(-6deg); }
.is-open .link__t { transform: none; transition: transform .9s var(--spring) calc(.32s + var(--n) * .09s); }
.link::after { /* pink stroke that draws in on hover */
  content: ""; position: absolute; inset-inline-start: 0; bottom: .08em; width: 1.2em; height: .09em;
  border-radius: 99px; background: var(--pink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
[dir=rtl] .link::after { transform-origin: 100% 50%; }
@media (hover: hover) { .link:hover::after { transform: scaleX(1); } }
.link:focus-visible { outline-offset: -4px; }
:lang(ar) .link { line-height: 1.4; font-weight: 700; }
.drawer__foot { opacity: 0; transform: translateY(24px); transition: opacity .25s, transform .4s var(--ease); }
.is-open .drawer__foot { opacity: 1; transform: none; transition: opacity .5s ease .55s, transform .8s var(--ease) .5s; }
.drawer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.drawer .cta { background: var(--ink); color: var(--paper); }
.drawer .cta::before { background: var(--pink); }
.drawer .cta svg { color: var(--ink); }
.lang--drawer { height: 48px; background: var(--mist); }
.small { font-size: .9375rem; }
.small--quiet { margin-top: 6px; font-size: .75rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  background: var(--heather-cool);
}
.hero__media, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media { z-index: 0; } /* own stacking context: the layers and the shade stay under the card */
/* two video layers (main.js): the incoming one fades in on top; the outgoing one stays opaque underneath, then drops */
.hero__video { opacity: 0; z-index: 0; transition: opacity 0s .95s; }
.hero__video.is-on { opacity: 1; z-index: 1; transition: opacity .9s var(--ease); }
.hero__media::after { /* soft cool shade at the bottom so the card sits well */
  content: ""; position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(to top, rgb(40 42 43 / .45), transparent 45%);
}

.card { /* grey-tinted glass, like the facade */
  position: absolute; z-index: 2;
  inset-inline: 12px; bottom: calc(12px + var(--safe-bottom));
  padding: 20px 20px 18px;
  border: 1.5px solid rgb(255 255 255 / .55); border-radius: 24px;
  background: rgb(233 234 232 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(.9); backdrop-filter: blur(14px) saturate(.9);
  box-shadow: 0 18px 50px rgb(0 0 0 / .25);
}
.kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; }
:lang(ar) .kicker { font-size: .8125rem; }
.hero-title {
  margin-top: 10px;
  font-size: var(--fs-hero); font-weight: 600; line-height: .95; letter-spacing: -.03em;
}
:lang(ar) .hero-title { font-size: calc(var(--fs-hero) * 1.06); line-height: 1.25; }
.card__body { margin-top: 10px; max-width: 36ch; opacity: .85; }
:lang(ar) .card__body { line-height: 1.7; }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.card__place { font-size: .8125rem; font-weight: 500; opacity: .8; text-align: end; }
.card { padding-top: 28px; }
.hero.has-slides .card { padding-top: 36px; } /* room for the controls that straddle the card's top edge on phones */
/* the product now on screen: a charcoal tab on the card's top edge */
.card__now {
  position: absolute; top: 0; inset-inline-start: 16px; translate: 0 -50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 8px 12px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: .8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(0 0 0 / .22);
}
[dir=rtl] .card__now { padding: 7px 12px 8px 14px; }
.card__now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; }
.card__now { transition: width .5s var(--ease); }
.card__now-t { display: block; white-space: nowrap; transition: opacity .42s var(--ease), translate .5s var(--ease), filter .42s var(--ease); }
.card__now.is-out .card__now-t { opacity: 0; translate: 0 -7px; filter: blur(3px); transition-duration: .26s; }
.card__now.is-pre .card__now-t { opacity: 0; translate: 0 7px; filter: blur(3px); transition: none; }

/* slide controls: « || » in the menu-pill style. Phones: on the card's top edge (main.js sets --card-top / --card-end) */
.hc {
  position: absolute; z-index: 3;
  bottom: calc(var(--card-top, 260px) - 24px); inset-inline-end: calc(var(--card-end, 12px) + 14px);
  display: flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--mist); border-radius: 999px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .2), inset 0 0 0 1px rgb(255 255 255 / .6);
}
.hc[hidden], .hc__btn[hidden] { display: none; }
.hc__btn {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s var(--ease), scale .2s var(--ease);
}
.hc__btn:active { scale: .92; }
@media (hover: hover) { .hc__btn:hover { background: var(--paper); } }
.hc__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.hc__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir=rtl] .hc__prev svg, [dir=rtl] .hc__next svg { transform: scaleX(-1); } /* arrows point the reading way */
.hc__btn .hc__ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
[dir=rtl] .hc__btn .hc__ring { transform: scaleX(-1) rotate(-90deg); } /* fills counter-clockwise in Arabic */
.hc__ring circle { stroke: var(--pink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hc__btn .hc__icon { width: 18px; height: 18px; stroke-width: 2.6; }
.hc__tri { fill: currentColor; stroke: none; display: none; }
.hc__play.is-paused .hc__pause { display: none; }
.hc__play.is-paused .hc__tri { display: block; }

.badge { display: none; }

/* ---------- page bands ----------
   Rhythm: hero (heather) > crumble (charcoal) > menu (mist) > space (heather) > visit (charcoal) > footer (pink).
   A band that hands over to a different colour draws the next band's wavy top (the door cut-out) at its own bottom,
   inside its box, so the sections' overflow: clip never cuts it. Visit draws its own wave (css/visit.css). */
.wave-next::after {
  content: ""; position: absolute; z-index: 2; inset-inline: 0; bottom: -1px; height: 28px;
  background: var(--wave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cpath d='M0 28V16C15 16 15 4 30 4S45 16 60 16 75 4 90 4s15 12 30 12v12Z'/%3E%3C/svg%3E") repeat-x bottom / 120px 28px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cpath d='M0 28V16C15 16 15 4 30 4S45 16 60 16 75 4 90 4s15 12 30 12v12Z'/%3E%3C/svg%3E") repeat-x bottom / 120px 28px;
  pointer-events: none;
}
/* small phones: the chip and the controls don't both fit on the card's edge, so the controls sit just above it */
@media (max-width: 374px) {
  .hc { bottom: calc(var(--card-top, 260px) + 22px); }
  .hero.has-slides .card { padding-top: 28px; }
}
/* very small phones (320-359): tighter pill so it clears the wordmark */
@media (max-width: 359px) {
  .bar { gap: 4px; padding: 5px; padding-inline-end: 6px; }
  .lang__opt { min-width: 30px; padding: 0 4px; }
  .lang__opt[lang=ar] { font-size: .8125rem; }
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .cta--bar { display: inline-flex; }
  .lang__opt { min-width: 40px; padding: 0 9px; }
  .card { inset-inline: 24px auto; max-width: 560px; padding: 28px; }
  .card__now { inset-inline-start: 24px; }
}
/* tablet + desktop: the controls sit in the hero's bottom-right corner (the video isn't mirrored, so not in Arabic either) */
@media (min-width: 768px) {
  .hero.has-slides .card { padding-top: 28px; }
  .hc { bottom: 24px; inset-inline: auto; right: 24px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  :root { --logo-w: clamp(340px, 28vw, 440px); --gutter: 40px; }
  .bar {
    top: 28px; inset-inline-end: 32px;
    gap: 4px; padding: 6px;
    border-radius: 999px;
  }
  .bar__links { position: relative; z-index: 1; display: flex; align-items: center; margin-inline-end: 4px; }
  .bar__links a {
    display: block; padding: 12px 18px; border-radius: 999px;
    font-size: var(--fs-nav); font-weight: 500; text-decoration: none;
  }
  html:not(.js) .bar__links a:hover { background: var(--paper); }
  .bar__links a:focus-visible { outline-offset: -2px; box-shadow: none; }
  /* the highlight that glides between links (main.js moves it) */
  .bar__glow {
    display: block; position: absolute; z-index: 0; left: 0; top: 6px; height: calc(100% - 12px); width: 60px;
    border-radius: 999px; background: var(--paper);
    box-shadow: 0 2px 8px rgb(43 43 46 / .12);
    opacity: 0; pointer-events: none;
  }
  .burger, .drawer { display: none; }
  .card { inset-inline: 40px auto; bottom: 40px; max-width: min(620px, 44vw); padding: 40px 40px 32px; border-radius: 28px; }
  .hero.has-slides .card { padding-top: 40px; }
  .card__now { inset-inline-start: 36px; padding-block: 8px 9px; font-size: .875rem; }
  .hc { bottom: 40px; right: 40px; }
  .hc__btn { width: 48px; height: 48px; }
  .hc__btn .hc__ring { width: 48px; height: 48px; }
  .hero.has-slides .badge { bottom: 108px; }
  /* the hero video isn't mirrored (the cup and its p sit on the right), so the card keeps to the empty left wall in Arabic too */
  [dir="rtl"] .card { inset-inline: auto 40px; }
  [dir="rtl"] .badge { inset-inline: 40px auto; }
  .card__body { margin-top: 16px; font-size: 1rem; }
  .card__row { justify-content: flex-start; gap: 24px; margin-top: 24px; }
  .badge {
    display: block; position: absolute; z-index: 2; bottom: 40px; inset-inline-end: 40px;
    padding: 8px 14px; border-radius: 999px;
    background: rgb(40 42 43 / .5); color: rgb(255 255 255 / .9);
    font-size: .75rem; letter-spacing: .02em;
  }
}

/* ---------- language switch wipe (main.js switchLang) ---------- */
.lang-wipe { position: fixed; inset: 0; z-index: 1000; overflow: hidden; visibility: hidden; pointer-events: none; }
.lang-wipe i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 130vw;
  background: linear-gradient(90deg, var(--heather) 0 calc(100% - 22vw), var(--pink) 0); /* pink leads, heather follows */
  transform: translateX(-130vw);
  /* the wavy door edge on both sides */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M28 0H16C16 15 4 15 4 30S16 45 16 60 4 75 4 90s12 15 12 30h12Z'/%3E%3C/svg%3E") left top / 28px 120px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M0 0H12C12 15 24 15 24 30S12 45 12 60 24 75 24 90s-12 15-12 30H0Z'/%3E%3C/svg%3E") right top / 28px 120px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 54px) 100% no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M28 0H16C16 15 4 15 4 30S16 45 16 60 4 75 4 90s12 15 12 30h12Z'/%3E%3C/svg%3E") left top / 28px 120px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M0 0H12C12 15 24 15 24 30S12 45 12 60 24 75 24 90s-12 15-12 30H0Z'/%3E%3C/svg%3E") right top / 28px 120px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 54px) 100% no-repeat;
  will-change: transform;
}
.lang-wipe.is-rtl i { background: linear-gradient(90deg, var(--pink) 0 22vw, var(--heather) 0); }
.lang-wipe.is-soft i { width: 100%; transform: none; opacity: 0; background: var(--heather); -webkit-mask: none; mask: none; }

/* ---------- intro (html.intro is set in <head>; main.js plays it with GSAP, then adds .intro-go) ---------- */
@keyframes rise { from { transform: translateY(48px); opacity: .01; } } /* .01 not 0: looks the same, but the browser counts the card as painted (phone LCP) */
@keyframes failsafe { to { visibility: visible; } }
.intro:not(.intro-go) .logo__art, .intro:not(.intro-go) .bar { visibility: hidden; animation: failsafe 0s 2.5s forwards; } /* if scripts never run */
.intro .card { animation: rise .9s var(--spring) .65s both; }
.intro .badge { animation: rise .6s var(--ease) 1s both; }
.intro .hc { animation: rise .9s var(--spring) .75s both; }

@media (prefers-reduced-motion: reduce) {
  .burger, .burger span, .cta::before, .lang__thumb, .lang__opt, .link__t, .link::after, .hero__video, .card__now, .card__now-t, .hc__btn { transition: none !important; }
  .drawer { clip-path: none; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  .drawer.is-open { clip-path: none; opacity: 1; transition: opacity .2s; }
  .link__t, [dir=rtl] .link__t, .drawer__foot { transform: none; opacity: 1; transition: none; }
  .drawer::after { display: none; }
}