/* ═══════════════════════════════════════════════════════
   BASE — reset, global elements, section scaffolding
   Depends on: tokens.css
   ═══════════════════════════════════════════════════════ */

/* ── Shell custom elements (okros-nav / okros-footer) ───── */
/* Reserve nav height and hide before JS upgrades the element */
okros-nav:not(:defined) { display: block; visibility: hidden; height: var(--nav-h, 72px); }
okros-footer:not(:defined) { display: block; visibility: hidden; }
/* Once upgraded, make wrapper transparent to layout */
okros-nav, okros-footer { display: contents; }

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden; /* iOS Safari: body alone is not enough */
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none; /* prevents touch-drag bounce beyond viewport */
}

img, video, audio { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Skip-to-content link ───────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  color: #141820;
  padding: 0.5rem 1.2rem;
  border-radius: 0 0 6px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 0; }

/* ── Focus visible ring ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Layout utility ────────────────────────────────────── */
.container {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Section scaffold ──────────────────────────────────── */
section {
  padding-block: var(--section-pad);
  position: relative;
}

/* Gradient transition between sections */
section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 149, 106, 0.1) 30%,
    rgba(196, 149, 106, 0.1) 70%,
    transparent 100%
  );
}

/* ── Section typography ────────────────────────────────── */
.section-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 2.5rem;
}

/* Italic accent word in section titles */
.section-title em,
.contact__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* ── Scroll reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ── Arrow link (shared: work section, nav CTA) ────────── */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.3s var(--ease-out), opacity 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}
.arrow-link:hover { gap: 0.9rem; opacity: 0.8; }
.arrow-link__arrow {
  font-style: normal;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.3s var(--ease-out);
}
.arrow-link:hover .arrow-link__arrow { transform: translateX(4px); }

/* ── Ticker ────────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  padding-block: 1.25rem;
  background: #14181C;
  border-block: 1px solid rgba(91, 173, 168, 0.08);
  position: relative;
  z-index: 1;
}

.ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: tickerScroll 28s linear infinite;
}

/* Ticker pause handled by JS initTicker() — Safari resets animation via CSS hover */
/* .ticker:hover .ticker__track { animation-play-state: paused; } */

/* Light mode ticker */
[data-theme="light"] .ticker {
  background: #DDD9CC;
  border-block-color: rgba(124,85,53,0.12);
}
[data-theme="light"] .ticker__item { color: var(--text-dim); }
[data-theme="light"] .ticker__dot  { background: var(--c-comm); }

.ticker__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}

.ticker__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-comm);
  opacity: 0.5;
  flex-shrink: 0;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Pause all animations when tab hidden ──────────────── */
.js-page-hidden .geo-fixed,
.js-page-hidden .geo-fixed *,
.js-page-hidden .float-wave,
.js-page-hidden .float-signal { animation-play-state: paused !important; }

/* ── Light mode — global overrides + section divider ─── */
/* No body text-shadow — the old green haze was too visible */
[data-theme="light"] .section-title,
[data-theme="light"] .contact__title,
[data-theme="light"] .footer__wordmark {
  text-shadow: 0 2px 8px rgba(92,68,40,0.10);  /* warm walnut, barely perceptible */
}
[data-theme="light"] .section-label {
  opacity: 1;
}
[data-theme="light"] section + section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(124,85,53,0.10) 30%, rgba(124,85,53,0.10) 70%, transparent 100%);
}

/* ── Paper grain texture overlay ───────────────────────
   SVG feTurbulence noise at 4% opacity + multiply blend
   Transforms the flat sand bg into a matte paper surface
   ──────────────────────────────────────────────────── */
[data-theme="light"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  mix-blend-mode: multiply;
}

/* ── Organic atmosphere blobs on section backgrounds ───
   Multi-layer radial gradients layered on top of the
   section's base color. No pseudo-element z-index issues.
   ──────────────────────────────────────────────────── */
[data-theme="light"] .services {
  background:
    radial-gradient(ellipse 55% 70% at 3% 65%, rgba(198,123,92,0.11) 0%, transparent 60%),
    radial-gradient(ellipse 42% 55% at 97% 12%, rgba(92,122,90,0.09) 0%, transparent 55%),
    var(--bg-services);
}
[data-theme="light"] .work {
  background:
    radial-gradient(ellipse 50% 60% at 92% 88%, rgba(198,123,92,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 38% 50% at 6% 15%, rgba(212,196,168,0.18) 0%, transparent 55%),
    var(--bg-work);
}
[data-theme="light"] .about {
  background:
    radial-gradient(ellipse 62% 80% at 96% 50%, rgba(92,122,90,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 44% 55% at 3% 85%, rgba(198,123,92,0.08) 0%, transparent 52%),
    var(--bg-about);
}

/* ── Reduced motion — global kill ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* L-3: reveal elements start invisible — show them immediately for reduced-motion users */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* L-7: ticker scroll is a continuous animation — stop it entirely */
  .ticker__track { animation: none; }
}