/* Qazwan Kurdish Coffee — dark coffee, antique gold, warm cream */
:root {
  --ink: #2b1a12;
  --bean: #1d130d;
  --earth: #3a2618;
  --gold: #c8a25a;
  --gold-soft: #e2c88e;
  --cream: #f1e7d6;
  --paper: #ece0cb;
  --text: #f4ecdf;
  --muted: rgba(244, 236, 223, .62);
  --serif-en: "Playfair Display", "Times New Roman", serif;
  --sans-en: "Manrope", system-ui, sans-serif;
  --serif-ku: "Amiri", "Noto Naskh Arabic", serif;
  --sans-ku: "Vazirmatn", "Amiri", system-ui, sans-serif;
  --serif: var(--serif-ku);
  --sans: var(--sans-ku);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html[lang="en"] { --serif: var(--serif-en); --sans: var(--sans-en); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* small gold cursor dot (mouse only) */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 95; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--gold); mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s;
}
.cursor.on { opacity: .9; }
.cursor.big { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: transparent; border: 1px solid var(--gold); mix-blend-mode: normal; }
@media (hover: none) { .cursor { display: none; } }

/* header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 48px);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.mark { display: flex; align-items: center; gap: 12px; }
/* Qazwan logo emblem (symbol #qz-emblem in index.html): sand teardrop, dark berry branch */
.logo, .emblem { --logo-sand: #dcbf98; --logo-ink: #2e1a1a; }
.logo { width: 26px; height: 29px; flex: none; }
.logo.big { width: 40px; height: 45px; }
.lg-shape { fill: var(--logo-sand); transition: fill .5s var(--ease); }
.lg-line { fill: none; stroke: var(--logo-ink); stroke-width: 1.4; opacity: .55; }
.lg-ink { fill: none; stroke: var(--logo-ink); stroke-width: 3.2; stroke-linecap: round; }
.lg-berry { fill: var(--logo-sand); stroke: var(--logo-ink); stroke-width: 3; transition: fill .5s var(--ease); }
.mark-text { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.ku-word { font-family: var(--serif-ku); font-size: 18px; color: var(--gold-soft); }
.en-word { font-family: var(--serif-en); font-size: 11px; letter-spacing: .42em; color: var(--muted); }
.lang {
  font-family: var(--sans-ku); font-size: 13px; letter-spacing: .08em;
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center; line-height: 1;
  border: 1px solid rgba(200, 162, 90, .45); border-radius: 50%; color: var(--gold-soft);
  transition: background .4s var(--ease), color .4s var(--ease);
}
html[lang="en"] .lang { font-family: var(--sans-en); letter-spacing: .12em; text-indent: .12em; }
/* language menu: the other two languages drop down under the circle */
.lang-wrap { position: relative; }
.lang-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; display: grid; gap: 10px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.lang-wrap.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-opt { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans-ku); font-size: 13px; line-height: 1; color: var(--gold-soft); background: var(--ink); border: 1px solid rgba(200, 162, 90, .45); transition: background .3s var(--ease), color .3s var(--ease); }
.lang-opt[lang="en"] { font-family: var(--sans-en); letter-spacing: .12em; text-indent: .12em; }
.lang-opt:hover { background: var(--gold); color: var(--ink); }
.lang:hover { background: var(--gold); color: var(--ink); }
.top .ku-word, .top .en-word, .lang { transition: color .5s var(--ease), stroke .5s var(--ease), border-color .5s var(--ease), background .4s var(--ease); }

/* intro */
.intro {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: 120px 16px 140px;
  background: var(--ink);
}
.intro-inner { max-width: 94vw; }
.emblem { width: 84px; height: 94px; margin: 0 auto 36px; overflow: visible; }
.emblem .draw { fill: none; stroke: var(--logo-sand); stroke-width: 1.2; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 2.2s var(--ease) .3s forwards; }
.emblem-fill { opacity: 0; animation: emblemIn 1.4s var(--ease) 1.6s forwards; }
@keyframes emblemIn { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.kicker {
  font-family: var(--sans); font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 22px; opacity: 0; animation: rise 1.2s var(--ease) 1.4s forwards;
}
html[dir="rtl"] .kicker { letter-spacing: .04em; font-size: 15px; }
.kicker.dark { color: var(--gold); opacity: 1; animation: none; }
.intro-title {
  font-family: var(--serif); font-weight: 300; font-size: min(3.9vw, 66px); line-height: 1.15; letter-spacing: -.01em; white-space: nowrap;
  opacity: 0; animation: rise 1.4s var(--ease) 1.6s forwards;
}
html[dir="rtl"] .intro-title { font-weight: 400; line-height: 1.45; font-size: min(5.6vw, 76px); }
/* phones: too narrow for one line at a readable size, so the title wraps */
@media (max-width: 600px) { .intro-title { white-space: normal; font-size: 34px; text-wrap: balance; } html[dir="rtl"] .intro-title { font-size: 32px; } }
.tagline { margin-top: 26px; color: var(--muted); font-size: clamp(14px, 1.6vw, 17px); opacity: 0; animation: rise 1.4s var(--ease) 1.9s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue i { width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* loading counter is hidden: it sat under the WhatsApp button (the film still loads in the background) */
.loader { display: none; }
.loader b { color: var(--gold); font-weight: 400; }
.loader.done { opacity: 0; }

/* film */
.film { position: relative; height: 1450vh; }
/* soft edge: the brown intro melts into the top of the film as it scrolls in (scrolls away once the film is pinned) */
.film::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: calc(26vh + 3px); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(43,26,18,.85) 22%, rgba(43,26,18,.45) 55%, rgba(43,26,18,0) 100%); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq { background: #1d130d url("../media/film-poster.jpg") center / cover no-repeat; }
.still { opacity: 0; will-change: opacity; }
.still img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.still .clip { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,9,6,.55) 0%, rgba(15,9,6,0) 22%, rgba(15,9,6,0) 52%, rgba(15,9,6,.86) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(15,9,6,.6) 100%);
}

.caps { position: absolute; inset: 0; pointer-events: none; }
.cap {
  position: absolute; bottom: clamp(70px, 12vh, 130px); inset-inline-start: clamp(16px, 6vw, 96px);
  max-width: min(640px, calc(100vw - 32px)); opacity: 0;
}
.cap .num { font-family: var(--serif-en); font-weight: 300; font-style: italic; font-size: clamp(16px, 1.6vw, 20px); color: var(--gold); letter-spacing: .1em; display: flex; align-items: center; gap: 14px; }
.cap .num::after { content: ""; width: 56px; height: 1px; background: var(--gold); opacity: .7; }
.cap h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(46px, 8vw, 116px); line-height: 1; margin: 14px 0 18px; letter-spacing: -.015em; }
html[dir="rtl"] .cap h2 { font-weight: 500; line-height: 1.3; font-size: clamp(40px, 6.6vw, 92px); margin: 10px 0 12px; }
.cap p { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.7; color: rgba(244,236,223,.86); max-width: 520px; }
.cap h2 .ch { display: inline-block; opacity: 0; transform: translateY(.35em); }

.rail { position: absolute; top: 50%; inset-inline-end: clamp(14px, 3vw, 40px); transform: translateY(-50%); height: 46vh; display: flex; }
.rail-line { position: absolute; inset: 0 auto 0 50%; width: 1px; background: rgba(200,162,90,.22); }
.rail-fill { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(0); }
.rail-dots { list-style: none; display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; }
.rail-dots li { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); background: var(--ink); pointer-events: auto; cursor: pointer; transition: background .4s, transform .4s var(--ease); }
.rail-dots li.on { background: var(--gold); transform: scale(1.25); }
.counter { position: absolute; top: 96px; inset-inline-end: clamp(16px, 4vw, 48px); font-family: var(--serif-en); font-size: 15px; letter-spacing: .14em; color: var(--muted); display: flex; gap: 8px; direction: ltr; }
.counter b { color: var(--gold); font-weight: 400; }

/* story */
.story { position: relative; background: var(--ink); color: var(--paper); padding: clamp(90px, 14vw, 180px) clamp(16px, 6vw, 96px); overflow: hidden; }
.story-head { max-width: 900px; margin: 0 auto clamp(56px, 8vw, 100px); text-align: center; }
.story-title { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7vw, 96px); line-height: 1.05; color: var(--paper); }
html[dir="rtl"] .story-title { font-weight: 500; line-height: 1.4; font-size: clamp(36px, 5.6vw, 76px); }
.story-lead { margin: 26px auto 0; max-width: 620px; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.8; color: rgba(236,224,203,.7); }
.story-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1240px; margin: 0 auto; }
.story-img { aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.story-img img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.facts { list-style: none; display: grid; gap: clamp(28px, 4vw, 44px); counter-reset: f; }
.facts li { counter-increment: f; display: grid; grid-template-columns: 54px 1fr; gap: 6px 18px; padding-bottom: clamp(26px, 3.5vw, 40px); border-bottom: 1px solid rgba(200,162,90,.22); }
.facts li::before { content: counter(f, upper-roman); grid-row: span 2; font-family: var(--serif-en); font-style: italic; font-size: 26px; color: var(--gold); line-height: 1.2; }
.facts h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); color: var(--paper); }
.facts p { font-size: 16px; line-height: 1.8; color: rgba(236,224,203,.7); }

/* film end: the pour video fades into the plain brown of the How to brew section */
.film-end { opacity: 0; pointer-events: none; overflow: hidden; }
.film-end::after { content: ""; position: absolute; inset: 0; background: var(--ink); }

/* how to brew at home */
/* plain brown background; steps sit on a gold timeline */
.brew { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; overflow: hidden; background: var(--ink);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: clamp(90px, 12vw, 150px) clamp(16px, 6vw, 96px); }
.brew-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; }
.brew-text { max-width: 560px; }
.brew-kicker { font-family: var(--sans); font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
html[dir="rtl"] .brew-kicker { font-size: 15px; letter-spacing: .04em; }
.brew-title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.1; color: var(--paper); margin-bottom: 44px; }
html[dir="rtl"] .brew-title { font-weight: 400; line-height: 1.35; }
.brew-steps { list-style: none; display: grid; gap: 30px; margin: 0 0 46px; padding-inline-start: 34px; border-inline-start: 1px solid rgba(200,162,90,.55); }
.brew-steps li { position: relative; }
.brew-steps li::before { content: ""; position: absolute; inset-inline-start: -40px; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(43,26,18,.9); }
.bs-num { display: block; font-family: var(--serif-en); font-style: italic; font-size: 14px; letter-spacing: .08em; color: var(--gold); margin-bottom: 4px; }
.brew-steps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); color: var(--paper); margin-bottom: 6px; }
.brew-steps p { color: rgba(236,224,203,.72); font-size: 15px; line-height: 1.7; }
.brew-cta, .wa-float { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--gold-soft); color: var(--ink); transition: background .3s var(--ease); }
.brew-cta { padding: 15px 28px; border-radius: 999px; font-size: 15px; letter-spacing: .04em; }
.brew-cta:hover, .wa-float:hover { background: #f0dcae; }
.wa-ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
/* floating WhatsApp order button, bottom corner */
.wa-float { position: fixed; z-index: 60; bottom: clamp(16px, 3vw, 28px); inset-inline-end: clamp(16px, 3vw, 28px); width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.wa-float .wa-ic { width: 26px; height: 26px; }
.wa-tip { position: absolute; inset-inline-end: calc(100% + 12px); white-space: nowrap; background: var(--ink); color: var(--gold-soft); border: 1px solid rgba(200,162,90,.35); padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .3s, transform .3s; }
html[dir="rtl"] .wa-tip { transform: translateX(-6px); }
.wa-float:hover .wa-tip { opacity: 1; transform: none; }
@media (max-width: 860px) {
  /* phones: the photo stays behind, evenly darkened so the text reads everywhere */
  .wa-tip { display: none; }
}

/* footer */
.foot { background: var(--ink); padding: clamp(80px, 10vw, 130px) clamp(16px, 6vw, 96px) 40px; text-align: center; }
.foot-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 56px; }
.foot-mark .logo.big { width: 46px; height: 52px; margin-bottom: 6px; }
.foot-ku { font-family: var(--serif-ku); font-size: 34px; color: var(--gold-soft); line-height: 1.2; }
.foot-en { font-family: var(--serif-en); font-size: 11px; letter-spacing: .36em; color: var(--muted); }
.foot-title { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 38px); margin-bottom: 40px; }
/* three equal columns: order / shop / follow */
.find { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 980px; margin: 0 auto 72px; }
.find li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; }
.find li + li { border-inline-start: 1px solid rgba(200,162,90,.22); }
.find-label { font-family: var(--sans); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
html[dir="rtl"] .find-label { font-size: 14px; letter-spacing: .02em; }
.find-main { font-family: var(--serif-en); font-size: 21px; color: var(--paper); }
a.find-main { transition: color .3s; }
a.find-main:hover { color: var(--gold-soft); }
.find-sub { font-size: 14px; color: var(--muted); }
/* bottom line: copyright, then the Easy Technology credit */
.foot-base { border-top: 1px solid rgba(200,162,90,.18); padding-top: 28px; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rights { font-size: 12px; color: rgba(244,236,223,.38); letter-spacing: .08em; }
/* Easy Technology credit: small, centred, beige, links to easykrd.com */
.made-by { display: block; width: fit-content; opacity: .8; transition: opacity .3s var(--ease); }
.made-by:hover { opacity: 1; }
.made-by img { display: block; width: 116px; height: auto; }
@media (max-width: 700px) {
  .find { grid-template-columns: 1fr; margin-bottom: 52px; }
  .find li + li { border-inline-start: 0; border-top: 1px solid rgba(200,162,90,.22); }
}

/* phones */
@media (max-width: 760px) {
  .story-body { grid-template-columns: 1fr; }
  .story-img { aspect-ratio: 4/3; }
  .rail { height: 34vh; }
  .counter { top: 84px; }
  .cap { bottom: 64px; inset-inline-end: 48px; }
  .film { height: 1260vh; }
}

@media (prefers-reduced-motion: reduce) {
  .emblem .draw, .emblem-fill { animation-duration: .01s; animation-delay: 0s; }
  .kicker, .intro-title, .tagline { animation-duration: .01s; animation-delay: 0s; }
}

/* story fits one screen on desktop: heading, three facts and the tin photo all sized to the screen height */
@media (min-width: 861px) {
  .story { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(40px, 7vh, 90px); }
  .story-head { margin-bottom: clamp(24px, 4.5vh, 56px); }
  .story-title { font-size: clamp(34px, min(5vw, 7.5vh), 76px); }
  html[dir="rtl"] .story-title { font-size: clamp(30px, min(4.4vw, 6.8vh), 64px); line-height: 1.3; }
  .story-lead { margin-top: clamp(10px, 2vh, 22px); font-size: clamp(14px, min(1.4vw, 2.2vh), 18px); line-height: 1.7; }
  .story-body { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .story-img { height: clamp(260px, 52vh, 560px); width: auto; aspect-ratio: 4/5; justify-self: center; }
  .facts { gap: clamp(12px, 2.4vh, 28px); }
  .facts li { padding-bottom: clamp(12px, 2.4vh, 26px); }
  .facts li::before { font-size: 22px; }
  .facts h3 { font-size: clamp(18px, min(1.8vw, 3vh), 24px); }
  .facts p { font-size: clamp(13px, min(1.1vw, 1.9vh), 15px); line-height: 1.65; }
}

/* phones: the fixed header gets a brown fade behind it so scrolling text never runs under the logo and
   language button; the WhatsApp button is a bit smaller and the footer leaves room for it; brew timeline off the edge */
@media (max-width: 860px) {
  .top { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 68%, rgba(43,26,18,0) 100%); padding-bottom: 26px; }
  .counter { top: 104px; }
  .wa-float { width: 50px; height: 50px; bottom: 16px; inset-inline-end: 16px; }
  .wa-float .wa-ic { width: 23px; height: 23px; }
  .foot { padding-bottom: 96px; }
  .brew { padding-inline: 24px; }
}

/* phones: the story photo shows whole (its own 3:4 shape, no crop, no scroll zoom) and smaller, centred */
@media (max-width: 860px) {
  .story-img { aspect-ratio: 3/4; width: min(62vw, 260px); margin: 0 auto; }
  .story-img img { height: 100%; transform: none !important; }
}

/* phones: the videos play by themselves, so each step needs only about one swipe (not a long scrub) */
@media (max-width: 760px) { .film { height: 880vh; } }

/* phones: real videos per step (see main.js) */
.pvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.pvid.on { opacity: 1; }
.pvid-film { background: transparent; }