/* ============================================================
   COSMIC PORTFOLIO — ANIMATIONS
   animations.css
   Every keyframe is a journey through the cosmos.
   ============================================================ */

/* ============================================================
   KEYFRAME DEFINITIONS
   ============================================================ */

/* Logo slow spin */
@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Badge pulse (the WIP indicator) */
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Gentle float — used on hero text, shapes, cards */
@keyframes cosmicFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(1.5deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

/* Float reverse */
@keyframes cosmicFloatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(10px) rotate(-1deg); }
  66%       { transform: translateY(4px) rotate(1.2deg); }
}

/* Slow drift (for background geometry) */
@keyframes cosmicDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(30px, -20px) rotate(45deg) scale(1.05); }
  50%  { transform: translate(60px, 10px) rotate(90deg) scale(0.97); }
  75%  { transform: translate(20px, 30px) rotate(135deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(180deg) scale(1); }
}

/* Sacred geometry slow spin */
@keyframes sacredSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reverse sacred spin */
@keyframes sacredSpinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* Pulse glow */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; filter: blur(0px); }
  50%       { opacity: 1;   filter: blur(1px); }
}

/* Nebula breathe — large background shapes */
@keyframes nebulaBreathe {
  0%, 100% { transform: scale(1) translateX(0); opacity: 0.15; }
  40%       { transform: scale(1.08) translateX(20px); opacity: 0.22; }
  70%       { transform: scale(0.95) translateX(-15px); opacity: 0.12; }
}

/* Star twinkle (handled on canvas but also used for CSS stars) */
@keyframes twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(0.5); }
}

/* Shimmer — used on hero headline */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Slide up fade in — page entry animation */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Expand line — underline reveal */
@keyframes expandLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* Card entrance stagger helper */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Orbit — small dots orbiting a center */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* Hexagon morph */
@keyframes hexPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.07; }
  50%       { transform: scale(1.1) rotate(30deg); opacity: 0.13; }
}

/* Warp tunnel effect on hover states */
@keyframes warpFlare {
  0%   { transform: scaleX(0); opacity: 0.7; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Nav glow on scroll */
@keyframes navGlow {
  0%, 100% { box-shadow: 0 1px 0 rgba(92, 31, 168, 0.2); }
  50%       { box-shadow: 0 1px 0 rgba(92, 31, 168, 0.45),
                          0 0 30px rgba(92, 31, 168, 0.08); }
}

/* Social icon hover pop */
@keyframes iconPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-10deg); }
  70%  { transform: scale(0.95) rotate(5deg); }
  100% { transform: scale(1.1) rotate(0deg); }
}

/* Store product reveal */
@keyframes productReveal {
  from { opacity: 0; transform: translateY(20px) rotateX(8deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* Scan line on video frames */
@keyframes scanLine {
  0%   { top: -5%; opacity: 0.5; }
  100% { top: 105%; opacity: 0; }
}

/* ============================================================
   GEOMETRIC BACKGROUND SHAPES
   These are SVG/CSS shapes placed in the background of pages.
   ============================================================ */

/* Hexagon shape */
.geo-hex {
  position: absolute;
  width: 200px;
  height: 200px;
  background: transparent;
  border: 1px solid rgba(92, 31, 168, 0.15);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: hexPulse 8s ease-in-out infinite;
  pointer-events: none;
}

.geo-hex-lg {
  width: 400px;
  height: 400px;
  animation-duration: 14s;
}

.geo-hex-sm {
  width: 100px;
  height: 100px;
  animation-duration: 6s;
}

/* Triangle */
.geo-tri {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 140px solid rgba(0, 201, 177, 0.05);
  animation: cosmicFloat 10s ease-in-out infinite;
  pointer-events: none;
}

/* Sacred circle (flower of life partial) */
.geo-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(92, 31, 168, 0.12);
  animation: sacredSpin 30s linear infinite;
  pointer-events: none;
}

.geo-circle::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(0, 201, 177, 0.08);
  animation: sacredSpinReverse 20s linear infinite;
}

.geo-circle::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1px solid rgba(92, 31, 168, 0.1);
  animation: sacredSpin 12s linear infinite;
}

/* ============================================================
   PAGE ENTRANCE ANIMATIONS
   Apply via JS by adding .animate-in class
   ============================================================ */
.animate-in {
  animation: slideUpFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade {
  animation: fadeIn 0.8s ease both;
}

/* Stagger delays for grid items */
.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.12s; }
.stagger-3  { animation-delay: 0.19s; }
.stagger-4  { animation-delay: 0.26s; }
.stagger-5  { animation-delay: 0.33s; }
.stagger-6  { animation-delay: 0.40s; }
.stagger-7  { animation-delay: 0.47s; }
.stagger-8  { animation-delay: 0.54s; }

/* ============================================================
   HERO SHIMMER HEADLINE
   ============================================================ */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--star-white) 0%,
    var(--aurora-teal) 25%,
    var(--nebula-purple) 50%,
    var(--aurora-teal) 75%,
    var(--star-white) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}

/* ============================================================
   FLOATING GEOMETRY — HOME HERO
   Each .float-shape has its own timing
   ============================================================ */
.float-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.float-shape.hex-a {
  top: 15%;
  right: 8%;
  width: 160px;
  height: 160px;
  opacity: 0.08;
  border: 1px solid var(--aurora-teal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: cosmicFloat 12s ease-in-out infinite, sacredSpin 40s linear infinite;
}

.float-shape.hex-b {
  top: 60%;
  left: 5%;
  width: 100px;
  height: 100px;
  opacity: 0.06;
  border: 1px solid var(--nebula-purple);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: cosmicFloatReverse 9s ease-in-out infinite, sacredSpinReverse 25s linear infinite;
}

.float-shape.tri-a {
  top: 30%;
  left: 3%;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 87px solid rgba(0, 201, 177, 0.06);
  animation: cosmicFloat 15s ease-in-out infinite;
}

.float-shape.tri-b {
  bottom: 20%;
  right: 12%;
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 61px solid rgba(92, 31, 168, 0.07);
  animation: cosmicFloatReverse 11s ease-in-out infinite;
}

.float-shape.circle-a {
  top: 10%;
  left: 15%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(92, 31, 168, 0.08);
  animation: sacredSpin 60s linear infinite;
}

.float-shape.circle-a::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(0, 201, 177, 0.06);
  animation: sacredSpinReverse 40s linear infinite;
}

.float-shape.circle-b {
  bottom: 5%;
  right: 20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(92, 31, 168, 0.06);
  animation: sacredSpinReverse 45s linear infinite;
}

/* ============================================================
   NEBULA BLOBS (large, blurred, atmospheric)
   ============================================================ */
.nebula-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  animation: nebulaBreathe 18s ease-in-out infinite;
}

.nebula-blob-1 {
  width: 600px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: radial-gradient(
    ellipse,
    rgba(92, 31, 168, 0.25) 0%,
    rgba(13, 27, 75, 0.1) 60%,
    transparent 100%
  );
  animation-delay: 0s;
}

.nebula-blob-2 {
  width: 500px;
  height: 600px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(
    ellipse,
    rgba(0, 201, 177, 0.15) 0%,
    rgba(13, 27, 75, 0.08) 60%,
    transparent 100%
  );
  animation-delay: -6s;
}

.nebula-blob-3 {
  width: 400px;
  height: 400px;
  top: 40%;
  left: 35%;
  background: radial-gradient(
    ellipse,
    rgba(155, 31, 168, 0.12) 0%,
    transparent 70%
  );
  animation-delay: -12s;
}

/* ============================================================
   GALLERY ANIMATIONS
   ============================================================ */
.gallery-card-image {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .gallery-card-image {
  transform: scale(1.05);
}

/* ============================================================
   VIDEO SCAN LINE EFFECT
   ============================================================ */
.video-frame {
  position: relative;
  overflow: hidden;
}

.video-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 201, 177, 0.4),
    transparent
  );
  animation: scanLine 4s linear infinite;
  pointer-events: none;
}

/* ============================================================
   PARTICLE CONTAINER CANVAS
   ============================================================ */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--void-black);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   SOCIAL ICON ANIMATIONS
   ============================================================ */
.social-card-icon {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.social-card:hover .social-card-icon {
  animation: iconPop 0.5s ease forwards;
}

/* ============================================================
   STORE PRODUCT ANIMATIONS
   ============================================================ */
.product-card {
  animation: productReveal 0.6s ease both;
}

/* ============================================================
   JOURNAL ENTRY REVEAL
   ============================================================ */
.journal-entry {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.journal-entry:hover {
  border-color: rgba(0, 201, 177, 0.3) !important;
  box-shadow: 0 4px 30px rgba(0, 201, 177, 0.06);
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: cosmicFloat 3s ease-in-out infinite;
}

.scroll-indicator-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--aurora-teal), transparent);
  animation: expandLine 2s ease-in-out infinite;
  transform-origin: top;
}

.scroll-indicator-text {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(0, 201, 177, 0.5);
  font-family: var(--font-heading);
}

/* ============================================================
   CONSTELLATION LINE (connects nav dots visually)
   ============================================================ */
.constellation-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aurora-teal);
  display: inline-block;
  animation: twinkle 3s ease-in-out infinite;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--void-black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-ring {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(92, 31, 168, 0.2);
  border-top-color: var(--aurora-teal);
  border-right-color: var(--nebula-purple);
  border-radius: 50%;
  animation: sacredSpin 1.2s linear infinite;
}

.preloader-text {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(232, 232, 255, 0.4);
  animation: glowPulse 2s ease-in-out infinite;
}