/* Motion layer and multi-page editorial components */
:root { --cursor-x: 50vw; --cursor-y: 30vh; }

body::after {
  content: "";
  position: fixed;
  z-index: 120;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--cursor-x) var(--cursor-y), rgba(240, 198, 106, .055), transparent 65%);
  mix-blend-mode: screen;
}

.scroll-progress {
  position: fixed;
  z-index: 180;
  inset: 0 0 auto;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--royal-metal);
  box-shadow: 0 0 14px rgba(240, 198, 106, .65);
}

.page-transition {
  position: fixed;
  z-index: 170;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #040f22;
  transform: translateY(0);
  transition: transform .72s cubic-bezier(.77, 0, .18, 1);
}

.page-transition::before,
.page-transition::after {
  content: "";
  position: absolute;
  width: 42vw;
  aspect-ratio: 1;
  border: 1px solid rgba(211, 168, 78, .12);
  border-radius: 50%;
}

.page-transition::after { width: 28vw; }
.page-transition img { width: clamp(85px, 10vw, 145px); filter: drop-shadow(0 16px 35px rgba(0,0,0,.55)); }
.page-transition p { position: absolute; top: calc(50% + 110px); color: var(--champagne); font: 700 .58rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; }
.page-is-ready .page-transition { transform: translateY(-100%); }
.page-is-leaving .page-transition { transform: translateY(0); pointer-events: all; }

.desktop-nav a[aria-current="page"] { color: var(--champagne); }
.desktop-nav a[aria-current="page"]::after { right: 0; }

[data-parallax] { transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }

.crest-scene {
  position: relative;
  width: min(48vw, 700px);
  aspect-ratio: .98;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.crest-scene__orbit { position: absolute; z-index: 0; inset: -7%; opacity: .76; }
.crest-scene__stack {
  position: absolute;
  z-index: 1;
  inset: 5%;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--crest-lift, 0), 0) rotateX(var(--crest-rx, 0deg)) rotateY(var(--crest-ry, 0deg));
  transition: transform .08s linear;
}
.crest-scene__stack::before {
  content: "";
  position: absolute;
  inset: 18%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(20, 85, 163, .55);
  filter: blur(75px);
  transform: translateZ(-80px);
}
.crest-scene__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.crest-scene__layer--edge { transform: translate3d(12px, 20px, -45px) scale(.985); opacity: .26; filter: brightness(.1) saturate(1.4) blur(1px); }
.crest-scene__layer--mid { transform: translate3d(5px, 9px, -18px); opacity: .52; filter: sepia(.25) saturate(1.15); }
.crest-scene__layer--front { transform: translateZ(38px); filter: drop-shadow(0 35px 40px rgba(0,0,0,.42)); }
.crest-scene__glint {
  position: absolute;
  z-index: 4;
  inset: 8%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.22) 45%, transparent 54%);
  mix-blend-mode: screen;
  clip-path: polygon(50% 2%, 89% 14%, 94% 56%, 76% 85%, 50% 100%, 24% 85%, 6% 56%, 11% 14%);
  transform: translateZ(50px) translateX(-90%);
  animation: crest-glint 5.5s ease-in-out infinite 1.6s;
}

.hero .hero-crest.crest-scene { position: absolute; right: clamp(-6rem, 2vw, 3rem); top: 50%; width: min(49vw, 700px); transform: translateY(-47%); opacity: 1; filter: none; }
.hero .hero-crest.crest-scene::after { display: none; }
.hero .crest-scene__stack img { width: 100%; }

.subhero {
  isolation: isolate;
  position: relative;
  min-height: 760px;
  height: min(900px, 92svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 77% 46%, rgba(20,85,163,.58), transparent 27%), linear-gradient(120deg, #06152e 5%, #071b3a 58%, #0a2a5e 100%);
}
.subhero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.21'/%3E%3C/svg%3E"); }
.subhero::after { content: attr(data-ghost); position: absolute; z-index: -1; left: -1vw; bottom: -7vw; color: rgba(255,255,255,.024); font: 900 27vw/1 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; }
.subhero__grid { display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 3rem; padding-top: 90px; }
.subhero__copy { position: relative; z-index: 3; max-width: 780px; }
.subhero__copy .display { margin-top: 1.25rem; font-size: clamp(4.8rem, 9vw, 8.7rem); line-height: .78; }
.subhero__copy > p:last-of-type { max-width: 610px; margin-top: 2rem; color: rgba(255,255,255,.68); font-size: .95rem; line-height: 1.8; }
.subhero__visual { position: absolute; right: 2vw; top: 50%; transform: translateY(-45%); }
.subhero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.8rem; display: flex; align-items: center; gap: 1.2rem; color: rgba(255,255,255,.45); font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.subhero__foot::before { content: ""; flex: 1; order: 1; height: 1px; background: var(--border-dark); }
.subhero__foot span:last-child { order: 2; color: var(--champagne); }

.page-intro { padding-block: clamp(5rem, 9vw, 9rem); }
.page-intro__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.page-intro__lead { color: var(--royal-blue); font: 700 clamp(1.7rem, 3vw, 2.65rem)/1.18 var(--font-display); text-transform: uppercase; }
.page-intro__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; color: #555c66; font-size: .9rem; line-height: 1.85; }
.page-intro__copy strong { color: var(--graphite); }

.fact-ribbon { border-block: 1px solid var(--border-dark); background: #071a38; }
.fact-ribbon__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact-ribbon__item { min-height: 165px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border-right: 1px solid var(--border-dark); }
.fact-ribbon__item:first-child { border-left: 1px solid var(--border-dark); }
.fact-ribbon__item span { color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fact-ribbon__item strong { font: 800 clamp(2rem, 4vw, 3.4rem)/.9 var(--font-display); text-transform: uppercase; }
.fact-ribbon__item p { color: var(--muted-blue); font-size: .66rem; line-height: 1.55; }

.editorial-section { position: relative; overflow: hidden; }
.editorial-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 6vw, 6rem); }
.editorial-content { max-width: 930px; }
.editorial-content > .display { max-width: 850px; }
.editorial-prose { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.4rem; }
.editorial-prose p { color: var(--muted-blue); font-size: .86rem; line-height: 1.85; }
.section--ivory .editorial-prose p { color: #555c66; }
.editorial-quote { position: relative; margin-top: 4rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(240,198,106,.25); background: rgba(20,85,163,.12); }
.editorial-quote::before { content: "“"; position: absolute; right: 2rem; top: 1rem; color: rgba(240,198,106,.18); font: 800 9rem/1 Georgia, serif; }
.editorial-quote blockquote { max-width: 760px; margin: 0; color: var(--white); font: 600 clamp(2rem, 4vw, 3.4rem)/1.05 var(--font-display); text-transform: uppercase; }
.editorial-quote cite { display: block; margin-top: 1.5rem; color: var(--champagne); font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.tactics-panel { position: relative; min-height: 580px; overflow: hidden; border: 1px solid var(--border-dark); background: linear-gradient(145deg, rgba(20,85,163,.3), rgba(6,21,46,.35)); }
.tactics-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tactics-panel__copy { position: absolute; z-index: 2; left: clamp(1.5rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 4vw, 3.5rem); max-width: 460px; }
.tactics-panel__copy p { color: var(--champagne); font-size: .6rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.tactics-panel__copy h3 { margin-top: .7rem; font: 800 clamp(2.6rem, 5vw, 4.8rem)/.86 var(--font-display); text-transform: uppercase; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; border: 1px solid var(--border-light); background: var(--border-light); }
.info-card { position: relative; min-height: 250px; padding: 1.7rem; background: var(--white); color: var(--graphite); transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s, background .25s; }
.info-card:hover { background: #f2ecdc; }
.info-card > span { color: #9d762b; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.info-card h3 { margin-top: 4.5rem; font: 800 1.65rem/1 var(--font-display); text-transform: uppercase; }
.info-card p { margin-top: .55rem; color: #696e76; font-size: .69rem; line-height: 1.55; }

.pathway-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; border: 1px solid var(--border-dark); }
.pathway-card { position: relative; min-height: 360px; padding: 1.6rem; overflow: hidden; border-right: 1px solid var(--border-dark); background: rgba(255,255,255,.018); }
.pathway-card:last-child { border-right: 0; }
.pathway-card::before { content: attr(data-step); position: absolute; right: -.3rem; bottom: -1.5rem; color: rgba(255,255,255,.035); font: 900 9rem/1 var(--font-display); }
.pathway-card > span { color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.pathway-card h3 { margin-top: 8rem; font: 800 1.8rem/1 var(--font-display); text-transform: uppercase; }
.pathway-card p { margin-top: 1rem; color: var(--muted-blue); font-size: .74rem; line-height: 1.7; }

.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.asset-card { min-height: 300px; display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid var(--border-dark); background: rgba(255,255,255,.02); transform: perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .18s, border-color .25s, background .25s; }
.asset-card:hover { border-color: rgba(240,198,106,.35); background: rgba(20,85,163,.15); }
.asset-card svg { width: 44px; height: 44px; fill: none; stroke: var(--gold); stroke-width: 1.3; }
.asset-card h3 { margin-top: auto; font: 800 1.7rem/1 var(--font-display); text-transform: uppercase; }
.asset-card p { margin-top: .8rem; color: var(--muted-blue); font-size: .72rem; line-height: 1.65; }

.faq-list { margin-top: 3rem; border-top: 1px solid var(--border-light); }
.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem 0; cursor: pointer; list-style: none; color: var(--royal-blue); font: 700 1.25rem/1.1 var(--font-display); text-transform: uppercase; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: #9d762b; font: 400 1.5rem/1 var(--font-body); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 760px; padding: 0 0 1.6rem; color: #5d636d; font-size: .8rem; line-height: 1.8; }

.page-cta { position: relative; overflow: hidden; background: var(--electric); }
.page-cta::before { content: ""; position: absolute; width: 680px; aspect-ratio: 1; right: -180px; top: -350px; border: 1px solid rgba(240,198,106,.2); border-radius: 50%; box-shadow: 0 0 0 80px rgba(240,198,106,.03), 0 0 0 160px rgba(240,198,106,.02); }
.page-cta__grid { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
.page-cta .display { max-width: 850px; }

@keyframes crest-glint {
  0%, 62% { transform: translateZ(50px) translateX(-95%); opacity: 0; }
  70% { opacity: .8; }
  84%, 100% { transform: translateZ(50px) translateX(105%); opacity: 0; }
}

@media (max-width: 1050px) {
  .subhero__grid { grid-template-columns: 1fr; }
  .subhero__copy { max-width: 680px; }
  .subhero__visual { right: -13vw; opacity: .45; }
  .info-grid, .asset-grid { grid-template-columns: repeat(2, 1fr); }
  .pathway-grid { grid-template-columns: repeat(2, 1fr); }
  .pathway-card:nth-child(2) { border-right: 0; }
  .pathway-card:nth-child(-n+2) { border-bottom: 1px solid var(--border-dark); }
}

@media (max-width: 780px) {
  body::after { display: none; }
  .page-transition::before { width: 85vw; }
  .page-transition::after { width: 55vw; }
  .subhero { min-height: 730px; height: 92svh; }
  .subhero__grid { padding-top: 70px; }
  .subhero__copy .display { font-size: clamp(4.3rem, 20vw, 6.5rem); }
  .subhero__copy > p:last-of-type { max-width: 90%; }
  .subhero__visual { width: 92vw; right: -33vw; opacity: .28; }
  .hero .hero-crest.crest-scene { width: 90vw; right: -29vw; top: 42%; opacity: .3; }
  .hero .hero-crest .crest-scene__orbit { opacity: .45; }
  .subhero__foot { inset-inline: var(--gutter); }
  .page-intro__grid, .editorial-grid { grid-template-columns: 1fr; }
  .page-intro__copy, .editorial-prose { grid-template-columns: 1fr; }
  .fact-ribbon__grid { grid-template-columns: 1fr 1fr; }
  .fact-ribbon__item:nth-child(2) { border-right: 0; }
  .fact-ribbon__item:nth-child(-n+2) { border-bottom: 1px solid var(--border-dark); }
  .info-grid, .asset-grid { grid-template-columns: 1fr; }
  .pathway-grid { grid-template-columns: 1fr; }
  .pathway-card, .pathway-card:nth-child(2) { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--border-dark); }
  .pathway-card:last-child { border-bottom: 0; }
  .pathway-card h3 { margin-top: 5rem; }
  .page-cta__grid { grid-template-columns: 1fr; align-items: start; }
  .tactics-panel { min-height: 490px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .crest-scene__stack, .asset-card, .info-card { transform: none !important; }
  .crest-scene__glint { display: none; }
  [data-parallax] { transform: none !important; }
}
