/* ==========================================
   Paros Limited — "The Manifest" theme
   International trade rendered as a customs
   ledger: stamped seals, cargo tickets, dashed
   perforation dividers, mono manifest codes.
   ========================================== */

:root {
  --ink-950: #0A0F1C;
  --ink-900: #10182B;
  --ink-700: #26314D;
  --paper-50: #F8F9FA;
  --paper-100: #EEF0F2;
  --paper-200: #DFE3E7;
  --manila-100: #F5EFDD;
  --manila-200: #EDE3C8;
  --stamp-600: #964C2B;
  --stamp-700: #7C3F24;
  --brass-600: #8F6F31;
  --brass-300: #D6B564;

  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
  --dur-micro: 160ms;
  --dur-standard: 280ms;
  --dur-stamp: 640ms;
}

/* Base scroll behavior */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: visible;
}

/* Reveal on scroll */
[data-reveal],
[data-reveal-item] {
  opacity: 1;
}
.reveal-armed [data-reveal],
.reveal-armed [data-reveal-item] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-armed [data-reveal],
  .reveal-armed [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Split text */
.split-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Parallax */
.parallax-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.parallax-layer {
  position: absolute;
  inset: -10% -10%;
  pointer-events: none;
  will-change: transform;
}

/* ==========================================
   Procedural backdrops — kept as the same
   class names other views already reference,
   redrawn as ledger paper + ink rather than
   the old gold/silver mine motif.
   ========================================== */
.mine-strata {
  background-image:
    radial-gradient(120% 90% at 12% -10%, rgba(150, 76, 43, 0.10), transparent 55%),
    linear-gradient(160deg, #10182B 0%, #0D1424 55%, #0A0F1C 100%);
}

.mine-strata--light {
  background-image:
    radial-gradient(130% 100% at 85% -20%, rgba(143, 111, 49, 0.08), transparent 55%),
    linear-gradient(170deg, #F8F9FA 0%, #EEF0F2 60%, #F5F6F7 100%);
}

.mine-vignette {
  background: radial-gradient(120% 95% at 50% 15%, transparent 45%, rgba(6, 9, 15, 0.65) 100%);
}

.mine-grain,
.doc-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.05;
}

/* Fixed, site-wide paper-grain layer — replaces the old ambient
   particle canvas. No per-frame JS, no floating dust: just texture
   that makes every surface read as printed ledger stock. */
#doc-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #doc-grain {
    opacity: 0.6;
  }
}

/* Hairline "veins" — thin institutional rules rather than ore seams. */
.mine-vein-gold {
  background-image:
    repeating-linear-gradient(180deg, transparent 0, transparent 63px, rgba(214, 181, 100, 0.16) 63px, rgba(214, 181, 100, 0.16) 64px);
  mix-blend-mode: normal;
  opacity: 0.5;
}

.mine-vein-silver {
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(228, 231, 235, 0.14) 79px, rgba(228, 231, 235, 0.14) 80px);
  mix-blend-mode: normal;
  opacity: 0.5;
}

.mine-vein-gold--muted {
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 71px, rgba(143, 111, 49, 0.09) 71px, rgba(143, 111, 49, 0.09) 72px);
}

.mine-vein-silver--muted {
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 87px, rgba(38, 49, 77, 0.07) 87px, rgba(38, 49, 77, 0.07) 88px);
}

.parallax-layer--fade-in-top {
  mask-image: linear-gradient(to bottom, transparent 8.4%, black calc(8.4% + 90px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 8.4%, black calc(8.4% + 90px));
}

.mine-strata,
.mine-strata--light,
.mine-vein-gold,
.mine-vein-silver,
.mine-vein-gold--muted,
.mine-vein-silver--muted,
.mine-grain {
  pointer-events: none;
}

/* ==========================================
   Letterhead masthead — a double rule under
   the header, the way a certificate or a
   bill of lading is ruled off, plus a compact
   state once you've scrolled past it.
   ========================================== */
.header-rule {
  border-bottom: 4px double var(--ink-900);
}
#site-header.is-scrolled #site-header-row {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
#site-header-row {
  transition: padding var(--dur-standard) var(--ease-standard);
}

/* ==========================================
   Ledger divider — a perforated tear-line with
   a folio tag, replacing generic "· Brand ·"
   repeats between sections.
   ========================================== */
.ledger-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 2.75rem 1.5rem;
}
.ledger-divider .ledger-divider__line {
  flex: 1 1 auto;
  max-width: 12rem;
  border-top: 1.5px dashed rgba(16, 24, 43, 0.22);
}
.ledger-divider .ledger-divider__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-600);
  white-space: nowrap;
}
.ledger-divider--dark .ledger-divider__line {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.ledger-divider--dark .ledger-divider__tag {
  color: var(--brass-300);
}

/* ==========================================
   Cargo-code label — the small mono tag used
   throughout for classification/status marks.
   ========================================== */
.cargo-code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================
   Ticket card — a manifest/cargo tile with a
   punched-notch edge, used for the hero panel
   and the sector grid.
   ========================================== */
.ticket-card {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 2;
}
.ticket-card--on-paper::before,
.ticket-card--on-paper::after {
  background: var(--paper-100);
}
.ticket-card--on-ink::before,
.ticket-card--on-ink::after {
  background: var(--ink-950);
}
.ticket-card::before { top: -9px; }
.ticket-card::after { bottom: -9px; }

/* ==========================================
   Ledger buttons
   ========================================== */
.btn-ledger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background-color var(--dur-standard) var(--ease-standard),
              color var(--dur-standard) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.btn-ledger:active {
  transform: translateY(1px);
}
.btn-ledger--solid {
  background: var(--stamp-600);
  color: var(--paper-50);
}
.btn-ledger--solid:hover {
  background: var(--stamp-700);
}
.btn-ledger--outline {
  border: 1.5px solid currentColor;
  background: transparent;
}
.btn-ledger--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn-ledger--outline-dark:hover {
  background: rgba(16, 24, 43, 0.06);
}

/* ==========================================
   Stamp seal — the site's signature moment.
   A circular ink-stamp mark that thumps into
   place once, the first time it scrolls into
   view (see /js/theme/stamp.js).
   ========================================== */
.stamp-seal {
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 6px 18px rgba(150, 76, 43, 0.25));
}
.stamp-seal.is-stamped {
  animation: stampDown var(--dur-stamp) var(--ease-stamp) forwards;
}
@keyframes stampDown {
  0%   { opacity: 0; transform: scale(2.1) rotate(-24deg); }
  55%  { opacity: 1; transform: scale(0.93) rotate(-6deg); }
  78%  { transform: scale(1.05) rotate(-9deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-seal,
  .stamp-seal.is-stamped {
    opacity: 1 !important;
    animation: none !important;
    transform: rotate(-8deg) !important;
  }
}

/* ==========================================
   Clause list — numbered legal-style entries,
   replacing icon-in-rounded-square value cards.
   ========================================== */
.clause {
  position: relative;
  padding: 1.75rem 0 1.75rem 1.5rem;
  border-left: 2px solid rgba(16, 24, 43, 0.12);
  transition: border-color var(--dur-standard) var(--ease-standard);
}
.clause:hover {
  border-left-color: var(--stamp-600);
}
.clause__mark {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--stamp-600);
  margin-bottom: 0.5rem;
}

/* ==========================================
   Route timeline — waypoint nodes on a dashed
   shipping-route line, replacing generic
   numbered-step cards.
   ========================================== */
.route-line {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.route-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.route-node__dot {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--manila-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}
.route-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: -2.5rem;
  border-left: 2px dashed rgba(16, 24, 43, 0.2);
}
@media (min-width: 768px) {
  .route-line {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
  .route-node {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 23%;
  }
  .route-node:not(:last-child)::after {
    left: 3.25rem;
    right: -100%;
    top: 1.5rem;
    bottom: auto;
    border-left: none;
    border-top: 2px dashed rgba(16, 24, 43, 0.2);
  }
}

/* ==========================================
   Trade ticker — a scrolling strip of trade
   lanes. Decorative & aria-hidden; purely CSS.
   ========================================== */
.trade-ticker {
  overflow: hidden;
  white-space: nowrap;
}
.trade-ticker__track {
  display: inline-flex;
  gap: 3rem;
  animation: tickerScroll 38s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trade-ticker {
    overflow-x: auto;
  }
  .trade-ticker__track {
    animation: none;
  }
}

/* ==========================================
   Ledger form inputs — bottom-border only,
   no filled boxes.
   ========================================== */
.input-ledger {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding: 0.65rem 0.1rem;
  transition: border-color var(--dur-standard) var(--ease-standard);
}
.input-ledger:focus {
  outline: none;
  border-bottom-color: var(--brass-300);
}
.input-ledger--on-paper {
  border-bottom-color: rgba(16, 24, 43, 0.25);
}
.input-ledger--on-paper:focus {
  border-bottom-color: var(--stamp-600);
}

/* Content typography (CMS Pages) */
.content-prose { color: #262626; font-size: 1.05rem; line-height: 1.8; }
.content-prose p { margin-bottom: 1.25em; }
.content-prose p:last-child { margin-bottom: 0; }
.content-prose h2 { font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-top: 2.25rem; margin-bottom: 1rem; color: #0a0a0a; }
.content-prose h2:first-child { margin-top: 0; }
.content-prose h3 { font-family: 'Fraunces', serif; font-size: 1.375rem; font-weight: 600; line-height: 1.4; margin-top: 1.75rem; margin-bottom: 0.75rem; color: #0a0a0a; }
.content-prose h4 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.content-prose ul, .content-prose ol { margin-left: 1.5rem; margin-bottom: 1.25em; }
.content-prose ul { list-style: disc; }
.content-prose ol { list-style: decimal; }
.content-prose li { margin-bottom: 0.5em; }
.content-prose a { color: var(--stamp-600); text-decoration: underline; text-underline-offset: 3px; }
.content-prose a:hover { color: var(--stamp-700); }
.content-prose blockquote { border-left: 4px solid var(--brass-600); padding-left: 1.25rem; margin: 1.5em 0; font-style: italic; color: #404040; }
.content-prose img { border-radius: 0.25rem; margin: 1.5em 0; max-width: 100%; height: auto; }
.content-prose strong { color: #0a0a0a; font-weight: 600; }
.content-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.content-prose th, .content-prose td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
.content-prose th { background: #f9fafb; font-weight: 600; }

/* ========== Hero Slider (legacy hook — no longer used on Home,
   left in place in case a CMS page still references it) ========== */
.hero-slider { width: 100%; height: 100%; }
.hero-slide { opacity: 0; }
.hero-slide:first-child { opacity: 1; }

/* ========== Pointer events ========== */
.ticket-card,
.route-node__dot {
  pointer-events: auto;
}

/* ========== Scroll to top button ========== */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 9999px;
  background: var(--stamp-600);
  color: var(--paper-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(150, 76, 43, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
  z-index: 45;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: var(--stamp-700);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn {
    transition: opacity 0.15s linear;
    transform: none;
  }
}

/* ========== Tilt Cards ========== */
[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--glow-x) var(--glow-y), rgba(150, 76, 43, 0.14), transparent 65%);
  opacity: var(--glow-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-tilt] {
    transform: none !important;
  }
}

/* ========== Focus visibility (keyboard users) ========== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--stamp-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ========== Smooth Transitions ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}