/* ============================================================
   AESTHETICA MED SPA — Animations CSS
   Keyframes · Scroll-Triggered Classes · Micro-Interactions
   ============================================================ */

/* ══════════════════════════════════════
   ENTRANCE ANIMATION BASE STATES
   Applied via JS IntersectionObserver
   ══════════════════════════════════════ */
.fade-up,
.fade-left,
.fade-right,
.fade-down,
.scale-in,
.blur-in,
.fade-in {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.75s;
}

.fade-up    { transform: translateY(44px); }
.fade-left  { transform: translateX(-55px); }
.fade-right { transform: translateX(55px); }
.fade-down  { transform: translateY(-30px); }
.scale-in   { transform: scale(0.88); }
.blur-in    { filter: blur(18px); transform: translateY(16px); }
.fade-in    { /* opacity only */ }

/* Animated state (class added by JS) */
.fade-up.animated,
.fade-left.animated,
.fade-right.animated,
.fade-down.animated,
.scale-in.animated,
.blur-in.animated,
.fade-in.animated {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger delays (applied via data-delay or nth-child in JS) */
.stagger-1  { transition-delay: 0.05s; }
.stagger-2  { transition-delay: 0.12s; }
.stagger-3  { transition-delay: 0.19s; }
.stagger-4  { transition-delay: 0.26s; }
.stagger-5  { transition-delay: 0.33s; }
.stagger-6  { transition-delay: 0.40s; }
.stagger-7  { transition-delay: 0.47s; }
.stagger-8  { transition-delay: 0.54s; }

/* ══════════════════════════════════════
   FLOATING / AMBIENT ANIMATIONS
   ══════════════════════════════════════ */
@keyframes float-y {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}
@keyframes float-xy {
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  33%       { transform: translate(6px, -12px) rotate(2deg); }
  66%       { transform: translate(-5px, -8px) rotate(-1deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-26px) scale(1.02); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12,107,113,0); }
  50%       { box-shadow: 0 0 30px 10px rgba(12,107,113,0.18); }
}
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Floating orb blobs */
.float-orb {
  pointer-events: none;
  border-radius: var(--radius-full);
  filter: blur(70px);
  position: absolute;
  animation: float-xy var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;
  opacity: var(--opacity, 0.25);
}
.float-orb-gold {
  background: radial-gradient(circle, rgba(12,107,113,0.50) 0%, transparent 70%);
}
.float-orb-light {
  background: radial-gradient(circle, rgba(232,213,192,0.40) 0%, transparent 70%);
}

/* ══════════════════════════════════════
   HERO ENTRANCE SEQUENCE
   ══════════════════════════════════════ */
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   COUNT-UP ANIMATION
   (Number animates in JS, this handles the highlight)
   ══════════════════════════════════════ */
.counter-wrap {
  position: relative;
  display: inline-block;
}
.counter-highlight {
  animation: counter-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes counter-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  80%  { transform: scale(1.06); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ══════════════════════════════════════
   SKELETON / SHIMMER (Loading)
   ══════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0ebe6 25%,
    #e8e0d8 50%,
    #f0ebe6 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════
   PAGE TRANSITION OVERLAY
   ══════════════════════════════════════ */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-topmost);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#page-transition.entering {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ══════════════════════════════════════ */

/* Gold underline slide */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
  border-radius: var(--radius-full);
}
.hover-underline:hover::after { width: 100%; }

/* Lift card */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-hover);
}

/* Glow ring */
.hover-glow:hover {
  box-shadow: var(--shadow-glow), var(--shadow-hover);
}

/* Arrow nudge */
.hover-arrow svg,
.hover-arrow-icon {
  transition: transform var(--transition-fast);
}
.hover-arrow:hover svg,
.hover-arrow:hover .hover-arrow-icon {
  transform: translateX(5px);
}

/* Image zoom wrapper */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-zoom:hover img {
  transform: scale(1.07);
}

/* Scale bounce */
.hover-scale {
  transition: transform var(--transition-spring);
}
.hover-scale:hover {
  transform: scale(1.05);
}

/* Button press */
.hover-press:active {
  transform: scale(0.97) translateY(1px);
}

/* ══════════════════════════════════════
   SWIPER CUSTOM STYLES
   ══════════════════════════════════════ */
.swiper-pagination-bullet {
  background: var(--color-accent-light) !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  transition: all var(--transition-base) !important;
}
.swiper-pagination-bullet-active {
  background: var(--color-accent) !important;
  width: 24px !important;
  border-radius: var(--radius-full) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-accent) !important;
  background: rgba(255,255,255,0.92) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-md) !important;
  transition: background var(--transition-fast), transform var(--transition-fast) !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  transform: scale(1.08) !important;
}

/* ══════════════════════════════════════
   GALLERY FILTER ANIMATION
   ══════════════════════════════════════ */
.gallery-item {
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.gallery-item.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  position: absolute;
}

/* ══════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════ */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
#lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.9);
  transition: transform var(--transition-spring);
}
#lightbox.open .lightbox-img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.lightbox-close:hover {
  background: rgba(255,255,255,0.22);
  transform: rotate(90deg) scale(1.1);
}
.lightbox-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* ══════════════════════════════════════
   SMOOTH SCROLL PROGRESS BAR
   ══════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-light));
  z-index: var(--z-topmost);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  box-shadow: 0 0 10px rgba(12,107,113,0.50);
}

/* ══════════════════════════════════════
   BEFORE/AFTER SLIDER
   ══════════════════════════════════════ */
.ba-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ba-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-white);
  cursor: ew-resize;
  z-index: 10;
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-label {
  position: absolute;
  top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(0,0,0,0.55);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.ba-label-before { left: var(--space-3); }
.ba-label-after  { right: var(--space-3); }

/* ══════════════════════════════════════
   SCROLL-TRIGGERED REVEAL for sections
   ══════════════════════════════════════ */
.reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-section.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   TIMELINE ANIMATION
   ══════════════════════════════════════ */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.timeline-item:nth-child(even) {
  transform: translateX(30px);
}
.timeline-item.animated {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════════
   TYPEWRITER CURSOR (for hero eyebrow)
   ══════════════════════════════════════ */
.typewriter-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--color-accent);
  margin-left: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ══════════════════════════════════════
   NOTIFICATION TOAST
   ══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transition: transform var(--transition-spring), opacity var(--transition-base);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-left: 3px solid var(--color-accent);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 2.5;
}