/* =========================================================================
   BAKU ZOO — Bakı Zooloji Parkı. Shared design system.
   Theme: "wild nature in the heart of Baku" — leaf green, savanna sand,
   Caspian teal, flamingo coral. Light, airy, family-friendly yet premium.
   ========================================================================= */

:root {
  /* palette */
  --bg:       #fbf8f1;  /* warm cream paper */
  --bg-2:     #f3eede;  /* soft sand panel */
  --bg-card:  #ffffff;
  --ink:      #16231c;  /* deep forest near-black */
  --ink-soft: #4b5a50;
  --forest:   #1f6b4a;  /* deep leaf green */
  --forest-dp:#13492f;
  --leaf:     #3f9e6e;  /* bright leaf */
  --leaf-soft:#e4f1e7;
  --sand:     #d8b96e;  /* savanna gold */
  --sand-dp:  #b9933f;
  --teal:     #1d8a9c;  /* Caspian teal */
  --teal-dp:  #146374;
  --coral:    #ef5d83;  /* flamingo coral */
  --coral-dp: #d63e69;
  --line:     rgba(22,35,28,.12);
  --line-soft:rgba(22,35,28,.07);

  /* fonts — multilingual: Latin + Cyrillic + Hebrew */
  --f-display:"Nunito", "Heebo", system-ui, sans-serif;
  --f-body:   "Inter", "Heebo", system-ui, -apple-system, sans-serif;
  --f-accent: "Lora", Georgia, serif;

  --maxw: 1240px;
  --header-h: 80px;
  --r: 18px;        /* card radius */
  --r-lg: 28px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 18px 44px -22px rgba(20,40,30,.4);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body); color: var(--ink); background: var(--bg);
  line-height: 1.7; font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--coral); color: #fff; }
h1,h2,h3,h4 { line-height: 1.05; font-weight: 800; font-family: var(--f-display); letter-spacing: -.01em; }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.container-wide { width: min(100% - 1.6rem, 1480px); margin-inline: auto; }

/* kicker / eyebrow */
.kicker {
  font-family: var(--f-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
  display: inline-flex; align-items: center; gap: .6em;
}
.kicker::before { content: ""; width: 1.8em; height: 3px; border-radius: 3px; background: var(--coral); }
[dir="rtl"] .kicker { letter-spacing: .06em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-display); font-weight: 800; font-size: .92rem; letter-spacing: .01em;
  padding: .85em 1.6em; border-radius: 999px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 12px 26px -10px rgba(214,62,105,.6); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(214,62,105,.7); }
.btn-forest { background: var(--forest); color: #fff; box-shadow: 0 12px 26px -10px rgba(19,73,47,.5); }
.btn-forest:hover { transform: translateY(-3px); }
.btn-ghost { border: 2px solid currentColor; }
.btn-ghost:hover { transform: translateY(-3px); }
.on-dark .btn-ghost { color: #fff; }

/* =========================================================================
   HEADER  (transparent over hero → cream on scroll)
   ========================================================================= */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), backdrop-filter .4s, box-shadow .4s, height .4s;
}
.site-header::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(10,25,18,.45), transparent); transition: opacity .4s;
}
.site-header.scrolled {
  height: 66px; background: rgba(251,248,241,.9); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 6px 24px -18px rgba(20,40,30,.6); border-bottom: 1px solid var(--line-soft);
}
.site-header.scrolled::after { opacity: 0; }

.header-inner { width: min(100% - 2.4rem, 1480px); margin-inline: auto; display: flex; align-items: center; gap: 1.4rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; transition: color .4s; }
.scrolled .brand { color: var(--ink); }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--f-display); font-weight: 900; font-size: 1.18rem; letter-spacing: -.01em; }
.brand-tag { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-top: .2rem; font-weight: 700; }
[dir="rtl"] .brand-tag { letter-spacing: .05em; }

.site-nav { display: flex; align-items: center; gap: clamp(.5rem,1.3vw,1.5rem); margin-inline-start: auto; }
.site-nav a { color: rgba(255,255,255,.92); font-weight: 700; font-size: .85rem; position: relative; padding: .4rem 0; white-space: nowrap; transition: color .3s; }
.scrolled .site-nav a { color: var(--ink-soft); }
.site-nav a::after { content:""; position:absolute; inset-block-end:-3px; inset-inline-start:0; width:0; height:3px; border-radius:3px; background: var(--coral); transition: width .3s var(--ease); }
.site-nav a:hover { color:#fff; } .scrolled .site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }
.scrolled .site-nav a.active { color: var(--forest); }

/* language switcher */
.lang { position: relative; }
.lang-toggle { display:inline-flex; align-items:center; gap:.4em; color:#fff; font-family:var(--f-display); font-weight:800; font-size:.78rem; letter-spacing:.04em; padding:.5em .85em; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; transition:.3s; }
.scrolled .lang-toggle { color: var(--ink); border-color: var(--line); }
.lang-toggle:hover { background: rgba(255,255,255,.15); } .scrolled .lang-toggle:hover { background: var(--leaf-soft); border-color: var(--leaf); }
.lang-toggle svg { width: 1em; height: 1em; }
.lang-menu { position:absolute; inset-block-start:calc(100% + .5rem); inset-inline-end:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.4rem; min-width:160px; display:none; flex-direction:column; box-shadow: var(--shadow); z-index:120; }
[dir="rtl"] .lang-menu { inset-inline-end:auto; inset-inline-start:0; }
.lang-menu.open { display:flex; animation: pop .25s var(--ease); }
@keyframes pop { from { opacity:0; transform: translateY(-8px);} }
.lang-opt { text-align:start; color: var(--ink-soft); padding:.6rem .8rem; border-radius:10px; font-weight:700; font-size:.88rem; transition:.2s; }
.lang-opt:hover { background: var(--leaf-soft); color: var(--ink); }
.lang-opt.is-active { color: var(--forest); background: var(--leaf-soft); }

.nav-burger { display:none; width:44px; height:44px; position:relative; color:#fff; margin-inline-start:.2rem; }
.scrolled .nav-burger { color: var(--ink); }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { content:""; position:absolute; inset-inline:10px; height:2.5px; border-radius:3px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
.nav-burger span { inset-block-start:21px; } .nav-burger span::before { inset-block-start:-7px; } .nav-burger span::after { inset-block-start:7px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-burger { display:block; order:3; }
  .lang { order:2; margin-inline-start:auto; }
  .site-nav {
    position:fixed; inset-block-start:0; inset-inline-end:0; height:100dvh; width:min(84vw,360px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.3rem; padding:2rem 2.4rem;
    background:#fff; box-shadow: -20px 0 50px -30px rgba(0,0,0,.5);
    transform: translateX(110%); transition: transform .45s var(--ease); margin:0;
  }
  [dir="rtl"] .site-nav { inset-inline-end:auto; inset-inline-start:0; transform: translateX(-110%); }
  .site-nav.open { transform: translateX(0); }
  .site-nav a, .scrolled .site-nav a { color: var(--ink); font-size:1.2rem; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--forest-dp); color: rgba(255,255,255,.78); padding: clamp(3rem,6vw,5rem) 0 2rem; position: relative; overflow: hidden; }
.site-footer::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:5px; background: linear-gradient(90deg, var(--leaf), var(--teal), var(--coral), var(--sand)); }
.footer-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand .brand { color:#fff; margin-bottom:1rem; }
.footer-brand p { max-width:38ch; font-size:.9rem; }
.footer-col h4 { font-family:var(--f-display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--sand); margin-bottom:1rem; font-weight:800; }
.footer-col a, .footer-col p { display:block; padding:.3rem 0; font-size:.9rem; transition: color .25s, padding-inline-start .25s; }
.footer-col a:hover { color:#fff; padding-inline-start:.4rem; }
.footer-bottom { padding-top:1.5rem; font-size:.76rem; line-height:1.8; opacity:.65; display:flex; flex-direction:column; gap:.3rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }

/* =========================================================================
   REVEAL + helpers
   ========================================================================= */
.reveal { opacity:0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

.lightbox { position:fixed; inset:0; z-index:200; display:none; background: rgba(12,22,16,.92); backdrop-filter: blur(8px); align-items:center; justify-content:center; padding:4vw; cursor:zoom-out; }
.lightbox.open { display:flex; animation: pop .3s var(--ease); }
.lightbox img { max-width:92vw; max-height:82vh; border-radius:14px; box-shadow: 0 30px 80px -20px #000; }
.lightbox .lb-cap { position:absolute; inset-block-end:5vh; inset-inline:0; text-align:center; color: rgba(255,255,255,.85); font-size:.9rem; }

.section-head { max-width: 64ch; }
.section-head .kicker { margin-bottom: 1rem; }
.section-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); color: var(--ink); }
.section-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; }

/* ===== jnews.az attribution bar — marquee ===== */
.jbar{position:fixed;top:0;left:0;right:0;z-index:200;height:38px;display:flex;align-items:center;
  gap:.7rem;background:#0c0d11;color:#cfcdc4;font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:.78rem;line-height:1;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.jbar-logo{font-weight:800;color:#fff;font-size:.9rem;flex-shrink:0;text-decoration:none;white-space:nowrap;transition:color .25s}
.jbar-logo b{color:#e0a93a;font-weight:800}
.jbar-logo:hover{color:#e0a93a}
.jbar-sep{color:rgba(255,255,255,.28);flex-shrink:0}
.jbar-marquee{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.jbar-track{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  color:#a9a79d;font-weight:500;animation:jbarscroll 40s linear infinite;will-change:transform}
.jbar-marquee:hover .jbar-track{animation-play-state:paused}
.jbar-track span{padding-right:3.5rem}
[dir="rtl"] .jbar-track span{padding-right:0;padding-left:3.5rem}
@keyframes jbarscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .jbar-track{animation-name:jbarscroll-rtl}
@keyframes jbarscroll-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
.site-header{top:38px!important}
@media(max-width:600px){.jbar{font-size:.72rem;gap:.5rem}.jbar-logo{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.jbar-track{animation:none}}