/* ============================================================
   PIVOT POWER — Animations
   Icon breath, rotation, watermarks, entrance animations.
   Import this after global.css on every page.
   ============================================================ */

/* ── KEYFRAMES ── */

@keyframes slowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes slowSpinCenter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes breatheIn {
  0%   { opacity: 0; }
  40%  { opacity: 0.18; }
  60%  { opacity: 0.18; }
  100% { opacity: 0; }
}

@keyframes breatheOut {
  0%   { opacity: 0.18; }
  40%  { opacity: 0; }
  60%  { opacity: 0; }
  100% { opacity: 0.18; }
}

@keyframes floatUp {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px) rotate(var(--spin-deg, 0deg)); }
  50%       { transform: translate(-50%, -50%) translateY(-18px) rotate(var(--spin-deg, 0deg)); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.05; }
  50%       { opacity: 0.12; }
}

/* ── HERO ICON SYSTEM ── */
/* Add .hero-icon-wrap to the hero section, it handles everything */

.hero-icon-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Base layer — gold outline, slow rotation */
.hero-icon-base {
  position: absolute;
  top: 50%; left: 55%;
  width: min(700px, 90vw);
  height: min(700px, 90vw);
  transform: translate(-50%, -50%);
  animation: slowSpin 90s linear infinite;
  will-change: transform;
}

.hero-icon-base img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* Breath layer — negative space, crossfading */
.hero-icon-breath {
  position: absolute;
  top: 50%; left: 55%;
  width: min(700px, 90vw);
  height: min(700px, 90vw);
  transform: translate(-50%, -50%);
  animation: slowSpin 90s linear infinite;
  will-change: transform, opacity;
}

.hero-icon-breath img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* Outline breathes out as negative breathes in */
.hero-icon-breath .breath-outline {
  opacity: 0.18;
  animation: breatheOut 8s ease-in-out infinite;
}

.hero-icon-breath .breath-negative {
  opacity: 0;
  animation: breatheIn 8s ease-in-out infinite;
}

/* ── SECTION WATERMARKS ── */
/* Add .section-watermark to any section for a ghosted icon */

.section-watermark {
  position: relative;
  overflow: hidden;
}

.section-watermark::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: url('/assets/icons/icon-gold-outline.png') center/contain no-repeat;
  pointer-events: none;
  animation: pulseGlow 10s ease-in-out infinite;
  opacity: 0.04;
}

/* Position variants */
.watermark-right::after {
  top: 50%; right: -120px;
  transform: translateY(-50%);
}

.watermark-left::after {
  top: 50%; left: -120px;
  transform: translateY(-50%);
}

.watermark-bottom-right::after {
  bottom: -100px; right: -80px;
  top: auto;
  transform: none;
}

.watermark-bottom-left::after {
  bottom: -100px; left: -80px;
  top: auto;
  transform: none;
}

/* ── FEATURED ICON (standalone breathing mark) ── */
/* Used as a decorative element between sections */

.icon-breath-feature {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto;
  flex-shrink: 0;
}

.icon-breath-feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: slowSpinCenter 60s linear infinite;
}

.icon-breath-feature .feat-outline {
  animation: slowSpinCenter 60s linear infinite,
             breatheOut 6s ease-in-out infinite;
}

.icon-breath-feature .feat-negative {
  mix-blend-mode: screen;
  animation: slowSpinCenter 60s linear infinite,
             breatheIn 6s ease-in-out infinite;
}

/* ── SCROLL ENTRANCE ANIMATIONS ── */
/* Upgrade the existing .reveal system with directional variants */

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers */
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── NAV ICON SPIN on hover ── */
.nav-logo img {
  transition: filter 0.3s, transform 0.3s;
}
.nav-logo:hover img {
  filter: brightness(1.15);
}

/* ── CTA BAND ICON ── */
.cta-band-icon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-band-icon img {
  position: absolute;
  top: 50%; left: 50%;
  width: 480px; height: 480px;
  transform: translate(-50%, -50%);
  opacity: 0.04;
  mix-blend-mode: screen;
  animation: slowSpin 120s linear infinite;
}

/* ── PERFORMANCE ── */
/* Disable heavy animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-icon-base,
  .hero-icon-breath,
  .hero-icon-breath .breath-outline,
  .hero-icon-breath .breath-negative,
  .icon-breath-feature img,
  .cta-band-icon img {
    animation: none !important;
  }

  .hero-icon-breath .breath-outline { opacity: 0.12; }
  .hero-icon-breath .breath-negative { opacity: 0; }
}