/* Frontiers Quantum — premium motion layer (progressive enhancement) */
:root {
  --fq-progress: 0;
  --fq-orbit-shift: 0px;
  --fq-scene-warm: 255, 135, 61;
  --fq-scene-cool: 88, 217, 232;
  --fq-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* A very thin, branded scroll signal instead of a conventional progress bar. */
.fq-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: rgba(255, 135, 61, .10);
}
.fq-scroll-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--fq-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, #ff6a26 0%, #ffb45e 44%, #58d9e8 100%);
  box-shadow: 0 0 14px rgba(255, 135, 61, .6), 0 0 22px rgba(88, 217, 232, .2);
  will-change: transform;
}

/* The header tightens and the logo breathes as the page moves. */
.site-header { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-header.is-scrolled {
  background: rgba(7, 12, 26, .94);
  border-bottom-color: rgba(255, 135, 61, .24);
  box-shadow: 0 10px 34px rgba(6, 14, 31, .20);
}
.site-header.is-scrolled .nav-shell { height: 70px; }
.brand-mark-wrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 55px;
  height: 36px;
  isolation: isolate;
}
.brand-mark-wrap > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: fq-logo-breathe 5.8s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 125, 45, .17));
}
.brand-mark-wrap .fq-logo-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: .84;
  mix-blend-mode: screen;
}
.fq-logo-trace path {
  fill: none;
  stroke: url(#fq-logo-gradient);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 18 340;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(255, 140, 45, .9));
  animation: fq-logo-run 4.5s linear infinite;
}

/* Every section gets an energy field that subtly drifts with the scroll position. */
.fq-motion-scene {
  overflow-x: clip;
  --fq-progress-local: .5;
  --fq-shift-y: 0px;
  --fq-shift-x: 0px;
  position: relative;
  isolation: isolate;
  scroll-margin-top: 82px;
}
.fq-ambient-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  opacity: .18;
  background-image: linear-gradient(rgba(88, 217, 232, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 217, 232, .10) 1px, transparent 1px);
  background-size: 66px 66px;
  background-position: var(--fq-shift-x, 0px) var(--fq-shift-y, 0px);
  mask-image: radial-gradient(ellipse at 72% 45%, #000 0%, rgba(0,0,0,.8) 34%, transparent 74%);
  will-change: background-position;
}
.fq-motion-scene.is-in-view .fq-ambient-field { opacity: .29; }
.fq-motion-scene.section-light .fq-ambient-field { opacity: .055; }
.fq-motion-scene.section-light.is-in-view .fq-ambient-field { opacity: .09; }
.fq-ambient-field::before,
.fq-ambient-field::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1;
  filter: blur(clamp(30px, 5vw, 82px));
  transform: translate3d(0, var(--fq-shift-y), 0);
  will-change: transform;
}
.fq-ambient-field::before {
  width: clamp(280px, 48vw, 760px);
  right: clamp(-240px, -10vw, -80px);
  top: calc(-12% + var(--fq-shift-y));
  background: radial-gradient(circle, rgba(var(--fq-scene-warm), .19) 0%, rgba(var(--fq-scene-warm), .07) 36%, transparent 70%);
  opacity: .82;
}
.fq-ambient-field::after {
  width: clamp(220px, 38vw, 620px);
  left: clamp(-220px, -9vw, -70px);
  bottom: calc(-30% - var(--fq-shift-y));
  background: radial-gradient(circle, rgba(var(--fq-scene-cool), .15) 0%, rgba(var(--fq-scene-cool), .045) 39%, transparent 72%);
  opacity: .68;
}
.fq-motion-scene.section-light .fq-ambient-field::before,
.fq-motion-scene.section-light .fq-ambient-field::after {
  opacity: .32;
  filter: blur(clamp(38px, 6vw, 92px));
}
.fq-motion-scene.is-in-view .fq-ambient-field::before { animation: fq-field-breathe 9s ease-in-out infinite alternate; }
.fq-motion-scene.is-in-view .fq-ambient-field::after { animation: fq-field-breathe 12s ease-in-out infinite alternate-reverse; }

/* Oversized infinity engravings act like a recurring brand signature between chapters. */
.fq-section-motif {
  position: absolute;
  z-index: -1;
  right: -5.5%;
  top: -8%;
  width: min(66%, 900px);
  height: 112%;
  min-height: 280px;
  pointer-events: none;
  overflow: visible;
  opacity: .16;
  overflow: hidden;
  transform: translate3d(var(--fq-shift-x), calc(var(--fq-shift-y) * -.72), 0) rotate(calc((var(--fq-progress-local) - .5) * 7deg));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: opacity .5s ease;
}
.fq-motion-scene.section-light .fq-section-motif { opacity: .055; }
.fq-motion-scene.is-in-view .fq-section-motif { opacity: .20; }
.fq-motion-scene.section-light.is-in-view .fq-section-motif { opacity: .075; }
.fq-section-motif .fq-motif-track {
  fill: none;
  stroke: url(#fq-motif-gradient);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 8 17;
  animation: fq-motif-flow 16s linear infinite;
}
.fq-section-motif .fq-motif-orbit {
  fill: none;
  stroke: rgba(88, 217, 232, .48);
  stroke-width: .7;
  stroke-dasharray: 2 12;
  transform-origin: 400px 190px;
  animation: fq-orbit-turn 70s linear infinite;
}
.fq-motion-scene:not(.is-in-view) .fq-section-motif .fq-motif-track,
.fq-motion-scene:not(.is-in-view) .fq-section-motif .fq-motif-orbit { animation-play-state: paused; }

/* Large, path-traced infinity symbol in cinematic hero art. */
.fq-hero-infinity {
  position: absolute;
  z-index: 1;
  inset: 2% -7% 0;
  width: 114%;
  height: 95%;
  overflow: visible;
  pointer-events: none;
  opacity: .66;
  mix-blend-mode: screen;
  transform: translate3d(0, var(--fq-art-drift, 0px), 0) rotate(var(--fq-art-tilt, 0deg));
  transform-origin: center;
  will-change: transform;
}
.fq-hero-infinity .fq-hero-halo {
  fill: none;
  stroke: rgba(255, 137, 59, .18);
  stroke-width: 15;
  filter: blur(7px);
}
.fq-hero-infinity .fq-hero-path {
  fill: none;
  stroke: url(#fq-hero-gradient);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-dasharray: 7 14;
  filter: drop-shadow(0 0 5px rgba(255, 133, 52, .88));
  animation: fq-hero-trace 10s linear infinite;
}
.fq-hero-infinity .fq-hero-pulse {
  opacity: .96;
  fill: #fff2cb;
  filter: drop-shadow(0 0 4px #ffad54) drop-shadow(0 0 11px rgba(255, 129, 45, .8));
}
.fq-hero-infinity .fq-hero-pulse--cool { fill: #8cf5ff; filter: drop-shadow(0 0 4px #58d9e8) drop-shadow(0 0 11px rgba(88, 217, 232, .8)); }
.fq-hero-infinity .fq-hero-path--cool {
  stroke: rgba(88, 217, 232, .8);
  stroke-width: .8;
  stroke-dasharray: 3 22;
  animation-duration: 17s;
  animation-direction: reverse;
}
.hero-visual .fq-hero-infinity { inset: 8% -11% 5%; width: 122%; height: 88%; opacity: .72; }
.inner-hero-art .fq-hero-infinity { inset: 2% -7%; width: 114%; height: 96%; opacity: .42; z-index: 1; }

/* Scroll-scrubbed content reveals: directions alternate for a layered editorial rhythm. */
.fq-scroll-reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 32px, 0) scale(.985);
  transition: opacity .86s var(--fq-motion-ease), transform .9s var(--fq-motion-ease), filter .86s ease;
  transition-delay: var(--fq-reveal-delay, 0ms);
  backface-visibility: hidden;
}
.fq-scroll-reveal[data-fq-motion="left"] { transform: translate3d(-46px, 15px, 0) rotateY(3deg); }
.fq-scroll-reveal[data-fq-motion="right"] { transform: translate3d(46px, 15px, 0) rotateY(-3deg); }
.fq-scroll-reveal[data-fq-motion="scale"] { transform: translate3d(0, 10px, 0) scale(.94); }
.fq-scroll-reveal.is-visible { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotateY(0) scale(1); }

/* Subtle cursor depth for high-end pointer devices; no tilt on touch screens. */
.fq-tilt-card {
  transform-style: preserve-3d;
  transition: transform .24s var(--fq-motion-ease), box-shadow .35s ease, border-color .35s ease;
}
.fq-tilt-card.fq-tilting {
  transform: perspective(1100px) rotateX(var(--fq-tilt-x, 0deg)) rotateY(var(--fq-tilt-y, 0deg)) translateY(-3px);
}
.fq-tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--fq-card-x, 50%) var(--fq-card-y, 50%), rgba(255, 161, 99, .105), transparent 67%);
  transition: opacity .25s ease;
}
.fq-tilt-card.fq-tilting::after { opacity: 1; }

/* CTA hover response uses a small magnetic offset, not an exaggerated jump. */
.fq-magnetic {
  transform: translate3d(var(--fq-mag-x, 0px), var(--fq-mag-y, 0px), 0);
  transition: transform .28s var(--fq-motion-ease), box-shadow .3s ease, background .3s ease;
  will-change: transform;
}

/* Small route-change/first-paint polish without delaying interaction. */
body.fq-page-ready main { animation: fq-page-arrive .8s var(--fq-motion-ease) both; }
.nav-link[aria-current="page"] { color: #ed7739; }
.nav-link[aria-current="page"]::after { width: 100%; }

@keyframes fq-logo-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 125, 45, .16)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 7px rgba(255, 125, 45, .48)); }
}
@keyframes fq-logo-run { to { stroke-dashoffset: -358; } }
@keyframes fq-motif-flow { to { stroke-dashoffset: -430; } }
@keyframes fq-orbit-turn { to { transform: rotate(360deg); } }
@keyframes fq-hero-trace { to { stroke-dashoffset: -840; } }
@keyframes fq-field-breathe { 0% { scale: 1; opacity: .65; } 100% { scale: 1.11; opacity: 1; } }
@keyframes fq-page-arrive { from { opacity: .76; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

html, body { overflow-x: clip; }

@media (max-width: 780px) {
  .brand-mark-wrap { width: 44px; height: 29px; }
  .site-header.is-scrolled .nav-shell { height: 64px; }
  .fq-section-motif { width: 88%; right: -22%; top: -2%; opacity: .07; }
  .fq-motion-scene.section-light .fq-section-motif { opacity: .04; }
  .fq-hero-infinity { opacity: .26; }
  .hero-visual .fq-hero-infinity { inset: 7% -13% 0; width: 125%; height: 89%; opacity: .4; }
  .inner-hero-art .fq-hero-infinity { opacity: .27; }
  .fq-scroll-reveal[data-fq-motion="left"], .fq-scroll-reveal[data-fq-motion="right"] { transform: translate3d(0, 26px, 0) scale(.99); }
}
@media (hover: none), (pointer: coarse) {
  .fq-tilt-card, .fq-tilt-card.fq-tilting { transform: none !important; }
  .fq-tilt-card::after { display: none; }
  .fq-magnetic { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-scroll-progress__fill { box-shadow: none; }
  .fq-ambient-field { background-position: center center !important; }
  .fq-ambient-field::before { top: -12% !important; transform: none !important; }
  .fq-ambient-field::after { bottom: -30% !important; transform: none !important; }
  .brand-mark-wrap > img, .fq-logo-trace path, .fq-section-motif .fq-motif-track,
  .fq-section-motif .fq-motif-orbit, .fq-hero-infinity .fq-hero-path,
  .fq-ambient-field::before, .fq-ambient-field::after { animation: none !important; }
  .fq-scroll-reveal { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .fq-hero-infinity, .fq-section-motif { transform: none !important; }
  body.fq-page-ready main { animation: none !important; }
  .fq-tilt-card, .fq-tilt-card.fq-tilting, .fq-magnetic { transform: none !important; transition: none !important; }
}