/* ============================================================
   PREMIUM LAYER — v14.1
   Loaded last on every template (documentShell + appShell3).
   Purely additive: refines typography, adds a restrained champagne-metal accent to the
   existing navy/cyan palette, adds motion + depth. Does not touch
   layout, structure or copy from styles.css / page CSS.
   ============================================================ */

/* ---------- 1. Tokens: editorial type + quiet-luxury accent ---------- */
:root {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gold: #b9a27b;
  --gold-bright: #eadbbd;
  --gold-dim: #7d6d4f;
  --gold-soft: rgba(185, 162, 123, 0.34);
  --gold-line: rgba(185, 162, 123, 0.46);
  --gold-wash: rgba(185, 162, 123, 0.07);
  --premium-cyan: var(--cyan, #57d7d9);
  --premium-cyan-soft: var(--cyan-soft, #9ce9e9);

  --ease-premium: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 260ms;
  --dur-med: 620ms;
}

html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Optical sizing for the display serif — keeps headlines crisp at large sizes */
.slide-title, .brand-name, h1, h2, h3,
.tplo-anatomy-copy h2 {
  font-optical-sizing: auto;
  font-feature-settings: "ss01" 1, "liga" 1;
}

.slide-title em { font-style: italic; color: var(--gold-bright); }

/* ---------- 2. Selection / scrollbar / focus — small, felt everywhere ---------- */
::selection { background: color-mix(in srgb, var(--premium-cyan) 58%, var(--gold) 42%); color: #001216; }

* { scrollbar-color: var(--gold-dim) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-dim), var(--gold)); border-radius: 10px; border: 2px solid var(--ink); }

:focus-visible { outline-color: var(--gold-bright); }

/* Slim gold reading-progress bar, injected by premium.js */
.progress-rail {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress-rail::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--premium-cyan), var(--gold-bright) 52%, var(--premium-cyan-soft));
  box-shadow: 0 0 12px var(--gold-soft);
  transition: width 90ms linear;
}

/* ---------- 3. Header — floating glass capsule once scrolled ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium), padding var(--dur-fast) var(--ease-premium),
    margin var(--dur-fast) var(--ease-premium), width var(--dur-fast) var(--ease-premium);
  border: 1px solid transparent;
}

.site-header.is-scrolled {
  width: min(90vw, 1360px);
  margin-top: 14px;
  padding: 6px 22px;
  background: rgba(5, 14, 23, 0.72);
  border-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-header.is-scrolled .brand-mark img { filter: drop-shadow(0 0 10px var(--gold-soft)); }

.brand-role { color: var(--premium-cyan-soft); }

.nav-link::after { background: linear-gradient(90deg, var(--premium-cyan), var(--gold-bright)); height: 1.5px; }
.nav-link:hover { color: var(--gold-bright); }

.language-switch { border-color: var(--gold-line); }
.language-switch [aria-current="true"] { background: var(--gold-wash); color: var(--gold-bright); }

/* ---------- 4. Buttons — sheen sweep + lift, gold takes over from cyan ---------- */
.button {
  position: relative;
  overflow: hidden;
  border-color: var(--gold-line);
  transition: color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--premium-cyan), var(--gold-bright) 48%, var(--premium-cyan-soft));
  transform: translateX(-102%);
  transition: transform var(--dur-med) var(--ease-premium);
}

.button:hover {
  color: #1c1206;
  background: transparent;
  border-color: var(--gold-bright);
  box-shadow: 0 14px 34px -12px var(--gold-soft), 0 0 0 1px var(--gold-line);
  transform: translateY(-3px);
}

.button:hover::before { transform: translateX(0); }
.button:hover .arrow { color: #1c1206; transform: translateX(3px); }
.button .arrow { transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium); }
.button:active { transform: translateY(-1px) scale(0.98); }

/* Magnetic offset uses the independent translate property, so it composes
   cleanly with the existing hover transform instead of overriding it. */
.button-magnetic {
  translate: var(--mx, 0) var(--my, 0);
  transition-property: color, border-color, box-shadow, transform, translate;
}


/* ---------- 5. Numerals & specialty band — the gold signature ---------- */
.specialty-number, .principle-icon { color: var(--gold); }
.eyebrow, .slide-kicker { color: var(--premium-cyan); }

.specialty-item {
  position: relative;
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}
.specialty-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(180deg, var(--gold-wash), transparent 70%);
  transition: opacity var(--dur-fast) var(--ease-premium);
}
.specialty-item:hover { transform: translateY(-4px); }
.specialty-item:hover::after { opacity: 1; }
.specialty-item:hover .specialty-arrow { color: var(--gold-bright); transform: translateX(4px); }
.specialty-arrow { transition: transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium); }

.principle-icon svg { filter: drop-shadow(0 0 8px var(--gold-soft)); }

/* ---------- 6. Hero visual — warmer grade, slow-drifting gold ring ---------- */
.hero-photo { filter: saturate(1.04) contrast(1.03); }

.tech-rings { border-color: var(--gold-line); }
.tech-rings::before, .tech-rings::after { border-color: rgba(205, 168, 106, 0.22); }
.tech-rings::before { animation: premium-spin 60s linear infinite; }
.tech-rings::after { animation: premium-spin 90s linear infinite reverse; }

@keyframes premium-spin {
  to { transform: rotate(360deg); }
}

.carousel-dot { transition: transform var(--dur-fast) var(--ease-premium); }
.carousel-dot[aria-current="true"] { background: var(--gold-bright) !important; box-shadow: 0 0 10px var(--gold-soft); }
.carousel-arrow:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

/* ---------- 7. Panels / cards — hairline gold border on hover, deeper shadow ---------- */
.editorial-panel { box-shadow: 0 40px 110px rgba(0, 0, 0, 0.35), inset 0 0 90px rgba(205, 168, 106, 0.02); }

/* ---------- 8. Footer — quiet gold hairline ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(92%, 1200px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-line) 50%, transparent);
}
.footer-column h2 { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.16em; }
.site-footer a:hover { color: var(--gold-bright); }

/* ---------- 9. Scroll-reveal utility, applied by premium.js ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--ease-premium), transform 900ms var(--ease-premium);
  }
  .reveal-up.is-visible { opacity: 1; transform: translateY(0); }

  [data-reveal-stagger] > .reveal-up:nth-child(1) { transition-delay: 0ms; }
  [data-reveal-stagger] > .reveal-up:nth-child(2) { transition-delay: 90ms; }
  [data-reveal-stagger] > .reveal-up:nth-child(3) { transition-delay: 180ms; }
  [data-reveal-stagger] > .reveal-up:nth-child(4) { transition-delay: 270ms; }
  [data-reveal-stagger] > .reveal-up:nth-child(5) { transition-delay: 360ms; }
  [data-reveal-stagger] > .reveal-up:nth-child(6) { transition-delay: 450ms; }
}

/* Fine paper-grain texture for a print-editorial finish, very low opacity */
body { position: relative; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 10. Cursor affordances only where a fine pointer exists ---------- */
@media (pointer: fine) {
  .button, .specialty-item, .carousel-dot, .carousel-arrow, .nav-link { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .tech-rings::before, .tech-rings::after { animation: none; }
  .button::before { transition: none; }
}

@media (max-width: 900px) {
  .site-header.is-scrolled { width: 94vw; margin-top: 8px; padding: 4px 14px; }
}
/* ---------- 11. Operational surfaces — quiet mode ----------
   Admin/account flows keep the typography and palette but skip decorative motion. */
body.premium-operational::after { opacity: 0.018; }
body.premium-operational .tech-rings::before,
body.premium-operational .tech-rings::after { animation: none; }
body.premium-operational .button { translate: none !important; }