*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--c-bg); }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased;
}
/* ===== Page entrance / exit transition (app-like feel) =====
   Opacity-only (never transform on body — it would break position:fixed). */
body { animation: pageIn .4s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } }
/* Keep the entrance fade disabled both DURING and AFTER the intro — otherwise
   removing .intro-on flips body animation none→pageIn and re-triggers it (a blink). */
html.intro-on body, html.intro-done body { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.is-exiting { transition: none; } }

/* ===== Scroll progress bar ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--c-green-deep), var(--c-green));
  pointer-events: none; transition: width .1s linear;
}

/* ===== Branded intro curtain (first visit / session) ===== */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: flex; position: fixed; inset: 0; z-index: 99999;
  align-items: center; justify-content: center;
}
/* Two halves form one seamless textured curtain (şəbəkə over a green radial),
   then split apart — top up, bottom down — to reveal the page from the centre. */
.intro__half {
  position: absolute; left: 0; width: 100%; height: 50.1vh; z-index: 0; overflow: hidden;
  background: radial-gradient(135% 120% at 50% 32vh, #4d5745 0%, var(--c-green) 58%, var(--c-green-deep) 120%);
  background-size: 100vw 100vh;
  will-change: transform;
  transition: transform .95s var(--ease-out) .1s;
}
/* faint şəbəkə texture, viewport-anchored so the two halves stay seamless */
.intro__half::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/carpet-buta.svg") repeat; background-size: 64px 64px; opacity: .12;
}
.intro__half--top    { top: 0;    background-position: center top; }
.intro__half--top::before    { background-position: left top; }
.intro__half--bottom { bottom: 0; background-position: center -50vh; }
.intro__half--bottom::before { background-position: left -50vh; }
.intro.is-leaving .intro__half--top    { transform: translateY(-100%); }
.intro.is-leaving .intro__half--bottom { transform: translateY(100%); }
/* soft ivory spotlight glowing behind the logo */
html.intro-on .intro::after {
  content: ""; position: absolute; left: 50%; top: 42%; z-index: 1; pointer-events: none;
  width: 92vmin; height: 92vmin; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(239, 238, 226, .2), rgba(239, 238, 226, 0) 62%);
  transition: opacity .5s var(--ease-out);
}
.intro.is-leaving::after { opacity: 0; }
.intro__inner { position: relative; z-index: 2; transition: opacity .45s var(--ease-out); }
.intro.is-leaving .intro__inner { opacity: 0; }
.intro__logo {
  width: min(62vw, 340px); height: auto; color: var(--c-sage);
  opacity: 0; transform: scale(.9); animation: introLogo 1.1s var(--ease-out) .15s forwards;
}
@keyframes introLogo { to { opacity: 1; transform: none; } }

/* Subtle paper grain over the whole page — warmth + premium editorial texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* Flowing dune/wave section divider */
.wave { position: absolute; top: 0; left: 0; width: 100%; height: 56px; display: block; z-index: 1; }
.wave--bottom { top: auto; bottom: 0; transform: scaleY(-1); }
@media (max-width: 700px) { .wave { height: 36px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Consistent rounded corners on ALL visible content imagery (hero stays full-bleed) */
main img:not(.hero__img),
.lightbox img { border-radius: var(--radius-img); }

/* ===== Keyboard focus — visible brand ring (only for keyboard, not mouse) ===== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-green); outline-offset: 3px; border-radius: 3px;
}
/* On dark / over-imagery contexts the green ring would vanish — switch to ivory */
.hero :focus-visible,
.site-header--overlay :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-sage); }

/* ===== Skip link — appears on Tab, jumps to main content ===== */
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--c-green); color: var(--c-sage);
  padding: 12px 22px; border-radius: 8px;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; box-shadow: var(--shadow-soft);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }
[id="main"] { scroll-margin-top: 90px; }
[id="main"]:focus { outline: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); color: var(--c-ink-deep); }
h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--c-green); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-3); }
.section { padding-block: var(--sp-6); }
.label { display: flex; align-items: center; gap: 12px; font-size: .75rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-green); }
.label::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }

/* Dark full-bleed section variant */
.section--dark {
  background: radial-gradient(135% 115% at 50% -8%, #4a5442 0%, var(--c-green) 52%, var(--c-green-deep) 120%);
  color: var(--c-cream);
}
/* Wave divider colour = the (cream) section flowing in; lift content above it */
.section--dark > .wave, .cta-band > .wave { color: var(--c-bg); }
.section--dark > .container, .cta-band > .container { position: relative; z-index: 2; }

/* Marquee as a wavy green ribbon between cream sections */
.marquee { position: relative; }
.marquee > .wave { color: var(--c-bg); height: 26px; z-index: 1; }
.marquee .marquee__track { position: relative; z-index: 2; }
@media (max-width: 700px) { .marquee > .wave { height: 18px; } }
.section--dark h2, .section--dark h3 { color: var(--c-sage); }
.section--dark h2 em { color: var(--c-cream); }
.section--dark .label { color: var(--c-sage); }

/* Brand scrollbar (page) */
html { scrollbar-color: var(--c-green) var(--c-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-green); border-radius: 6px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c-green-deep); }

/* Horizontal strips scroll by wheel/swipe/drag — no visible scrollbar
   (also avoids the macOS overlay-vs-custom scrollbar flicker on mouse-out) */
.lent, .menyu-nav__scroll { scrollbar-width: none; }
.lent::-webkit-scrollbar, .menyu-nav__scroll::-webkit-scrollbar { display: none; }

/* Reveal-on-scroll (JS adds .is-visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Image reveal: wipes in from the left with a clip */
.reveal-img { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.reveal-img.is-visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-img { clip-path: none; transition: none; }
}
/* Honeypot */
.hp-field { position: absolute; left: -9999px; }

/* [hidden] must always win over component display rules (e.g. gallery filter) */
[hidden] { display: none !important; }