/* ==========================================================================
   PENSA 2027 — FX layer (maximalist, still on-brand)
   Everything is gated behind html.px-fx (added by JS after hydration) so SSR
   markup is never altered, and fully disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   0. Page curtain / route transition
   -------------------------------------------------------------------------- */
.fx-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #06483e 0%, #173a31 55%, #6b1534 140%);
  clip-path: inset(0 0 0 0);
  transition: clip-path .85s var(--fx-ease), opacity .5s ease .35s;
}
.fx-curtain .fx-curtain-mark {
  font-family: Sora, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .28em;
  font-size: clamp(.7rem, 1.6vw, .95rem);
  color: rgba(255, 253, 248, .92);
  text-transform: uppercase;
  animation: fxMarkIn .7s var(--fx-ease) both;
}
.fx-curtain .fx-curtain-mark span { color: #e3a51a; }
.fx-curtain.is-out { clip-path: inset(0 0 100% 0); opacity: 0; }
@keyframes fxMarkIn { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   1. Split-text headline reveal
   -------------------------------------------------------------------------- */
/* NOTE: never override display on split containers — they are block-level
   headings; forcing inline collapses the layout and overlaps siblings. */
html.px-fx .fx-word {
  display: inline-block;
  white-space: pre;
  transform: translate3d(0, 110%, 0) rotate(4deg);
  opacity: 0;
  transition:
    transform .95s var(--fx-ease),
    opacity .8s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
}
html.px-fx .fx-line { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.px-fx .fx-split.is-in .fx-word { transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   2. Hero: constellation canvas + parallax + gradient sweep
   -------------------------------------------------------------------------- */
.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease .2s;
}
.fx-canvas.is-on { opacity: .55; }

html.px-fx .ed-hero::before { animation-duration: 16s; }
html.px-fx .ed-hero::after { animation-duration: 20s; }

/* aurora sweep across the hero */
html.px-fx .ed-hero > .fx-aurora {
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(from 210deg at 30% 40%, rgba(11,102,85,.14), rgba(227,165,26,.12), rgba(107,21,52,.12), rgba(11,102,85,.14));
  filter: blur(70px);
  animation: fxSpin 46s linear infinite;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }

html.px-fx [data-fx-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   3. Magnetic + shine buttons
   -------------------------------------------------------------------------- */
html.px-fx .fx-magnet {
  transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease), background-color .3s ease, color .3s ease;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Card tilt + cursor spotlight
   -------------------------------------------------------------------------- */
html.px-fx .fx-tilt {
  transform-style: preserve-3d;
  position: relative;
  will-change: transform;
}
html.px-fx .fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(340px circle at var(--fx-x, 50%) var(--fx-y, 50%),
              rgba(242, 160, 0, .16), rgba(0, 106, 112, .08) 42%, transparent 68%);
}
html.px-fx .fx-tilt:hover::after { opacity: 1; }
html.px-fx .fx-tilt > * { transform: translateZ(0.01px); }

/* animated gradient border on hover for feature tiles */
html.px-fx .ed-topic { position: relative; overflow: hidden; }
html.px-fx .ed-topic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(242,160,0,.10) 50%, transparent 65%);
  background-size: 250% 100%;
  opacity: 0;
  transition: opacity .4s ease;
  animation: fxSheen 2.6s linear infinite;
}
html.px-fx .ed-topic:hover::before { opacity: 1; }
@keyframes fxSheen { from { background-position: 150% 0; } to { background-position: -80% 0; } }

/* --------------------------------------------------------------------------
   5. Section heading rule that draws itself in
   -------------------------------------------------------------------------- */
html.px-fx .ed-head { position: relative; }
html.px-fx .ed-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  height: 2px;
  width: 100%;
  max-width: 220px;
  background: linear-gradient(90deg, #6b1534, #0b6655 42%, #e3a51a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--fx-ease) .12s;
}
html.px-fx .ed-head.is-in::after { transform: scaleX(1); }

/* eyebrow gold shimmer */
html.px-fx .ed-eyebrow {
  background: linear-gradient(100deg, currentColor 30%, #e3a51a 48%, currentColor 66%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxSheen 5.5s linear infinite;
}

/* --------------------------------------------------------------------------
   6. Image reveal (clip wipe)
   -------------------------------------------------------------------------- */
html.px-fx .fx-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--fx-ease); }
html.px-fx .fx-wipe.is-in { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   7. Marquee theme ribbon
   -------------------------------------------------------------------------- */
.fx-ribbon {
  overflow: hidden;
  background: #06483e;
  color: #fff;
  border-block: 1px solid rgba(255,255,255,.08);
}
.fx-ribbon-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: fxMarquee 38s linear infinite;
}
.fx-ribbon:hover .fx-ribbon-track { animation-play-state: paused; }
.fx-ribbon span {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(.68rem, 1.4vw, .82rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 12px 26px;
  white-space: nowrap;
  opacity: .82;
}
.fx-ribbon span i { color: #e3a51a; font-style: normal; padding-inline: 4px; }
@keyframes fxMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* --------------------------------------------------------------------------
   8. Scroll-velocity skew on the main content
   -------------------------------------------------------------------------- */
html.px-fx main { will-change: transform; }

/* --------------------------------------------------------------------------
   9. Counters / stats flourish
   -------------------------------------------------------------------------- */
html.px-fx .ed-stat .num { display: inline-block; }
html.px-fx .ed-stat.is-in .num { animation: fxPop .8s var(--fx-spring) both; }
@keyframes fxPop { from { transform: translateY(10px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   10. Nav / header micro-motion
   -------------------------------------------------------------------------- */
html.px-fx .header.fixed-top { transition: transform .5s var(--fx-ease), background-color .35s ease, box-shadow .35s ease; }
html.px-fx body.fx-hide-header .header.fixed-top { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-curtain { display: none; }
  html.px-fx .fx-word { transform: none !important; opacity: 1 !important; }
  html.px-fx .fx-wipe { clip-path: none !important; }
  .fx-ribbon-track { animation: none !important; }
  .fx-canvas { display: none; }
  html.px-fx .ed-eyebrow { animation: none; }
}

/* --------------------------------------------------------------------------
   12. Per-page FX off-switch
   -------------------------------------------------------------------------- */
.fx-off .fx-word { transform: none !important; opacity: 1 !important; }
.fx-off .fx-wipe { clip-path: none !important; }
.fx-off .fx-tilt { transform: none !important; }
.fx-off .fx-tilt::after { display: none; }
.fx-off .ed-head::after { transform: scaleX(1) !important; }
.fx-off .ed-eyebrow { animation: none; }