/* =====================================================================
   ENHANCE.CSS  —  Wow-factor animation & interactivity layer
   Loaded after styles.css on every page. Purely additive: no existing
   rule is overridden destructively. All heavy motion is disabled under
   prefers-reduced-motion at the bottom of this file.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Page intro overlay (injected by enhance.js, removed on load)     */
/* ------------------------------------------------------------------ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #161019 0%, var(--black) 70%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#intro-overlay.intro-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.intro-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.intro-ring {
  width: 96px;
  height: 96px;
  position: relative;
  display: grid;
  place-items: center;
}
.intro-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-ring circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.intro-ring .ring-track { stroke: rgba(255, 31, 143, 0.15); }
.intro-ring .ring-arc {
  stroke: var(--pink);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  filter: drop-shadow(0 0 6px var(--pink-glow));
  animation: ring-spin 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.intro-ring .ring-z {
  position: absolute;
  font-weight: 900;
  font-size: 2.4rem;
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes ring-spin {
  0%   { stroke-dashoffset: 283; transform: rotate(0deg); }
  50%  { stroke-dashoffset: 70; }
  100% { stroke-dashoffset: 283; transform: rotate(360deg); }
}
.intro-word {
  font-weight: 900;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: 1rem;
  color: var(--white);
  opacity: 0;
  animation: intro-word 0.8s 0.15s ease forwards;
}
.intro-sub {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--pink-soft);
  opacity: 0;
  animation: intro-word 0.8s 0.35s ease forwards;
}
@keyframes intro-word {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.95; transform: translateY(0); }
}

/* ------------------------------------------------------------------ */
/* 2. Hero aurora — drifting mesh-gradient blobs behind hero content   */
/* ------------------------------------------------------------------ */
.hero { isolation: isolate; }
.hero-aurora {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -3;
  pointer-events: none;
  filter: blur(60px) saturate(1.1);
  opacity: 0.85;
}
.hero-aurora span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-aurora .a1 {
  width: 42vw; height: 42vw; left: 4%; top: 8%;
  background: radial-gradient(circle, rgba(255,31,143,0.55), transparent 65%);
  animation: aurora-1 16s ease-in-out infinite;
}
.hero-aurora .a2 {
  width: 36vw; height: 36vw; right: 6%; top: 18%;
  background: radial-gradient(circle, rgba(180,60,255,0.40), transparent 65%);
  animation: aurora-2 20s ease-in-out infinite;
}
.hero-aurora .a3 {
  width: 30vw; height: 30vw; left: 38%; bottom: 2%;
  background: radial-gradient(circle, rgba(255,120,180,0.38), transparent 65%);
  animation: aurora-3 24s ease-in-out infinite;
}
@keyframes aurora-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.15); } }
@keyframes aurora-2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-7%, 9%) scale(0.92); } }
@keyframes aurora-3 { 0%,100% { transform: translate(0,0) scale(0.95); } 50% { transform: translate(5%, -8%) scale(1.12); } }

/* Floating particle canvas in hero */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 3. Animated underline for nav links                                 */
/* ------------------------------------------------------------------ */
.nav-links a::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--pink-soft));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::before,
.nav-links a.active::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ------------------------------------------------------------------ */
/* 4. Cursor spotlight glow + 3D tilt for cards                        */
/*    (.fx-spot / .fx-tilt / .fx-glow applied by enhance.js)           */
/* ------------------------------------------------------------------ */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot .fx-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 31, 143, 0.22),
    transparent 62%
  );
}
.fx-spot:hover .fx-glow { opacity: 1; }

.fx-tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ------------------------------------------------------------------ */
/* 5. Reveal polish — add a soft blur-clear to the existing reveal     */
/* ------------------------------------------------------------------ */
.reveal { filter: blur(6px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s ease; }
.reveal.in-view { filter: blur(0); }

/* Optional directional reveals (opt-in via data-reveal attribute) */
[data-reveal] { opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); will-change: transform, opacity; }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 6. Person photo — shine sweep + slow zoom on hover                  */
/* ------------------------------------------------------------------ */
.person-card .person-photo { position: relative; }
.person-card .person-photo img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.person-card:hover .person-photo img { transform: scale(1.07); }
.person-card .person-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.person-card:hover .person-photo::after { transform: translateX(130%); }

/* ------------------------------------------------------------------ */
/* 7. Living gradient border for featured + CTA blocks                 */
/* ------------------------------------------------------------------ */
.featured-blog, .cta-big { position: relative; }
.featured-blog::after, .cta-big::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--pink), transparent 35%, transparent 65%, var(--pink-soft));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: border-flow 8s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* CTA primary button: gentle attention glow */
.cta-big .btn-primary, .btn-big {
  animation: cta-pulse 2.8s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(255, 31, 143, 0.35); }
  50%      { box-shadow: 0 8px 44px rgba(255, 31, 143, 0.65); }
}

/* ------------------------------------------------------------------ */
/* 8. Back-to-top button with scroll-progress ring (injected by JS)    */
/* ------------------------------------------------------------------ */
#to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 52px;
  height: 52px;
  z-index: 90;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(20, 20, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#to-top:hover { transform: translateY(-3px) scale(1.06); }
#to-top svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
#to-top .ring circle { fill: none; stroke-width: 3; }
#to-top .ring .tt-track { stroke: rgba(255, 31, 143, 0.18); }
#to-top .ring .tt-arc {
  stroke: var(--pink);
  stroke-linecap: round;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  filter: drop-shadow(0 0 4px var(--pink-glow));
  transition: stroke-dashoffset 0.1s linear;
}
#to-top .tt-arrow { font-size: 1.1rem; line-height: 1; transform: translateY(-1px); }

/* ------------------------------------------------------------------ */
/* 9. Marquee gets a subtle hue shimmer                                */
/* ------------------------------------------------------------------ */
.marquee-track span { transition: color 0.3s; }
.marquee:hover .marquee-track span { color: var(--pink-soft); }

/* ------------------------------------------------------------------ */
/* 11. Real Zebros logo — navbar emblem, footer mark, hero badge       */
/* ------------------------------------------------------------------ */
.nav-brand .logo-svg { object-fit: contain; }
.footer .footer-logo img.footer-logo-img {
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 9px var(--pink-glow));
}

.hero-badge {
  display: block;
  width: clamp(104px, 14vw, 158px);
  height: auto;
  margin: 0 0 1.4rem;
  filter: drop-shadow(0 8px 30px rgba(255, 31, 143, 0.5));
  animation: badge-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
             badge-float 5s ease-in-out 0.9s infinite;
}
@keyframes badge-in {
  from { opacity: 0; transform: translateY(20px) scale(0.82) rotate(-9deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-11px) rotate(2.5deg); }
}

/* Weekly featured post — highlight list */
.featured-highlights {
  list-style: none;
  margin: 0.4rem 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.featured-highlights li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.featured-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  box-shadow: 0 0 8px var(--pink-glow);
}
.featured-highlights li strong { color: var(--white); font-weight: 700; }

/* Fix: when an .accent gradient word is also a .word-reveal, the text lives
   in a transformed inner <span>, so background-clip:text on the outer element
   never paints onto the glyphs (they render transparent). Re-apply the clip on
   the inner span so the gradient fill shows. */
.accent.word-reveal > span {
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ------------------------------------------------------------------ */
/* 10. Accessibility — respect reduced-motion                          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora .a1, .hero-aurora .a2, .hero-aurora .a3,
  .intro-ring .ring-arc, .featured-blog::after, .cta-big::after,
  .cta-big .btn-primary, .btn-big { animation: none !important; }
  .reveal { filter: none; }
  .hero-particles { display: none; }
  .fx-tilt { transform: none !important; }
  .hero-badge { animation: badge-in 0.01s both; }
  #intro-overlay { display: none; }
}