/* ============================================================
   05 — AURORA EFFECTS
   The vibrance layer: gradient fields, glow, glass, depth.
   Everything here is decorative and degrades safely — no layout
   depends on it, and all of it collapses under reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   AURORA FIELD
   Slow-drifting coloured blobs behind a section. Uses transform
   only (compositor-friendly), never width/height.
   ------------------------------------------------------------ */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-canvas);
  /* Isolate painting so a blob repaint never invalidates page content. */
  contain: layout paint style;
}

.aurora__blob {
  position: absolute;
  width: clamp(20rem, 42vw, 40rem);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Blur is the single most expensive thing on this page. Each blob is a
     separate compositor layer the GPU re-rasterises, and cost scales with
     radius, so this is kept as low as the effect tolerates. */
  filter: blur(clamp(40px, 6vw, 80px));
  opacity: var(--blob-o, .5);
  animation: drift var(--blob-d, 26s) var(--e-inout) infinite alternate;
  animation-delay: var(--blob-delay, 0s);

  /* Paused by default. JS adds .is-live only while the field is on
     screen, so off-screen sections cost nothing. Without this, every
     blob on the page animates continuously from first paint. */
  animation-play-state: paused;
}

.aurora.is-live .aurora__blob {
  animation-play-state: running;
  will-change: transform;
}

.aurora__blob--violet { background: radial-gradient(circle, #A875FA 0%, rgba(168,117,250,0) 68%); }
.aurora__blob--pink   { background: radial-gradient(circle, #F472B6 0%, rgba(244,114,182,0) 68%); }
.aurora__blob--orange { background: radial-gradient(circle, #FB923C 0%, rgba(251,146,60,0) 68%); }
.aurora__blob--indigo { background: radial-gradient(circle, #7530DC 0%, rgba(117,48,220,0) 68%); }

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(6%, -8%, 0) scale(1.14); }
  100% { transform: translate3d(-7%, 6%, 0) scale(.92); }
}

/* Preset placements so a section only needs the markup, not styles */
.aurora__blob:nth-child(1) { top: -14%; left: -8%;  --blob-d: 24s; }
.aurora__blob:nth-child(2) { top: 24%;  right: -12%; --blob-d: 31s; --blob-delay: -6s; }
.aurora__blob:nth-child(3) { bottom: -18%; left: 26%; --blob-d: 27s; --blob-delay: -12s; }
/* A fourth blob was dropped: at this blur radius the third already
   fills the field, and each extra one is a full-screen GPU layer. */

[data-surface="dark"] .aurora__blob { --blob-o: .40; }

@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none; }
}

/* ------------------------------------------------------------
   GRADIENT TEXT
   ------------------------------------------------------------ */

/* Fallback first: engines without background-clip:text get solid colour
   and simply ignore the transparent fill below. Written as separate
   rules rather than nested @supports, which older engines drop. */
.grad-text { color: var(--accent); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-text {
    background: var(--grad-aurora);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.grad-text--dawn { background-image: var(--grad-dawn); }

/* Animated shimmer version — for the hero headline only */
.grad-text--live {
  background-size: 220% 100%;
  animation: grad-slide 9s var(--e-inout) infinite alternate;
}
@keyframes grad-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .grad-text--live { animation: none; }
}

/* ------------------------------------------------------------
   GLOW + GLASS
   ------------------------------------------------------------ */

.glow      { box-shadow: var(--glow-soft); }
.glow-ring { box-shadow: var(--glow-violet); }

.glass {
  background: color-mix(in srgb, var(--bg-raised) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Halo behind a focal element */
.halo { position: relative; isolation: isolate; }
.halo::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: var(--grad-halo);
  filter: blur(28px);
  opacity: .8;
  pointer-events: none;
  animation: halo-pulse 7s var(--e-inout) infinite alternate;
}
@keyframes halo-pulse {
  0%   { transform: scale(.9);  opacity: .55; }
  100% { transform: scale(1.08); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .halo::before { animation: none; } }

/* ------------------------------------------------------------
   GRADIENT BORDER
   Two-layer trick: gradient background, mask punches out centre.
   ------------------------------------------------------------ */

.grad-border {
  position: relative;
  border: 0;
  border-radius: var(--r-lg);
}
.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  transition: opacity var(--d-base) var(--e-out);
  pointer-events: none;
}
.grad-border:hover::before { opacity: 1; }

/* ------------------------------------------------------------
   3D TILT
   JS sets --rx/--ry from pointer position; CSS does the transform,
   so the main thread stays free.
   ------------------------------------------------------------ */

.tilt-scene { perspective: 1000px; }

.tilt {
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition: transform var(--d-slow) var(--e-out),
              box-shadow var(--d-slow) var(--e-out);
  will-change: transform;
}
.tilt.is-tilting { transition: transform 90ms linear; }

/* Children can float above the card plane */
.tilt__lift { transform: translateZ(var(--lift, 30px)); }

/* Specular sweep that follows the pointer */
.tilt__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,0) 55%);
  transition: opacity var(--d-base) var(--e-out);
}
.tilt:hover .tilt__sheen { opacity: 1; }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .tilt { transform: none !important; }
  .tilt__sheen { display: none; }
}

/* ------------------------------------------------------------
   FLOATING / BREATHING
   ------------------------------------------------------------ */

.float { animation: float var(--float-d, 7s) var(--e-inout) infinite alternate; }
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.breathe { animation: breathe 5.5s var(--e-inout) infinite alternate; }
@keyframes breathe {
  from { transform: scale(1);    opacity: .85; }
  to   { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .float, .breathe { animation: none; }
}

/* ------------------------------------------------------------
   COMPONENT UPLIFTS
   Vibrant treatments layered onto existing components.
   ------------------------------------------------------------ */

/* Cards lift and glow */
.card { transition: transform var(--d-base) var(--e-out); }
.card:hover { transform: translateY(-6px); }
.card__media {
  box-shadow: var(--sh-md);
  transition: box-shadow var(--d-slow) var(--e-out);
}
.card:hover .card__media { box-shadow: var(--glow-soft); }

/* The veil over card images becomes a colour wash */
.card__media::after {
  background: linear-gradient(to top,
    rgba(38,9,77,.42) 0%,
    rgba(117,48,220,.14) 45%,
    rgba(251,146,60,.10) 100%) !important;
}

/* Category cards: gradient ink panel instead of flat black */
.cat-card::before { background: var(--grad-dusk) !important; }
.cat-card {
  background: var(--bg-raised);
  box-shadow: var(--sh-sm);
  transition: border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.cat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--glow-soft);
}
.cat-card__glyph { color: var(--accent-warm); opacity: .38; }
.cat-card:hover .cat-card__glyph { opacity: .85; color: var(--c-orange-300); }
.cat-card:hover .cat-card__count { color: var(--c-orange-300); }

/* Buttons: gradient fill sweep */
.btn::before { background: var(--grad-aurora) !important; }
.btn--solid {
  background: var(--grad-dusk);
  border-color: transparent;
  color: var(--c-white);
  box-shadow: var(--sh-md);
}
.btn--solid:hover { box-shadow: var(--glow-violet); }
.btn--accent {
  background: var(--grad-dawn);
  border-color: transparent;
  color: var(--accent-warm-ink);
}
.btn--accent::before { background: var(--grad-dusk) !important; }
.btn--accent:hover { color: var(--c-white); }

/* Eyebrow rule becomes a gradient tick */
.eyebrow::before {
  background: var(--grad-aurora);
  height: 2px;
  border-radius: 2px;
}

/* Pull quotes get a gradient spine */
.pullquote,
.prose .is-style-antaratma-pullquote {
  border-left: 3px solid transparent !important;
  border-image: var(--grad-aurora) 1 !important;
}

/* Drop cap in gradient */
.prose > p:first-of-type::first-letter {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tags */
.tag:hover {
  background: var(--grad-aurora);
  border-color: transparent;
  color: var(--c-white);
}

/* Inputs glow on focus */
.input:focus, .textarea:focus, .select:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Active pagination pill */
.pagination .page-numbers.current {
  background: var(--grad-dusk);
  border-color: transparent;
  color: var(--c-white);
}

/* Reading progress bar in full aurora */
.progress__bar { background: var(--grad-aurora); height: 3px; }

/* Header glass */
.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Brand mark spins in colour */
.brand__mark { color: var(--accent); }
.brand:hover .brand__mark { color: var(--accent-warm); }

/* Menu overlay gets the dusk gradient */
.menu-overlay { background: var(--grad-dusk); }
.menu-overlay__link:hover { color: var(--c-orange-300); }

/* Footer: deep violet with an aurora wash */
.footer {
  background: var(--c-violet-950);
  position: relative;
  overflow: hidden;
}
.footer > * { position: relative; z-index: 1; }
.footer__watermark {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .14;
}

/* Section divider — a soft gradient rule */
.divider-glow {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  margin: 0;
}

/* Hero scroll cue */
.hero__scroll-line { background: var(--grad-aurora); width: 2px; border-radius: 2px; }

/* Observer + mind sections sit on gradient night */
.observer { background: linear-gradient(180deg, #16032E 0%, #26094D 50%, #16032E 100%); }
.mind     { background: linear-gradient(180deg, #16032E 0%, #1E0640 100%); }

/* Fragments in the mind section pick up colour */
/* Brighter than before: at 70% opacity on a deep violet field these
   were barely legible, which made them read as noise rather than words. */
.fragment { color: var(--c-violet-200); }
.fragment:nth-child(3n)   { color: var(--c-pink-300); }
.fragment:nth-child(4n+1) { color: var(--c-orange-300); }

/* Insight dots */
.insight__dot.is-active { background: var(--grad-aurora); }

/* Author avatar loses the greyscale, gains a gradient ring */
.author-box__avatar { filter: none; }
.author-box {
  background: var(--bg-raised);
  box-shadow: var(--sh-sm);
  border-color: transparent;
}

/* Newsletter block as a glowing card on dark surfaces */
[data-surface="dark"] .newsletter { position: relative; }

/* Featured media */
.featured__media { box-shadow: var(--sh-lg); }