/* ====================================================================
   Dilogic Group — Spine RICH enhancement layer (preview v0.6)
   Loaded AFTER spine.css. Adds immersive depth, motion choreography,
   and interactive richness WITHOUT altering the locked brand tokens.
   Everything here is additive and theme-aware. Respects reduced-motion.
   ==================================================================== */

/* ============================================================
   0 · MOTION TOKENS
   ============================================================ */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-mid: 420ms;
  --grain-opacity: 0.035;
}
[data-theme="light"] { --grain-opacity: 0.028; }

/* ============================================================
   1 · PAGE LOADER — premium intro curtain
   ============================================================ */
#rich-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: transform 900ms var(--ease-out-expo), visibility 0s linear 900ms;
}
#rich-loader.done { transform: translateY(-100%); visibility: hidden; }
.rich-loader-mark {
  position: relative; width: 150px; height: auto; opacity: 0;
  animation: loaderMark 900ms var(--ease-out-expo) forwards;
}
.rich-loader-mark svg {
  width: 100%; height: auto; display: block; overflow: visible;
  animation: ldBreathe 3.2s ease-in-out 1s infinite;
}
@keyframes loaderMark {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ldBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* Silver form settles up first */
.rich-loader-mark .ld-silver {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: ldSilverIn 800ms var(--ease-out-expo) 200ms forwards;
}
@keyframes ldSilverIn { 0% { opacity: 0; transform: translateY(8px) scale(0.94); } 100% { opacity: 1; transform: none; } }

/* Gold arc orbits into place after the silver form */
.rich-loader-mark .ld-accent {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: ldAccentIn 1000ms var(--ease-out-expo) 520ms forwards;
}
@keyframes ldAccentIn { 0% { opacity: 0; transform: rotate(-35deg) scale(0.72); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Metallic shine sweeping across the mark, repeating */
.rich-loader-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,246,224,0.7) 50%, transparent 62%);
  background-size: 260% 100%; mix-blend-mode: screen;
  animation: ldShine 2400ms ease-in-out 1100ms infinite;
}
@keyframes ldShine { 0% { opacity: 0; background-position: 210% 0; } 18% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; background-position: -70% 0; } }

/* On sector subdomains, tint the mark's arc to the sector accent (main site keeps gold metallic) */
[data-vertical] .rich-loader-mark .ld-accent { fill: var(--color-accent); }
.rich-loader-track {
  width: 180px; height: 1px; position: relative;
  background: var(--line);
  overflow: hidden;
}
.rich-loader-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.rich-loader-count {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--fg-mute);
}

/* ============================================================
   2 · SCROLL PROGRESS + FILM GRAIN
   ============================================================ */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  z-index: 60; pointer-events: none;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent-soft);
  transition: width 80ms linear;
}
#film-grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-2%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* ============================================================
   3 · CUSTOM CURSOR — dot + trailing ring (pointer devices only)
   ============================================================ */
.rich-cursor-dot, .rich-cursor-ring { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; border-radius: 999px; will-change: transform; }
.rich-cursor-dot  { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--color-accent); mix-blend-mode: difference; }
.rich-cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--color-accent-soft);
  transition: width 260ms var(--ease-out-expo), height 260ms var(--ease-out-expo),
              margin 260ms var(--ease-out-expo), border-color 260ms ease, background-color 260ms ease;
}
body.cursor-active .rich-cursor-ring.is-hover {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-color: var(--color-accent, var(--gold)); background: var(--color-accent-faint, var(--gold-faint));
}
@media (hover: none), (pointer: coarse) { .rich-cursor-dot, .rich-cursor-ring { display: none; } }
/* Hide native cursor only once JS confirms a fine pointer (class added at runtime) */
@media (hover: hover) and (pointer: fine) {
  body.cursor-active, body.cursor-active a, body.cursor-active button,
  body.cursor-active summary, body.cursor-active .surface-card { cursor: none; }
}

/* ============================================================
   4 · HERO — WebGL/canvas reactive constellation + depth
   ============================================================ */
#hero-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1200ms ease;
}
#hero-canvas.ready { opacity: 1; }
/* Push existing hero content above the canvas */
.hero-with-media .container-wide,
.hero-with-media .container,
.hero-with-media .container-narrow { position: relative; z-index: 4; }
.hero-with-media .hero-media-overlay { z-index: 2; }
/* Slightly dim the looping video so the constellation reads as the hero system */
.hero-with-media .hero-video { opacity: 0.22 !important; }
[data-theme="light"] .hero-with-media .hero-video { opacity: 0.16 !important; }

/* Headline mask reveal — wrap each line; words rise from behind the mask */
.hero-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-with-media h1 .hero-word { will-change: transform, opacity; }
/* Gold sheen sweeping across the italic emphasis line, once, after reveal */
.hero-sheen { position: relative; }
.hero-sheen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,246,224,0.55) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 220% 0;
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
}
.hero-sheen.sweep::after { animation: heroSheen 1400ms var(--ease-out-quart) 1 forwards; }
@keyframes heroSheen { 0%{opacity:0; background-position:220% 0} 12%{opacity:1} 100%{opacity:0; background-position:-40% 0} }

/* Floating scroll cue upgrade */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }

/* ============================================================
   5 · MAGNETIC BUTTONS
   ============================================================ */
.btn-primary, .btn-secondary, .btn-ghost { will-change: transform; }
.magnetic { transition: transform 320ms var(--ease-out-expo); }

/* ============================================================
   6 · SECTION REVEAL CHOREOGRAPHY (clip + rise)
   Progressive-enhancement: JS adds .rich-on to trigger.
   ============================================================ */
.rich-reveal {
  opacity: 0; transform: translateY(38px);
  clip-path: inset(0 0 12% 0);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo), clip-path 900ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.rich-reveal.rich-on { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* stagger children */
.rich-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 760ms var(--ease-out-expo), transform 760ms var(--ease-out-expo); }
.rich-stagger.rich-on > * { opacity: 1; transform: none; }

/* ============================================================
   7 · 3D TILT CARDS + GLARE  (services / sectors / insights)
   ============================================================ */
.tilt-wrap { perspective: 1200px; }
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 260ms var(--ease-out-expo);
  transform-style: preserve-3d; will-change: transform;
}
/* Ensure tilt rotation wins over spine.css .surface-card:hover translateY */
.surface-card.tilt:hover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.tilt .tilt-glare {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 200px at var(--gx, 50%) var(--gy, 50%), rgba(255,246,224,0.14), transparent 60%);
  transition: opacity 260ms ease; border-radius: inherit;
}
.tilt:hover .tilt-glare { opacity: 1; }
[data-theme="light"] .tilt .tilt-glare { background: radial-gradient(circle 200px at var(--gx,50%) var(--gy,50%), rgba(138,106,50,0.10), transparent 60%); }

/* Lift the inner content slightly on the Z axis for depth */
.tilt .tilt-lift { transform: translateZ(26px); }

/* ============================================================
   8 · SECTOR CARD — richer accent behaviour + corner brackets
   ============================================================ */
.surface-card-sector { position: relative; }
.surface-card-sector .sector-bracket {
  position: absolute; width: 18px; height: 18px; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 300ms ease, transform 400ms var(--ease-out-expo);
  border-color: var(--color-accent);
}
.surface-card-sector .br-tl { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; transform: translate(6px,6px); }
.surface-card-sector .br-br { bottom: 14px; right: 14px; border-bottom: 1px solid; border-right: 1px solid; transform: translate(-6px,-6px); }
.surface-card-sector:hover .sector-bracket { opacity: 1; transform: translate(0,0); }
.surface-card-sector .hairline-sector { transition: transform 500ms var(--ease-out-expo); transform-origin: left; }
.surface-card-sector:hover .hairline-sector { transform: scaleX(1.35); }
.surface-card-sector .arrow { transition: transform 320ms var(--ease-out-expo); }
.surface-card-sector:hover .arrow { transform: translateX(6px); }

/* ============================================================
   9 · PILLARS — connective spine that draws in on enter
   ============================================================ */
#pillars .pillar-index {
  font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 0.3em;
  color: var(--color-accent, var(--gold)); opacity: 0.7;
}
.pillar-node { position: relative; }
.pillar-node::before {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transition: width 800ms var(--ease-out-expo);
}
.rich-on .pillar-node::before { width: 100%; }

/* ============================================================
   10 · CAPABILITY MARQUEE — quiet motion band between sections
   ============================================================ */
.cap-marquee { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 22px 0; }
.cap-marquee .marquee-track { animation-duration: 42s; }
.cap-item {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: 64px; white-space: nowrap;
}
.cap-item .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--color-accent); opacity: 0.8; }

/* ============================================================
   11 · NAV underline + header polish
   ============================================================ */
header.site-header nav[aria-label="Primary"] a { position: relative; }
header.site-header nav[aria-label="Primary"] a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--color-accent); transition: width 300ms var(--ease-out-expo);
}
header.site-header nav[aria-label="Primary"] a:hover::after { width: 100%; }

/* Numbers section — animated underline ring for stat blocks */
#numbers .stat-number { position: relative; display: inline-block; }

/* Featured case — inline metric emphasis */
.case-metric { font-family: 'Cormorant Garamond', serif; color: var(--gold); font-weight: 400; }

/* ============================================================
   12 · REDUCED MOTION — neutralise everything expensive
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #film-grain, .hero-sheen::after { animation: none !important; }
  #rich-loader { display: none !important; }
  .rich-reveal, .rich-stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #hero-canvas { display: none !important; }
  .rich-cursor-dot, .rich-cursor-ring { display: none !important; }
  .tilt { transform: none !important; }
}