/*
Theme Name: Doughmestic Cookies
Theme URI: https://doughmestic.sa
Author: Branding by Alaa
Description: The DC Story — brand story page. Scroll-driven DC mark, 72-hour meter, sonicscape.
Version: 1.0
*/

@font-face { font-family: 'GC Grind'; src: url('assets/fonts/GC-Grind.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'DX Monstral'; src: url('assets/fonts/DxMonstral-Regular.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Aktiv Arabic'; src: url('assets/fonts/AktivArabic-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --indigo: #290266;
  --orange: #E16036;
  --midnight: #1E012A;
  --lavender: #F0EBFF;
  --violet: #6918D1;
  --grape: #96328C;
  --white: #FDF9FF;
  --pad: clamp(24px, 4.4vw, 64px);
}

* { box-sizing: border-box; }
/* no scroll-behavior: smooth — it fights Lenis */
html { overflow-x: clip; }
body { margin: 0; background: var(--midnight); color: var(--white); font-family: 'Poppins', system-ui, sans-serif; overflow-x: clip; }
/* clip, not hidden — hidden would make this a scroll container and kill the sticky hero */
#dc-page { position: relative; overflow-x: clip; }
a { color: var(--orange); text-decoration: none; }
img { max-width: 100%; display: block; }

.grind { font-family: 'GC Grind', 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 0.005em; }
.micro { font-weight: 500; font-size: clamp(9px, 0.78vw, 11px); letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- one continuous gradient field ---------- */
#dc-field {
  position: absolute; top: -40px; left: -12%; right: -12%; bottom: -40px;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 8% 3%,  rgba(225,96,54,0.46), transparent 16%),
    radial-gradient(circle at 92% 9%, rgba(105,24,209,0.50), transparent 17%),
    radial-gradient(circle at 4% 15%, rgba(150,50,140,0.40), transparent 15%),
    radial-gradient(circle at 88% 24%, rgba(225,96,54,0.30), transparent 14%),
    radial-gradient(circle at 10% 33%, rgba(105,24,209,0.50), transparent 16%),
    radial-gradient(circle at 94% 41%, rgba(150,50,140,0.42), transparent 15%),
    radial-gradient(circle at 6% 49%, rgba(225,96,54,0.34), transparent 14%),
    radial-gradient(circle at 90% 57%, rgba(105,24,209,0.52), transparent 17%),
    radial-gradient(circle at 12% 66%, rgba(150,50,140,0.44), transparent 16%),
    radial-gradient(circle at 86% 74%, rgba(225,96,54,0.32), transparent 14%),
    radial-gradient(circle at 8% 82%, rgba(105,24,209,0.50), transparent 16%),
    radial-gradient(circle at 92% 90%, rgba(150,50,140,0.46), transparent 16%),
    radial-gradient(circle at 50% 97%, rgba(105,24,209,0.40), transparent 18%);
  animation: fieldDrift 40s ease-in-out infinite;
}
@keyframes fieldDrift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-30px,0); } }
#dc-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: var(--midnight); opacity: .72; will-change: opacity;
}
.sec { position: relative; z-index: 2; }

/* ---------- header ---------- */
#dc-hdr {
  position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 60;
  /* three zones: player | logo | visit + language. Grid, not space-between,
     so the logo is centred on the VIEWPORT rather than on whatever space is
     left over between two unequal side groups. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad); pointer-events: none;
}
/* The banner is a pseudo-element rather than a background on the bar itself,
   so it can FADE in on opacity — background-image can't be transitioned.
   It stays hidden through the hero and arrives with .dc-on, the same flag
   that already marks the runway as passed. */
#dc-hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--midnight);
  background-image:
    radial-gradient(circle at 3% 50%,  rgba(225,96,54,.50), transparent 42%),
    radial-gradient(circle at 97% 50%, rgba(105,24,209,.55), transparent 44%),
    radial-gradient(circle at 50% 135%, rgba(150,50,140,.42), transparent 60%);
  border-bottom: 1px solid rgba(253,249,255,.10);
  opacity: 0; transition: opacity .45s ease; will-change: opacity;
}
#dc-hdr.dc-on::before { opacity: 1; }
#dc-hdr .dc-hdr-left  { justify-self: start;  display: flex; align-items: center; }
#dc-hdr .dc-hdr-right { justify-self: end;    display: flex; align-items: center; gap: 12px; }
#dc-hdr .dc-logo      { justify-self: center; }
/* The logo is the way home. It needs a real box and its own pointer-events:
   the header sets pointer-events:none so the hero stays draggable underneath,
   and every control in it opts back in. display:contents gave the anchor no
   box at all, so there was nothing to click either way. */
#dc-hdr .dc-logo > a { display: inline-flex; align-items: center; pointer-events: auto; }
#dc-foot > a { display: inline-flex; align-items: center; }

/* the shop CTA, sized to sit level with the language pill */
.dc-visit {
  pointer-events: auto; display: inline-flex; align-items: center; height: 44px;
  padding: 0 24px; border-radius: 999px; background: var(--orange); color: var(--midnight);
  font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: 17px;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: background .3s ease, transform .3s ease;
}
.dc-visit:hover { background: #C24E28; transform: translateY(-1px); }
.dc-ar .dc-visit { font-family: 'Aktiv Arabic', sans-serif; font-weight: 900; text-transform: none; font-size: 17px; }
/* the wordmark is present from the first frame — it used to fade in only
   after the hero had been passed, which left the top of the page bare */
#dc-hdr .dc-logo { opacity: 1; transform: none; transition: opacity .5s ease; }
/* the header carries its own dark banner now, so it never sits on a light
   ground — the light/dark logo swap is neutralised rather than removed, so
   drawHeader() can keep running untouched */
#dc-hdr img { height: 34px; width: auto; }
/* the header carries its own dark banner, so the white wordmark is always
   correct — the light-ground variant is never shown */
#dc-hdr .dc-lg-light { display: none; }

/* the header's right-hand group keeps the switcher and the player together,
   so #dc-hdr stays a two-child space-between and nothing else moves */
#dc-hdr .dc-hdr-right { display: flex; align-items: center; gap: 12px; }
.dc-lang {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(30,1,42,0.84); border: 1px solid rgba(253,249,255,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-family: 'GC Grind', sans-serif; font-size: 13px; line-height: 1;
  color: var(--white); text-decoration: none; letter-spacing: .02em;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.dc-lang:hover { border-color: var(--orange); color: var(--orange); }
#dc-hdr.dc-light .dc-lang { background: rgba(30,1,42,0.84); border-color: rgba(253,249,255,0.2); }
/* the Arabic glyph needs a touch more size to match the Latin cap height */
.dc-lang.dc-lang-ar { font-family: 'Aktiv Arabic', sans-serif; font-size: 17px; font-weight: 900; }

/* ---------- sonicscape player ---------- */
#dc-player {
  pointer-events: auto; touch-action: manipulation;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(30,1,42,0.84); border: 1px solid rgba(253,249,255,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
#dc-hdr.dc-light #dc-player { background: rgba(30,1,42,0.84); border-color: rgba(253,249,255,0.2); }
#dc-player .dc-pp { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#dc-player .dc-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
#dc-player .dc-eq i { width: 3px; background: var(--white); border-radius: 2px; height: 5px; animation: bar 1.1s ease-in-out infinite; }
#dc-player .dc-eq i:nth-child(3), #dc-player .dc-eq i:nth-child(6) { background: var(--orange); }
#dc-player .dc-eq i:nth-child(2) { animation-delay: .14s; }
#dc-player .dc-eq i:nth-child(3) { animation-delay: .28s; }
#dc-player .dc-eq i:nth-child(4) { animation-delay: .42s; }
#dc-player .dc-eq i:nth-child(5) { animation-delay: .56s; }
#dc-player .dc-eq i:nth-child(6) { animation-delay: .70s; }
#dc-player .dc-eq i:nth-child(7) { animation-delay: .84s; }
#dc-player.dc-paused .dc-eq i { animation-play-state: paused; height: 4px; }
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes ringTurn { to { transform: rotate(360deg); } }
#dc-player .dc-lbl { display: flex; flex-direction: column; gap: 4px; }
#dc-player .dc-lbl b { font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: 17px; font-weight: 400; line-height: 1; }
#dc-player .dc-lbl span { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253,249,255,0.5); font-weight: 500; }

/* ---------- floating shop badge: the brandbook's sticker, made a button ---------- */
#dc-shop {
  position: fixed; right: var(--pad); bottom: 40px; z-index: 55;
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,1,42,.86); border: 1px solid rgba(253,249,255,.22);
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
#dc-shop.dc-on { opacity: 1; transform: scale(1); pointer-events: auto; }
/* stand down over the footer — the badge was covering the social links */
#dc-shop.dc-off { opacity: 0; transform: scale(.7); pointer-events: none; }
#dc-shop:hover { transform: scale(1.06); border-color: var(--orange); }
#dc-shop .dc-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ringTurn 18s linear infinite; }
#dc-shop .dc-ring text { font-family: 'GC Grind', sans-serif; font-size: 11.5px; letter-spacing: .145em; fill: var(--white); text-transform: uppercase; }
#dc-shop .dc-shop-cookie { width: 54%; height: auto; animation: ringTurn 26s linear infinite reverse; }

/* ---------- hero: sticky runway ---------- */
/* 100vh of the runway past the counting is dead air on purpose: the hero
   holds at 72 so the line can actually be read before the page moves on */
#dc-runway { position: relative; height: 360vh; z-index: 2; }
/* svh, not vh: on iOS 100vh is the LARGE viewport, so the foot of the hero —
   the cue and the slogan — sits behind Safari's bottom toolbar and is never
   seen. svh is the visible height with the chrome showing. */
#dc-hero { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
#dc-mark { position: relative; width: min(586px, 71vw); aspect-ratio: 646 / 356; }
/* On a short laptop screen the centred mark + lockup leave almost no room
   under them, which caps how far the counter can grow. Shrink the mark there
   so the 72 still has somewhere to expand into. */
@media (min-width: 901px) and (max-height: 860px) {
  #dc-mark { width: min(500px, 60vw); }

}
@media (min-width: 901px) and (max-height: 740px) {
  #dc-mark { width: min(420px, 52vw); }
}
#dc-mark svg { position: absolute; top: 0; width: 50%; height: auto; will-change: transform; }
#dc-d { left: 0; }
#dc-c { left: 50%; }
#dc-flash { position: absolute; left: 50%; top: 50%; width: 65%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(.5); border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(225,96,54,0.55), transparent 62%); }
#dc-seeker { position: absolute; left: 50%; bottom: -5%; transform: translateX(-50%); z-index: 4; opacity: 0; transition: opacity .8s ease; }
#dc-seeker img { height: min(344px, 42vw); width: auto; }
#dc-seeker.dc-on { opacity: 1; }

/* the cue sits above the slogan, the pair anchored to the foot of the hero */
#dc-hero-foot { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 5; }
/* set like the footer slogan — lavender over orange, the second word larger */
#dc-lockup { display: flex; align-items: baseline; gap: 12px; margin-top: 0; opacity: 1; }
/* it lands with a touch more presence once the mark shuts */
#dc-lockup.dc-on .b { color: var(--orange); }
#dc-lockup .a { font-size: clamp(19px, 2.1vw, 30px); line-height: .9; color: var(--lavender); }
#dc-lockup .b { font-size: clamp(24px, 2.7vw, 38px); line-height: .9; color: var(--orange); }

#dc-cue { display: inline-block; transform-origin: center bottom; will-change: transform; }
/* the counter and the tagline have swapped places: the count is the thing
   the hero is actually about, and the tagline already closes the footer */
#dc-meter { display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: clamp(18px, 3.2vh, 42px); z-index: 5; will-change: transform; }
#dc-meter .dc-row { display: flex; align-items: baseline; justify-content: center; gap: clamp(10px, 2.4vw, 44px); min-height: 1px; }
/* nowrap is load-bearing: the size is derived from the measured line width,
   and a line that wraps while being measured reports its container's width */
#dc-meter .dc-row > div { white-space: nowrap; }
#dc-num { font-family: 'GC Grind', sans-serif; line-height: 1; color: var(--orange); font-size: 22px; }
/* the unit is what stops a bare number reading as a percentage */
#dc-unit { line-height: 1; color: var(--lavender); text-transform: uppercase; font-size: 12px; }

/* ---------- shared section shell ---------- */
.dc-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); position: relative; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.dc-in { opacity: 1; transform: translateY(0); }


/* ---------- gravity ---------- */
#dc-gravity { background: var(--lavender); padding: clamp(80px, 9vw, 130px) 0 clamp(80px, 10vw, 150px); overflow: hidden; }
#dc-gravity .dc-wrap { padding: 0 clamp(20px, 4.4vw, 64px); }
/* sized at its RESTING size and scaled up on entry — transform only, so the
   browser never re-lays-out the headline mid-animation (font-size did, and
   that was the choppiness) */
#dc-lead {
  font-family: 'GC Grind', sans-serif; text-transform: uppercase; color: var(--indigo);
  line-height: .92; white-space: nowrap; font-size: clamp(28px, 7.8vw, 112px);
  transform-origin: left center; will-change: transform;
  opacity: 0; transform: translateY(34px) scale(1.214);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
#dc-lead.dc-in { opacity: 1; transform: translateY(0) scale(1.214); }
#dc-lead.dc-in.dc-small { transform: translateY(0) scale(1); }
#dc-tail { display: flex; align-items: baseline; gap: clamp(10px, 1.5vw, 22px); margin-top: 16px; opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
#dc-tail.dc-in { opacity: 1; transform: translateY(0); }
#dc-tail .a { font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: clamp(34px, 9.6vw, 138px); line-height: .92; color: var(--indigo); }
#dc-tail .b { font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: clamp(38px, 10.4vw, 150px); line-height: .92; color: var(--orange); font-style: italic; }
#dc-desc { max-width: 660px; margin: 60px 0 0 0; font-size: clamp(15px, 1.32vw, 19px); line-height: 1.78; color: rgba(41,2,102,.78); font-weight: 300; }
#dc-desc b { color: var(--orange); font-weight: 500; }
#dc-reader { position: absolute; right: clamp(0px, 6vw, 90px); bottom: 0; height: clamp(230px, 30vw, 430px); width: auto; z-index: 2; }

/* ---------- 72 hours ---------- */
#dc-72 { height: clamp(560px, 62vw, 900px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#dc-cookie { position: absolute; width: clamp(300px, 45vw, 640px); height: auto; filter: drop-shadow(0 40px 90px rgba(0,0,0,.7)); will-change: transform; }
#dc-72 .dc-stack { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
#dc-72 .s1 { font-size: clamp(26px, 4vw, 58px); line-height: 1; margin-bottom: clamp(10px, 1.8vw, 26px); text-shadow: 0 4px 34px rgba(30,1,42,.95); }
#dc-72 .s2 { font-size: clamp(56px, 10.6vw, 152px); line-height: .86; text-shadow: 0 6px 44px rgba(30,1,42,1); }
#dc-72 .s3 { font-size: clamp(26px, 4vw, 58px); line-height: 1; margin-top: clamp(8px, 1.4vw, 20px); text-shadow: 0 4px 34px rgba(30,1,42,.95); }

/* ---------- depth ---------- */
#dc-depth { padding: clamp(70px, 8vw, 110px) 0 clamp(80px, 9vw, 130px); }
#dc-depth .dc-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
#dc-depth .d1 { font-size: clamp(28px, 4.3vw, 62px); line-height: 1; }
#dc-depth .d2 { display: flex; align-items: baseline; gap: clamp(8px, 1.1vw, 16px); margin-top: 4px; flex-wrap: wrap; justify-content: center; }
#dc-depth .d2 span { font-size: clamp(36px, 5.8vw, 84px); line-height: 1; }
#dc-depth img { margin-top: clamp(28px, 3.2vw, 44px); height: clamp(230px, 27vw, 380px); width: auto; }
#dc-depth p { max-width: 860px; margin: clamp(28px, 3.2vw, 44px) 0 0; font-size: clamp(15px, 1.53vw, 22px); line-height: 1.62; color: rgba(253,249,255,.84); font-weight: 300; }

/* ---------- seekers ---------- */
#dc-seekers { overflow: hidden; padding-top: clamp(70px, 7.6vw, 110px); }
#dc-seekers .dc-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
#dc-seekers .h1 { font-size: clamp(32px, 6.4vw, 92px); line-height: .96; }
#dc-seekers .h2 { display: flex; align-items: baseline; gap: clamp(10px, 1.5vw, 22px); flex-wrap: wrap; justify-content: center; }
#dc-seekers .h2 span { font-size: clamp(38px, 7.6vw, 110px); line-height: .96; }
#dc-seekers p { max-width: 840px; margin: clamp(22px, 2.8vw, 40px) auto 0; font-size: clamp(14px, 1.32vw, 19px); line-height: 1.72; color: rgba(253,249,255,.86); font-weight: 300; }
#dc-seekers p + p { margin-top: clamp(14px, 1.7vw, 24px); }
#dc-crowd { position: relative; margin-top: clamp(30px, 4vw, 56px); display: flex; align-items: flex-end; justify-content: flex-start; padding-left: clamp(0px, 2.8vw, 40px); }
#dc-crowd img { width: auto; opacity: 0; will-change: transform, opacity; transform: translateY(150px); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
#dc-crowd img.dc-in { opacity: 1; transform: translateY(0); }
#dc-crowd .f1 { height: clamp(143px, 20vw, 290px); z-index: 4; }
#dc-crowd .f2 { height: clamp(132px, 18.8vw, 267px); margin-left: clamp(-30px, -3.8vw, -54px); z-index: 2; }
#dc-crowd .f3 { height: clamp(196px, 27.5vw, 396px); margin-left: clamp(-36px, -4.6vw, -66px); z-index: 5; }
#dc-crowd .f4 { height: clamp(138px, 19.5vw, 279px); margin-left: clamp(-32px, -4vw, -58px); z-index: 3; }
#dc-onebite { position: absolute; right: clamp(0px, 7.6vw, 110px); bottom: clamp(40px, 15vw, 220px); display: flex; flex-direction: column; align-items: flex-end; z-index: 3; }
#dc-onebite .o1, #dc-onebite .o3 { font-size: clamp(24px, 3.5vw, 50px); line-height: 1.04; }
#dc-onebite .o2 { font-size: clamp(30px, 4.3vw, 62px); line-height: 1.02; color: var(--orange); }

/* ---------- wave accent: rests in a corner of the light slides ---------- */
.dc-wave {
  position: absolute; width: clamp(280px, 38vw, 620px); height: auto;
  opacity: .8; pointer-events: none; user-select: none; z-index: 1;
}
#dc-gravity { position: relative; overflow: hidden; }
#dc-gravity .dc-wrap { position: relative; z-index: 2; }
/* The original artwork, placed to Alaa's tuning. His px values were derived
   at 1440 wide; expressed as percentages of the image's own box they hold at
   every width instead of drifting. */
#dc-gravity .dc-wave { top: auto; bottom: 0; left: 0; right: auto;
  width: 100%; height: auto; max-width: none; z-index: 0; display: block;
  transform: scaleX(-1); }
#dc-gravity .dc-wave img { width: 100%; height: auto; display: block; }
/* the tuned desktop placement — scoped, or it pushes the ribbon off the
   right edge on a phone, which reads as a crop */
@media (min-width: 901px) {
  #dc-gravity .dc-wave img { width: 85%; transform: translate(-41.4%, 2.8%); }
  /* English only: 10px higher. Percentage, not px, so it scales with width. */
  body:not(.dc-ar) #dc-gravity .dc-wave img { transform: translate(-41.4%, 1.35%); }
}
/* purpose-made for this banner — placed at full width, no crop, no rotation */
#dc-pack .dc-wave { left: 0; right: auto; bottom: 0; top: auto;
  width: 100%; height: auto; transform: none; opacity: 1; z-index: 2; }
/* mirrored on the Arabic page so it stays out of the copy's way */
/* Arabic drops the horizontal flip ONLY (the image keeps the same translate).
   Flipping the wrapper and negating the translate together cancels out and
   renders identically — that mistake cost several rounds. */
.dc-ar #dc-gravity .dc-wave { transform: none; }
/* The pack wave does NOT mirror: the photo underneath it puts the product on
   the right in both languages, and the copy sits left in both, so the Arabic
   composition is identical to the English one. Gravity above DOES mirror,
   because nothing in that slide is orientation-locked. */

/* ---------- pack ---------- */
/* The section takes the WAVE banner's exact ratio (3584:1234), so the wave
   sits at full width with nothing cropped and reaches both edges. The photo
   underneath is `cover`, so it absorbs the difference by trimming top and
   bottom, where it has margin to spare. */
#dc-pack { position: relative; aspect-ratio: 3584 / 1234; height: auto; overflow: hidden; }
/* right-anchored: the box and cookies live in the right 40% of the frame, so
   cropping must always eat the empty lavender on the LEFT, never the product */
#dc-pack img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 100% 50%; will-change: transform; }
/* the new banner is light, so this is a lavender wash for legibility rather
   than the old dark scrim — the slide now reads light between two dark ones */
#dc-pack .scrim { display: none; }
#dc-pack .dc-copy > * { opacity: 0; transform: translateY(26px); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
#dc-pack .dc-copy.dc-in > *:nth-child(1) { transition-delay: 0ms; }
#dc-pack .dc-copy.dc-in > *:nth-child(2) { transition-delay: 140ms; }
#dc-pack .dc-copy.dc-in > *:nth-child(3) { transition-delay: 280ms; }
#dc-pack .dc-copy.dc-in > *:nth-child(4) { transition-delay: 460ms; }
#dc-pack .dc-copy.dc-in > * { opacity: 1; transform: translateY(0); }
#dc-pack .dc-copy { position: absolute; left: clamp(24px, 6.6vw, 96px); top: 44%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; max-width: 460px; }
#dc-pack .p1 { font-size: clamp(26px, 3.8vw, 54px); line-height: 1.04; color: var(--indigo); }
#dc-pack .p2 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.04; color: var(--orange); margin-top: 6px; }

.dc-btn { margin-top: clamp(24px, 2.8vw, 40px); display: inline-flex; align-items: center; gap: 14px; padding: clamp(14px, 1.4vw, 20px) clamp(28px, 3.2vw, 46px); border-radius: 999px; background: var(--orange); transition: transform .25s ease; }
.dc-btn span { font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 23px); color: var(--midnight); }
.dc-btn:hover { transform: translateY(-2px); }

/* ---------- close ---------- */
#dc-close { position: relative; overflow: hidden; padding-top: clamp(40px, 5vw, 74px); }
/* tall enough to hold the ghost mark outright — it used to overflow the
   wrap and get cut by #dc-close's overflow:hidden */
.dc-slogan-wrap { position: relative; display: flex; align-items: center;
  justify-content: center; min-height: clamp(150px, 17vw, 230px); }
/* the mark sits concentric with the lockup, both axes */
#dc-ghost { position: absolute; left: 50%; top: 50%; width: min(330px, 46vw); transform: translate(-50%, -50%); opacity: .09; z-index: 1; }
/* sized and set exactly like the hero lockup — one line, same scale */
#dc-slogan { position: relative; z-index: 3; display: flex; align-items: baseline;
  justify-content: center; gap: 18px; }
#dc-slogan .a { font-size: clamp(30px, 4.3vw, 62px); line-height: .9; color: var(--lavender); }
#dc-slogan .b { font-size: clamp(38px, 5.6vw, 80px); line-height: .9; color: var(--orange); }
#dc-foot { position: relative; z-index: 3; margin-top: clamp(28px, 4vw, 56px); padding: 0 var(--pad) 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
#dc-foot img { height: 26px; width: auto; }
#dc-foot nav { display: flex; gap: clamp(20px, 2.8vw, 40px); align-items: center; }
#dc-foot nav a { font-family: 'GC Grind', sans-serif; text-transform: uppercase; font-size: clamp(15px, 1.32vw, 19px); color: var(--white); }
#dc-foot nav a:hover { color: var(--orange); }
#dc-social { display: flex; gap: 18px; align-items: center; }
#dc-social a { opacity: .8; }
#dc-social a:hover { opacity: 1; }
#dc-copy { position: relative; z-index: 3; padding: 0 var(--pad) 26px; color: rgba(253,249,255,.5); font-size: 11px; text-align: center; }

@media (max-width: 900px) {
  #dc-runway { height: 300vh; }

  /* phone: wordmark centred and present from the first frame */
  #dc-hdr { height: 64px; }
  /* the two controls split to opposite edges so the logo sits centred and
     unpressured. inset-inline-start, so Arabic mirrors it for free. The
     transform here is safe — the fixed-position player is not inside it. */
  #dc-hdr .dc-visit { position: absolute; inset-inline-start: var(--pad); top: 50%; transform: translateY(-50%); }
  .dc-visit { height: 36px; padding: 0 14px; font-size: 13px; letter-spacing: .04em; }
  .dc-lang { width: 32px; height: 32px; font-size: 11px; }
  .dc-lang.dc-lang-ar { font-size: 15px; }
  /* English swaps the pair: Visit Shop to the right, language to the left.
     Arabic keeps the original arrangement — the header runs LTR in both, so
     inset-inline-start would not have flipped this on its own. */
  body:not(.dc-ar) #dc-hdr .dc-visit { position: static; transform: none; }
  body:not(.dc-ar) #dc-hdr .dc-lang { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); }
  /* the count stacks over its label on a narrow screen */
  #dc-meter .dc-row { flex-direction: column; align-items: center; gap: 4px; }
  #dc-hdr .dc-logo { opacity: 1; transform: none; }
  #dc-hdr img { height: 28px; }

  /* the hero lockup reads as a stacked heading on a phone */
  #dc-hero-foot { bottom: calc(26px + env(safe-area-inset-bottom)); gap: 10px; }
  #dc-lockup { flex-direction: row; align-items: baseline; gap: 9px; }
  #dc-lockup .a { font-size: 21px; }
  #dc-lockup .b { font-size: 26px; }

  /* player moves off the bar and floats clear of the centred copyright */
  #dc-player { position: fixed; left: 16px; bottom: 18px; z-index: 60; }
  #dc-shop { right: 16px; bottom: 18px; width: 78px; height: 78px; }
  #dc-shop .dc-ring text { font-size: 12px; letter-spacing: .12em; }
  /* it lives inside the crowd row, so it has to be told to drop below it */
  #dc-crowd { flex-wrap: wrap; }
  #dc-onebite { position: static; order: -1; width: 100%; align-items: center; margin: 0 auto 26px; }
  /* the clamp minimums were driving the figures wider than a phone */
  #dc-crowd { justify-content: center; padding-left: 0; }
  #dc-crowd .f1 { height: 113px; margin-left: 0; }
  #dc-crowd .f2 { height: 102px; margin-left: -18px; }
  #dc-crowd .f3 { height: 151px; margin-left: -21px; }
  #dc-crowd .f4 { height: 107px; margin-left: -20px; }
  #dc-reader { position: static; margin: 28px auto 0; }
  /* portrait: sizing by height stretched the ribbon into a tall strip that
     got cropped. Width-sized instead, so it lies across the slide behind
     the figure with the whole shape visible. */
  #dc-gravity .dc-wave { left: 0; right: auto; bottom: auto; top: 62%;
    width: 100%; height: auto; transform: translateY(-50%) scaleX(-1); }
  /* scaled past the section so the ribbon bleeds off both edges rather than
     sitting inside them with margins */
  #dc-gravity .dc-wave img { width: 136%; max-width: none; transform: translateX(-13%); }
  /* .dc-ar #dc-gravity .dc-wave sits outside any media query and out-specifies
     the rule above, which was wiping the vertical centring here too */
  .dc-ar #dc-gravity .dc-wave { transform: translateY(-50%); }
  /* under direction:rtl an over-wide block overflows LEFT, so the image starts
     135px out before any transform — the offset has to push the other way */
  .dc-ar #dc-gravity .dc-wave img { transform: translateX(13%); }

  /* portrait layout: copy centred at the top, product filling the frame,
     button pinned to the bottom — the banner is its own portrait crop */
  #dc-pack { aspect-ratio: 1170 / 1560; height: auto; display: block; background: var(--lavender); }
  #dc-pack img:not(.dc-wave) { position: absolute; inset: 0; width: 100%; height: 100%; top: 0;
                 object-fit: cover; object-position: 50% 50%; transform: none !important; }
  #dc-pack .scrim { display: none; }
  #dc-pack .dc-wave { display: none; }   /* baked into the mobile banner */
  /* full-height flex: text groups at the top, the button is pushed to the foot */
  #dc-pack .dc-copy { position: absolute; inset: 0; transform: none; max-width: none;
                      padding: 7% var(--pad) 8%; display: flex; flex-direction: column;
                      align-items: center; text-align: center; }
  #dc-pack .dc-copy .dc-btn { margin-top: auto; }
  #dc-pack .p1 { font-size: clamp(24px, 7.4vw, 40px); }
  #dc-pack .p2 { font-size: clamp(34px, 10.4vw, 56px); }
  #dc-foot { flex-direction: column; text-align: center; }
  /* 32px was under the 44px a fingertip needs, and touch-action kills the
     double-tap delay that made a single press feel ignored */
  #dc-player { padding: 7px 16px 7px 7px; gap: 10px; touch-action: manipulation; }
  #dc-player .dc-pp { width: 44px; height: 44px; }
  #dc-player .dc-pp svg { width: 15px; height: 17px; }
  #dc-player .dc-lbl { display: none; }
  #dc-meter .dc-row { gap: 4px; }
}


/* ---------- contact ---------- */
/* Its own ground rather than riding on #dc-close: the form needs contrast the
   closing slogan does not. */
/* the fixed header would otherwise sit on top of the heading after a jump */
#contact { background: var(--midnight); padding: clamp(70px, 8vw, 120px) 0 clamp(50px, 6vw, 90px);
  scroll-margin-top: 86px; }
#contact .dc-wrap { max-width: 880px; }
.dc-ct-h { font-size: clamp(34px, 5vw, 72px); line-height: .9; color: var(--white); }
.dc-ct-sub { margin-top: 14px; font-size: clamp(15px, 1.4vw, 19px); color: rgba(253,249,255,.6); }
.dc-ct-form { margin-top: clamp(30px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 28px; }
/* the fields live in this wrapper, so the form's own gap never reached between
   them — the labels were landing on the field above */
#dc-fields { display: flex; flex-direction: column; gap: 28px; }
.dc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dc-f { display: flex; flex-direction: column; gap: 11px; }
.dc-f > span:first-child { font-family: 'GC Grind', sans-serif; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.25; letter-spacing: .06em;
  color: rgba(253,249,255,.62); }
.dc-f input, .dc-f select, .dc-f textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; color: var(--white);
  background: rgba(253,249,255,.05); border: 1px solid rgba(253,249,255,.18);
  font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.45;
  transition: border-color .25s ease, background .25s ease;
}
.dc-f textarea { resize: vertical; min-height: 130px; }
.dc-f input:focus, .dc-f select:focus, .dc-f textarea:focus {
  outline: none; border-color: var(--orange); background: rgba(253,249,255,.08);
}
.dc-f input::placeholder, .dc-f textarea::placeholder { color: rgba(253,249,255,.3); }
/* the native arrow is invisible on this ground in every browser */
.dc-f select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23E16036' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-inline-end: 42px;
}
.dc-f select option { background: var(--midnight); color: var(--white); }
.dc-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }

.dc-ct-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.dc-ct-form .dc-btn { margin-top: 0; padding: 14px 38px; border: 0; cursor: pointer; font: inherit; }
.dc-ct-form .dc-btn span { font-size: clamp(15px, 1.4vw, 19px); }
.dc-ct-form .dc-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.dc-btn-ghost { background: transparent; border: 1px solid rgba(253,249,255,.3); }
.dc-btn-ghost span { color: var(--white); }
.dc-ct-note { font-size: 15px; color: rgba(253,249,255,.6); margin: 0; }
.dc-ct-note.dc-ok { color: var(--orange); }
.dc-ct-note.dc-err { color: #FF8B6B; }

#dc-track { padding: 18px 20px; border-radius: 14px; background: rgba(225,96,54,.08);
  border: 1px solid rgba(225,96,54,.3); }
#dc-track p { margin: 0 0 14px; font-size: clamp(15px, 1.4vw, 18px); color: var(--white); }
.dc-track-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-track-btns .dc-btn { margin-top: 0; padding: 11px 26px; }
.dc-track-btns .dc-btn span { font-size: 15px; }

@media (max-width: 720px) {
  .dc-f-row { grid-template-columns: 1fr; }
  /* the music pill and the cookie badge are FIXED to the bottom corners, so a
     short button can end up sitting under one of them with nothing tappable
     left. Full width keeps the middle clear of both. */
  .dc-ct-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .dc-ct-form .dc-btn { width: 100%; justify-content: center; }
  .dc-ct-note { text-align: center; }
  .dc-track-btns .dc-btn { flex: 1 1 auto; justify-content: center; }
}

/* the contact section standing on its own page: clear the fixed header and
   hold the viewport so the footer does not ride up under a short form */
.dc-contact-page #contact { min-height: calc(100svh - 120px);
  padding-top: calc(76px + clamp(40px, 5vw, 80px)); display: flex; align-items: center; }
.dc-contact-page #contact .dc-wrap { width: 100%; }
@media (max-width: 900px) {
  .dc-contact-page #contact { padding-top: calc(64px + clamp(30px, 5vw, 60px)); min-height: 0; display: block; }
}

/* ---------- phone field ---------- */
/* the code and the number are one control visually, two inputs underneath */
.dc-phone { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 10px; }
.dc-phone select { direction: ltr; text-align: left; }
.dc-phone input { direction: ltr; text-align: left; }
.dc-ar .dc-phone input::placeholder { text-align: left; }
@media (max-width: 560px) {
  /* narrow: keep them side by side and let the select ellipsize its country
     name — stacking loses the "code then number" reading the field relies on */
  .dc-phone { grid-template-columns: 122px 1fr; gap: 8px; }
  .dc-phone select { padding-inline: 12px 26px; background-position: right 8px center; }
}

/* ---------- back to home ---------- */
.dc-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 9px 16px 9px 12px; border-radius: 999px; color: var(--lavender);
  border: 1px solid rgba(253,249,255,.22); background: rgba(253,249,255,.04);
  transition: border-color .25s ease, color .25s ease, background .25s ease; }
.dc-back span { font-family: 'GC Grind', sans-serif; text-transform: uppercase;
  font-size: 13px; letter-spacing: .05em; }
.dc-back:hover { color: var(--orange); border-color: var(--orange); background: rgba(225,96,54,.08); }

/* the phone controls are plain text fields, not display type */
.dc-phone, .dc-phone select, .dc-phone input {
  font-family: 'Poppins', system-ui, sans-serif; text-transform: none; letter-spacing: normal;
}

/* ---------- plain text pages (privacy, terms) ---------- */
.dc-prose-sec { background: var(--midnight); padding: calc(76px + clamp(40px, 5vw, 80px)) 0 clamp(60px, 7vw, 110px); }
.dc-prose-sec .dc-wrap { max-width: 820px; }
.dc-prose-h { font-size: clamp(32px, 4.4vw, 62px); line-height: .95; color: var(--white); margin: 0 0 clamp(24px, 3vw, 40px); }
.dc-prose { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.75; color: rgba(253,249,255,.78); }
.dc-prose h2 { font-family: 'GC Grind', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(17px, 1.7vw, 22px); color: var(--orange); margin: clamp(32px, 3.4vw, 48px) 0 12px; }
.dc-prose p { margin: 0 0 16px; }
.dc-prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.dc-prose li { margin-bottom: 8px; }
.dc-prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.dc-prose strong { color: var(--white); font-weight: 600; }
.dc-prose .dc-updated { font-size: 14px; color: rgba(253,249,255,.45); }
@media (max-width: 900px) { .dc-prose-sec { padding-top: calc(64px + clamp(28px, 5vw, 56px)); } }