/* ============================================================
   ZOUMI STORE — holding page
   ------------------------------------------------------------
   Composition, not decoration. Five stacked planes, each moving
   at its own rate so the page has real depth instead of a flat
   "logo + button" card:

     -3  ground   : deep field + brand glows
     -2  ghost    : oversized wordmark (the ghost-numeral device
                    zoumi.net already uses in .showcase / .facts)
     -1  axis     : one hairline that gives the layout an horizon
      0  product  : the actual pack shot, sitting ON that horizon
      1  copy     : type, overlapping the product's leading edge
      2  badge    : sticker, in front of everything, counter-moving

   Colour, type and easing tokens are copied from the live site
   verbatim — nothing about the brand is reinvented here.
   ============================================================ */

@font-face{font-family:Saudi;src:url("../fonts/SaudiWeb-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Saudi;src:url("../fonts/SaudiWeb-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/SourceSerif4-var-latin.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

:root{
    --deep:#06231e;--green:#0a4a3f;--lime:#c7dc42;--ink:#0e2c26;
    --cream:#fffdf8;
    --radius-pill:999px;
    --ease:cubic-bezier(.16,1,.3,1);
    --ar:Saudi,"Noto Naskh Arabic",Tahoma,sans-serif;
    --en:"Source Serif 4",Charter,Georgia,serif;
    --pad:max(6vw,1.4rem);
    /* pointer offset, written by JS on .page; every plane reads it
       through its own --d depth multiplier */
    --mx:0px;--my:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;overflow-x:clip;background:var(--deep);color:var(--cream);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0}
a,button{touch-action:manipulation}
svg{display:block;flex:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px}
.skip-link{position:fixed;z-index:1000;inset-block-start:.7rem;inset-inline-start:.7rem;padding:.75rem 1.1rem;
    background:var(--cream);color:var(--ink);font-weight:700;border-radius:.5rem;transform:translateY(-200%);transition:transform .2s}
.skip-link:focus{transform:none}

html[dir=rtl] body{font-family:var(--ar);font-size:1.1rem;line-height:1.8}
html[dir=ltr] body{font-family:var(--en);font-size:1.05rem;line-height:1.6}

/* ---------- Page shell ---------- */
.page{position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;min-height:100svh}

/* plane -3 */
.ground{position:absolute;inset:0;z-index:-3;pointer-events:none;
    background:
      radial-gradient(58rem 40rem at 88% -10%,rgba(10,74,63,.85),rgba(10,74,63,0) 62%),
      radial-gradient(44rem 34rem at 4% 104%,rgba(199,220,66,.14),rgba(199,220,66,0) 60%),
      radial-gradient(30rem 24rem at 62% 58%,rgba(210,72,31,.09),rgba(210,72,31,0) 66%)}
html[dir=ltr] .ground{
    background:
      radial-gradient(58rem 40rem at 12% -10%,rgba(10,74,63,.85),rgba(10,74,63,0) 62%),
      radial-gradient(44rem 34rem at 96% 104%,rgba(199,220,66,.14),rgba(199,220,66,0) 60%),
      radial-gradient(30rem 24rem at 38% 58%,rgba(210,72,31,.09),rgba(210,72,31,0) 66%)}
/* the woven trim from the site footer, tiled flat as a texture */
.ground::after{content:"";position:absolute;inset:-12% -20%;
    background:url("../images/footer-pattern.webp") repeat center/8rem auto;
    opacity:.045;transform:rotate(-5deg)}

.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Bar ---------- */
.bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
    gap:1rem;padding:1.35rem var(--pad) 0}
.bar__brand{display:inline-block;font:700 1.7rem/1 var(--en);letter-spacing:-.03em}
.bar__brand span{color:var(--lime)}
.lang-toggle{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1.15rem;
    border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius-pill);
    font-size:.88rem;font-weight:700;color:var(--cream);cursor:pointer;
    transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.lang-toggle:is(:hover,:focus-visible){border-color:var(--lime);background:var(--lime);color:var(--deep)}

/* ---------- Ribbon ----------
   The tilt lives on the BAND, not the track. A track wide enough to
   loop is several viewports across, and rotating that pivots around
   a centre far off-screen — which swings the visible end clean out
   of the clip window. Tilting a viewport-width band instead keeps
   the pivot on screen, and leaves the track a pure translateX. */
.ribbon{position:relative;z-index:4;overflow:hidden;
    margin-block-start:clamp(.4rem,1.6vh,1rem);padding-block:clamp(1.1rem,2.4vh,1.9rem)}
.ribbon__band{width:116%;margin-inline-start:-8%;overflow:hidden;
    background:var(--lime);color:var(--deep);
    box-shadow:0 1rem 2.4rem rgba(6,35,30,.38);
    transform:rotate(-2.2deg)}
html[dir=rtl] .ribbon__band{transform:rotate(2.2deg)}
.ribbon__track{display:flex;width:max-content;align-items:center;padding-block:.62rem;
    animation:marquee 34s linear infinite}
html[dir=rtl] .ribbon__track{animation-name:marquee-rtl}
.ribbon__track span{flex:none;padding-inline:.9rem;
    font:800 .92rem/1 var(--en);letter-spacing:.16em;text-transform:uppercase}
html[dir=rtl] .ribbon__track span{font-family:var(--ar);font-size:1.16rem;font-weight:700;letter-spacing:0;text-transform:none}
.ribbon__track i{flex:none;font-style:normal;font-size:.7rem;opacity:.5}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marquee-rtl{to{transform:translateX(50%)}}

/* ---------- Stage ---------- */
/* Vertical rhythm is height-aware throughout: on a 900px-tall
   laptop the poster still lands its CTA above the fold, and on a
   tall monitor it opens back up instead of stranding the type. */
.stage{position:relative;flex:1;display:grid;align-content:center;
    gap:clamp(1.4rem,3.6vh,3rem);
    padding:clamp(1rem,2.4vh,2.4rem) var(--pad) clamp(1.2rem,3vh,2.8rem)}

/* plane -2 — the oversized ghost numeral zoumi.net uses to mark a
   section (.showcase__numeral, .who__card::before). Here it counts
   the flavours, and gives the pack shot something to sit in front of. */
.stage__ghost{position:absolute;z-index:-2;pointer-events:none;user-select:none;
    /* physical left/top on purpose — a -50% translate centres against
       `left`, so pairing it with inset-inline-start would throw the
       numeral off-centre under RTL, where that resolves to `right`. */
    top:50%;left:50%;margin:0;
    font:700 clamp(13rem,27vw,28rem)/.7 var(--en);letter-spacing:-.07em;
    color:rgba(255,255,255,.045);
    transform:translate(-50%,-50%) translate3d(calc(var(--mx) * .18),calc(var(--my) * .18),0)}

/* plane -1 — the horizon the product stands on */
.stage__axis{position:absolute;z-index:-1;pointer-events:none;
    inset-inline:calc(var(--pad) * -1);inset-block-start:68%;height:1px;
    background:linear-gradient(90deg,rgba(199,220,66,0),rgba(199,220,66,.34) 22%,rgba(199,220,66,.34) 78%,rgba(199,220,66,0));
    transform:translate3d(calc(var(--mx) * .3),calc(var(--my) * .3),0)}

/* ---------- Copy (plane 1) ---------- */
.stage__copy{position:relative;z-index:1;min-width:0;
    transform:translate3d(calc(var(--mx) * .5),calc(var(--my) * .5),0)}

.status{display:inline-flex;align-items:center;gap:.6rem;min-height:2.5rem;padding-inline:1rem;
    border-radius:var(--radius-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);
    font-size:.88rem;font-weight:600;color:rgba(255,255,255,.9)}
html[dir=rtl] .status{font-weight:700}
.status__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--lime);flex:none;
    animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}

.kicker{margin-block-start:clamp(.85rem,2.1vh,1.5rem);display:flex;align-items:center;gap:.7rem;
    color:var(--lime);font-size:.86rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
html[dir=rtl] .kicker{letter-spacing:0;text-transform:none;font-size:1rem}
.kicker::before{content:"";width:2.2rem;height:2px;background:var(--lime);flex:none}

/* headline — two masked lines, the second stepped in so the
   silhouette is a shape rather than a flush block.
   justify-items:start is deliberate in BOTH directions: `start` is
   the inline start, i.e. the right edge under RTL. (`end` would
   throw the lines to the left in Arabic.) */
.headline{margin-block-start:clamp(.3rem,.9vh,.7rem);display:grid;justify-items:start}
/* min() against vh keeps a two-line headline from eating a short
   viewport; the vw term still drives it on phones. */
html[dir=rtl] .headline{font-family:var(--ar);font-weight:700;line-height:1.04;
    font-size:clamp(3.6rem,min(19vw,15vh),8rem)}
html[dir=ltr] .headline{font-family:var(--en);font-weight:600;line-height:.96;letter-spacing:-.032em;
    font-size:clamp(3.2rem,min(17vw,14.5vh),7.4rem)}
.line{display:block;overflow:hidden;
    padding-block:.06em .16em;margin-block:-.06em -.16em}
.line:last-child{margin-inline-start:clamp(1.5rem,7vw,5.5rem)}
/* the offset is gated on .js: without scripting `is-ready` never
   lands, and an ungated translate would leave the headline parked
   below its own mask forever */
.line__in{display:block}
.js .line__in{transform:translateY(105%);
    transition:transform .95s var(--ease);transition-delay:calc(var(--i) * 130ms + 120ms)}
.js.is-ready .line__in{transform:none}
.line__in--accent{color:var(--lime)}

.lede{margin-block-start:clamp(.9rem,2vh,1.5rem);max-width:32ch;
    color:rgba(255,255,255,.72);font-size:clamp(1.02rem,2.2vw,1.2rem)}
html[dir=rtl] .lede{line-height:1.9}

.chips{margin-block-start:clamp(1rem,2.4vh,1.9rem);display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{display:inline-flex;align-items:center;min-height:2.7rem;padding-inline:1.15rem;
    border:1.5px solid rgba(255,255,255,.24);border-radius:var(--radius-pill);
    background:rgba(6,35,30,.35);
    font-size:.94rem;font-weight:600;color:rgba(255,255,255,.9)}
html[dir=rtl] .chips li{font-size:1rem;font-weight:700}

.actions{margin-block-start:clamp(1.1rem,2.6vh,2.1rem);display:flex;flex-direction:column;gap:1.4rem}

.button{position:relative;isolation:isolate;display:inline-flex;align-self:start;align-items:center;
    justify-content:center;gap:.75rem;min-height:3.6rem;padding-inline:1.9rem;overflow:hidden;cursor:pointer;
    background:var(--lime);color:var(--deep);font-weight:700;font-size:1.05rem;border-radius:var(--radius-pill);
    box-shadow:0 .7rem 1.8rem rgba(6,35,30,.32)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);border-radius:inherit;
    transform:translateY(101%);transition:transform .42s var(--ease)}
.button:is(:hover,:focus-visible)::before{transform:none}
.button svg{width:1.1rem;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .35s var(--ease)}
.button:hover svg{transform:translateX(.22rem)}
html[dir=rtl] .button svg{transform:scaleX(-1)}
html[dir=rtl] .button:hover svg{transform:translateX(-.22rem) scaleX(-1)}

.follow{display:flex;flex-direction:column;align-items:start;gap:.75rem}
.follow__label{font-size:.84rem;font-weight:600;color:rgba(255,255,255,.55)}
html[dir=rtl] .follow__label{font-size:.92rem;font-weight:700}
.social-links{display:flex;gap:.6rem}
.social-links a{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;
    border:1px solid rgba(255,255,255,.26);
    transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.social-links a:is(:hover,:focus-visible){background:var(--lime);border-color:var(--lime);color:var(--deep);transform:translateY(-.2rem)}
.social-links svg{width:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- Visual: ghost + product + badge share one anchor, so
   each can carry its own parallax rate without nesting transforms
   (a nested transform would compound and flatten the separation). */
.stage__visual{position:relative;display:grid;justify-items:center}

/* ---------- Product (plane 0) ---------- */
.stage__product{position:relative;z-index:0;width:min(100%,29rem);
    transform:translate3d(calc(var(--mx) * -.85),calc(var(--my) * -.85),0)}
/* soft disc behind the packs: separates them from the ground and
   gives the horizon line something to pass behind */
.stage__disc{position:absolute;inset:2% 0 10%;border-radius:50%;
    background:radial-gradient(circle at 50% 45%,rgba(199,220,66,.26),rgba(199,220,66,0) 66%);
    filter:blur(1.5rem)}
.stage__product img{position:relative;width:100%;
    filter:drop-shadow(0 1.8rem 2.2rem rgba(4,20,17,.55));
    animation:float 9s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-1.1rem) rotate(-.7deg)}}

/* ---------- Badge (plane 2) — counter-moves, so it reads as
   physically nearer than the packs it sits over ---------- */
.badge{position:absolute;z-index:2;pointer-events:none;
    display:grid;place-items:center;align-content:center;gap:.05rem;
    width:clamp(5.6rem,14vw,7.4rem);aspect-ratio:1;border-radius:50%;
    background:var(--lime);color:var(--deep);text-align:center;
    box-shadow:0 1rem 2.2rem rgba(6,35,30,.45);
    transform:translate3d(calc(var(--mx) * 1.5),calc(var(--my) * 1.5),0)}
.badge__ring{position:absolute;inset:.42rem;border-radius:50%;
    border:1.5px dashed rgba(6,35,30,.4);
    animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge__num{font:700 1.9rem/1 var(--en)}
html[dir=rtl] .badge__num{font-family:var(--ar)}
.badge__word{font-style:normal;font:700 .72rem/1 var(--en);letter-spacing:.1em;text-transform:uppercase}
html[dir=rtl] .badge__word{font-family:var(--ar);font-size:.9rem;letter-spacing:0;text-transform:none}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:1}
.site-footer__horizon{width:100%;height:clamp(1.9rem,4vh,3rem);
    background:url("../images/footer-palms.webp") repeat-x bottom center/auto 100%;opacity:.68}
.site-footer__trim{width:100%;height:clamp(.75rem,1.5vw,1.05rem);
    background:url("../images/footer-pattern.webp") repeat-x center/auto 100%;opacity:.5}
.site-footer__legal{padding:.8rem var(--pad) 1rem;text-align:center;
    color:rgba(255,255,255,.62);font-size:.82rem}

/* ---------- Entrance ---------- */
.js [data-rise]{opacity:0;transform:translateY(1.2rem);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
    transition-delay:calc(var(--i,0) * 75ms)}
.js.is-ready [data-rise]{opacity:1;transform:none}
.js .stage__product,.js .badge{opacity:0;transition:opacity .9s var(--ease) .18s}
.js.is-ready .stage__product,.js.is-ready .badge{opacity:1}

/* ============================================================
   Layout
   ------------------------------------------------------------
   Under 1000px the page stacks (see the mobile block below).
   Above it, copy and visual share a 12-column grid overlapping by
   one column, so the planes interlock. The type clears the packs
   because the copy is inline-start aligned and its lines are far
   shorter than the column — not because the artwork has a margin
   to spare; it has none.
   ============================================================ */
.stage__visual{order:1}
.badge{inset-block-start:2%;inset-inline-start:0}

/* ============================================================
   MOBILE (≤999px) — composed for the small screen on its own
   terms, not a squeezed desktop.
   ------------------------------------------------------------
   Sequence: identity → message → products → action.

   The markup nests chips and CTA inside .stage__copy, which on a
   phone would strand the pack shot below the button. Rather than
   duplicate the markup, .stage__copy dissolves with display:contents
   so its children become direct grid items of .stage and can be
   ordered freely. It is a plain <div> carrying no semantics, so
   nothing is lost from the accessibility tree.
   (developer.mozilla.org/en-US/docs/Web/CSS/display-box#contents)

   Spacing is a rhythm, not a constant: ~6-14px inside a thought,
   ~30px between them. Uniform gaps were what made the old stack
   read flat — every block looked equally important.
   ============================================================ */
@media (max-width:999px){
    .stage__copy{display:contents}

    .stage{grid-template-columns:minmax(0,1fr);
        align-content:start;row-gap:0;
        padding-block:clamp(.8rem,2.4vh,1.5rem) clamp(1.4rem,4vh,2.4rem)}

    /* grid-row sets the reading order; source order is unchanged */
    .status        {grid-row:1;justify-self:start}
    .kicker        {grid-row:2;margin-block-start:clamp(1.3rem,3.4vh,1.9rem)}
    .headline      {grid-row:3;margin-block-start:.35rem}
    .lede          {grid-row:4;margin-block-start:clamp(.8rem,2.2vh,1.1rem);max-width:32ch}
    .stage__visual {grid-row:5;margin-block-start:clamp(1.5rem,4.4vh,2.6rem)}
    .chips         {grid-row:6;margin-block-start:clamp(1.2rem,3.2vh,1.7rem)}
    .actions       {grid-row:7;margin-block-start:clamp(1rem,2.8vh,1.4rem)}

    /* The pack shot runs past the text margin to the screen edges.
       Full-bleed is what stops it reading as an oversized icon
       dropped between two paragraphs — here it is the second hero.
       Exactly 100%, no wider: the artwork carries no transparent
       border (its opaque box is the full 1100x772), so any overshoot
       crops real packs rather than empty margin. */
    .stage__visual{width:auto;margin-inline:calc(var(--pad) * -1)}
    .stage__product{width:100%;max-width:none}

    /* The shared axis is placed as a % of .stage, whose height shifts
       with the copy; on one column that lands it anywhere. The visual
       carries its own horizon instead. */
    .stage__axis{display:none}
    .stage__visual::after{content:"";position:absolute;z-index:-1;
        inset-inline:0;inset-block-start:57%;height:1px;
        background:linear-gradient(90deg,rgba(199,220,66,0),rgba(199,220,66,.3) 18%,rgba(199,220,66,.3) 82%,rgba(199,220,66,0))}

    .stage__ghost{font-size:min(52vw,18rem)}
    .badge{inset-block-start:-2%;inset-inline-start:calc(var(--pad) * .4)}

    /* three chips on one row down to 375px */
    .chips{gap:.45rem}
    .chips li{min-height:2.6rem;padding-inline:.9rem;font-size:.88rem}
    html[dir=rtl] .chips li{font-size:.94rem}

    /* Tap targets: 48px minimum with ≥8px separation, per the
       WCAG 2.5.8 / web.dev "accessible tap targets" guidance. */
    .actions{gap:1.15rem}
    .button{align-self:stretch;min-height:3.4rem}
    .lang-toggle{min-height:3rem;padding-inline:1.3rem}
    .social-links{gap:.7rem}
    .social-links a{width:3rem;height:3rem}

    /* the product now sits mid-page, so it fades in after the copy
       above it rather than ahead of it */
    .js .stage__product,.js .badge{transition-delay:.5s}
}

@media(min-width:1000px){
    .stage{grid-template-columns:repeat(12,minmax(0,1fr));
        align-items:center;column-gap:clamp(.5rem,1.5vw,1.5rem);row-gap:0}
    .stage__copy{grid-area:1/1/2/7}
    .stage__visual{grid-area:1/6/2/13;order:0}
    .stage__product{width:100%}
    .badge{inset-block-start:6%;inset-inline-start:-2%}
    .actions{flex-direction:row;align-items:center;gap:2.2rem}
}
@media(min-width:1280px){
    .stage{min-height:calc(100svh - 13rem)}
    .stage__product{width:min(100%,38rem)}
}

/* ============================================================
   Scroll-linked drift — progressive enhancement only. Where the
   engine has scroll-driven animations (Chrome/Edge 115+, Safari 26+)
   the deep planes drift as the page moves; everywhere else the
   page simply renders in its final state. No JS, no scroll handler,
   so there is nothing to jank.
   ============================================================ */
/* `translate` rather than `transform`, so the drift composes with the
   pointer-parallax transform already on these elements instead of
   replacing it. Declared at top level — an unused @keyframes costs
   nothing, and not every parser handles one nested two rules deep. */
@keyframes drift-ghost{from{translate:0 4rem}to{translate:0 -4rem}}
@keyframes drift-axis{from{translate:0 2rem}to{translate:0 -2rem}}

@supports (animation-timeline:view()){
    @media(prefers-reduced-motion:no-preference){
        .stage__ghost{animation:drift-ghost linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
        .stage__axis{animation:drift-axis linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    }
}

/* ---------- Reduced motion: everything holds still ---------- */
@media(prefers-reduced-motion:reduce){
    .js [data-rise]{opacity:1;transform:none;transition:none}
    .js .stage__product,.js .badge{opacity:1;transition:none}
    .js .line__in{transform:none;transition:none}
    .ribbon__track,.stage__product img,.badge__ring,.status__dot{animation:none}
}