/* ============================================================
   ELLOHOST — animations.css
   Scroll reveal, keyframes, transitions
   ============================================================ */

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-group.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-group.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-group.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-group.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-group.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }

/* Directional variants */
.reveal-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-right { opacity: 0; transform: translateX(30px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-scale { opacity: 0; transform: scale(0.9);        transition: opacity 0.6s ease, transform 0.6s ease; }

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

/* Delay helpers */
.delay-1 { transition-delay: 100ms !important; }
.delay-2 { transition-delay: 200ms !important; }
.delay-3 { transition-delay: 300ms !important; }
.delay-4 { transition-delay: 400ms !important; }
.delay-5 { transition-delay: 500ms !important; }
.delay-6 { transition-delay: 600ms !important; }

/* ---- GRADIENT TEXT ANIMATION ---- */
.gradient-text-animated {
  background: linear-gradient(270deg, var(--rose), var(--violet), var(--cyan), var(--rose));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- GLOW PULSE ---- */
.glow-rose {
  box-shadow: 0 0 20px rgba(255,62,138,0.3);
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,62,138,0.2); }
  50%       { box-shadow: 0 0 40px rgba(255,62,138,0.5); }
}

/* ---- FLOAT ANIMATION ---- */
.float-slow {
  animation: float-slow 8s ease-in-out infinite;
}
.float-medium {
  animation: float-slow 5s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* ---- SPIN SLOW ---- */
.spin-slow { animation: spin-slow 20s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---- SHIMMER (loading state) ---- */
.shimmer {
  background: linear-gradient(90deg,
    var(--card) 25%,
    var(--card2) 50%,
    var(--card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- COUNTER ANIMATION ---- */
.counter { transition: color 0.3s ease; }

/* ---- TYPE CURSOR ---- */
.type-cursor::after {
  content: '|';
  color: var(--rose);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---- PARTICLE CANVAS ---- */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- GRID BACKGROUND ---- */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- NOISE TEXTURE ---- */
.bg-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---- BORDER GLOW ---- */
.border-glow {
  position: relative;
}
.border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--rose), var(--violet));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   PREMIUM MOTION — Tilt, Magnet, Lift, Marquee, Glow Border, etc.
   ============================================================ */

/* ---- TILT-ON-HOVER (3D card) ---- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tilt-card:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-6px);
}

/* ---- LIFT (subtle hover) ---- */
.lift {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  will-change: transform;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(255, 62, 138, 0.18);
}

/* ---- MAGNETIC HOVER (pour CTAs) ---- */
.magnetic {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- ANIMATED GRADIENT BORDER ---- */
.gradient-border {
  position: relative;
  isolation: isolate;
  border-radius: inherit;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg),
    var(--rose), var(--violet), var(--cyan), var(--rose));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-conic 6s linear infinite;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-conic {
  to { --angle: 360deg; }
}

/* Fallback browsers without @property */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .gradient-border::before {
    background: linear-gradient(135deg, var(--rose), var(--violet));
    animation: none;
  }
}

/* ---- MARQUEE (scrolling logos / words) ---- */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
  animation: marquee-scroll 28s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- TEXT REVEAL (mask slide up) ---- */
.text-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.text-reveal > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.text-reveal.is-visible > span { transform: translateY(0); }

/* ---- COUNT-UP NUMBER ---- */
.count-up {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ---- SCROLL-DRIVEN SECTION FADE ---- */
@supports (animation-timeline: view()) {
  .scroll-fade {
    animation: scroll-fade-keys linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes scroll-fade-keys {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- RIPPLE on click (CTA) ---- */
.btn-primary, .btn-primary-lg, .btn-ghost, .btn-ghost-lg {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-primary-lg::after,
.btn-ghost::after, .btn-ghost-lg::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: translate(-50%, -50%) scale(0);
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  pointer-events: none;
  transition: transform 0.55s ease-out, opacity 0.55s ease-out;
  opacity: 0;
}
.btn-primary.is-rippling::after, .btn-primary-lg.is-rippling::after,
.btn-ghost.is-rippling::after, .btn-ghost-lg.is-rippling::after {
  transform: translate(-50%, -50%) scale(40);
  opacity: 1;
  transition: transform 0.65s ease-out, opacity 0.7s ease-out;
}

/* ---- SHIMMER TEXT (premium feeling) ---- */
.shimmer-text {
  background: linear-gradient(110deg,
    var(--white) 0%, var(--white) 40%,
    var(--rose) 50%,
    var(--white) 60%, var(--white) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text-keys 4s ease-in-out infinite;
}
@keyframes shimmer-text-keys {
  0%, 100% { background-position: 200% 0; }
  50%       { background-position: -100% 0; }
}

/* ---- ICON BOUNCE-IN (on reveal) ---- */
.bounce-in {
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}
.bounce-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- PARALLAX ORB (background floating circle) ---- */
.parallax-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: orb-drift 18s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.1); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

/* ---- UNDERLINE SLIDE (links) ---- */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--rose), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---- SECTION DIVIDER (animated gradient line) ---- */
.divider-anim {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--violet), transparent);
  background-size: 200% 100%;
  animation: divider-shift 6s ease infinite;
  border: none;
}
@keyframes divider-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ---- CARD HOVER GLOW (radial follow cursor) ---- */
.card-glow {
  position: relative;
  overflow: hidden;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 62, 138, 0.12), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

/* ---- ROTATE-IN ON SCROLL ---- */
.rotate-in {
  opacity: 0;
  transform: rotate(-6deg) translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rotate-in.is-visible {
  opacity: 1;
  transform: rotate(0) translateY(0);
}

/* ---- PREFER-REDUCED-MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}