/**
 * Better Than Human - CSS Enhancements
 * 
 * Philosophy:
 * - Breathing, not static
 * - Ma (間) - purposeful pauses  
 * - Organic variations
 * - Contextual warmth
 * - Micro-expressions
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible styles for keyboard users */
*:focus-visible {
  outline: 2px solid var(--color-ferni, var(--color-ferni));
  outline-offset: 2px;
}

/* Remove focus ring for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion respect */
@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;
  }
  
  .scroll-progress {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIME-AWARE WARMTH
   Subtle shifts based on time of day
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --warmth-filter: none;
}

html[data-time="night"] {
  --warmth-filter: sepia(3%) brightness(98%);
}

html[data-time="morning"] {
  --warmth-filter: sepia(2%) brightness(101%);
}

/*
 * IMPORTANT: Do NOT apply filter directly to body!
 * CSS filters on ancestors break position:fixed on descendants.
 * The cookie banner and modals need position:fixed to work correctly.
 * Instead, apply the filter to the main content wrapper.
 */
body > *:not(.cookie-banner):not(.cookie-settings-modal):not(#cookieBanner):not(#cookieSettingsModal) {
  filter: var(--warmth-filter);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREATHING ANIMATIONS
   Organic, not mechanical
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes breathe-organic {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  40% {
    transform: scale(1.02);
    opacity: 1;
  }
  60% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes glow-breathe {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes float-organic {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

[data-breathe] {
  animation: breathe-organic var(--breath-rate, 4s) ease-in-out infinite;
  animation-delay: var(--breath-delay, 0s);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   With ma (間) - the meaningful pause
   ═══════════════════════════════════════════════════════════════════════════ */

/* Progressive enhancement - content visible by default, animations are bonus */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Only hide and animate if JS is loaded */
html.loaded .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.loaded .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger with organic timing (not perfectly even) */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.18s; }
.reveal:nth-child(4) { transition-delay: 0.25s; }
.reveal:nth-child(5) { transition-delay: 0.35s; }
.reveal:nth-child(6) { transition-delay: 0.42s; }

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-EXPRESSIONS
   Elements that seem to notice you
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards that "perk up" */
[data-expressive] {
  transition: 
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s ease;
}

[data-expressive]:hover {
  transform: translateY(-6px) scale(1.01);
}

/* Buttons with anticipation */
.btn-magnetic {
  position: relative;
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(74, 103, 65, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-magnetic:hover::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ORB - ALIVE AND AWARE
   The heart of Ferni's presence
   ═══════════════════════════════════════════════════════════════════════════ */

[data-orb-aware] {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Orb inner glow animation */
.orb-glow {
  animation: glow-breathe 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FERNI AVATAR SYSTEM
   Multiple states: idle, listening, speaking, thinking
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base Avatar Container */
.ferni-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Avatar Glow - breathing animation */
.avatar-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--avatar-color, rgba(74, 103, 65, 0.3)) 0%, transparent 70%);
  filter: blur(20px);
  animation: avatar-glow-breathe 4s ease-in-out infinite;
}

@keyframes avatar-glow-breathe {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.15);
  }
}

/* Outer Rings */
.avatar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--avatar-color, rgba(74, 103, 65, 0.15));
}

.avatar-ring-1 { inset: -30%; opacity: 0.1; }
.avatar-ring-2 { inset: -20%; opacity: 0.15; }
.avatar-ring-3 { inset: -10%; opacity: 0.2; }

/* Pulse Ring - active when speaking/listening */
.avatar-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--avatar-color, rgba(74, 103, 65, 0.4));
  animation: avatar-pulse 2.5s ease-out infinite;
}

@keyframes avatar-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Main Orb */
.avatar-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-light, var(--color-ferni)), var(--avatar-color, var(--color-ferni)), var(--avatar-dark, var(--color-ferni-secondary)));
  box-shadow: 
    0 10px 40px rgba(74, 103, 65, 0.35),
    inset 0 -5px 20px rgba(0, 0, 0, 0.1),
    inset 0 5px 20px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: avatar-breathe 4s ease-in-out infinite;
}

@keyframes avatar-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Avatar Initials */
.avatar-initials {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVEFORM SYSTEM
   Different states: idle, listening, speaking
   ═══════════════════════════════════════════════════════════════════════════ */

.waveform-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  padding: 30%;
}

/* Waveform bars - organic timing */
.wave-bar {
  width: 3px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xs);
  transform-origin: center;
}

/* IDLE STATE - subtle movement */
.waveform-idle .wave-bar {
  animation: wave-idle 2s ease-in-out infinite;
}

@keyframes wave-idle {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(0.5); }
}

.waveform-idle .wave-bar:nth-child(1) { animation-delay: 0s; height: 20%; }
.waveform-idle .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 30%; }
.waveform-idle .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 45%; }
.waveform-idle .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 55%; }
.waveform-idle .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 45%; }
.waveform-idle .wave-bar:nth-child(6) { animation-delay: 0.5s; height: 30%; }
.waveform-idle .wave-bar:nth-child(7) { animation-delay: 0.6s; height: 20%; }

/* LISTENING STATE - responsive movement */
.waveform-listening .wave-bar {
  animation: wave-listening 0.8s ease-in-out infinite;
}

@keyframes wave-listening {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.waveform-listening .wave-bar:nth-child(1) { animation-delay: 0s; height: 25%; }
.waveform-listening .wave-bar:nth-child(2) { animation-delay: 0.08s; height: 45%; }
.waveform-listening .wave-bar:nth-child(3) { animation-delay: 0.15s; height: 70%; }
.waveform-listening .wave-bar:nth-child(4) { animation-delay: 0.22s; height: 100%; }
.waveform-listening .wave-bar:nth-child(5) { animation-delay: 0.28s; height: 70%; }
.waveform-listening .wave-bar:nth-child(6) { animation-delay: 0.35s; height: 45%; }
.waveform-listening .wave-bar:nth-child(7) { animation-delay: 0.42s; height: 25%; }

/* SPEAKING STATE - dynamic, confident */
.waveform-speaking .wave-bar {
  animation: wave-speaking 0.5s ease-in-out infinite;
}

@keyframes wave-speaking {
  0%, 100% { transform: scaleY(0.5); }
  25% { transform: scaleY(1); }
  75% { transform: scaleY(0.7); }
}

.waveform-speaking .wave-bar:nth-child(1) { animation-delay: 0s; height: 35%; }
.waveform-speaking .wave-bar:nth-child(2) { animation-delay: 0.05s; height: 55%; }
.waveform-speaking .wave-bar:nth-child(3) { animation-delay: 0.1s; height: 85%; }
.waveform-speaking .wave-bar:nth-child(4) { animation-delay: 0.15s; height: 100%; }
.waveform-speaking .wave-bar:nth-child(5) { animation-delay: 0.2s; height: 85%; }
.waveform-speaking .wave-bar:nth-child(6) { animation-delay: 0.25s; height: 55%; }
.waveform-speaking .wave-bar:nth-child(7) { animation-delay: 0.3s; height: 35%; }

/* THINKING STATE - slow, contemplative pulse */
.waveform-thinking .wave-bar {
  animation: wave-thinking 1.5s ease-in-out infinite;
}

@keyframes wave-thinking {
  0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
  50% { transform: scaleY(0.6); opacity: 1; }
}

.waveform-thinking .wave-bar:nth-child(1) { animation-delay: 0s; height: 30%; }
.waveform-thinking .wave-bar:nth-child(2) { animation-delay: 0.15s; height: 40%; }
.waveform-thinking .wave-bar:nth-child(3) { animation-delay: 0.3s; height: 50%; }
.waveform-thinking .wave-bar:nth-child(4) { animation-delay: 0.45s; height: 55%; }
.waveform-thinking .wave-bar:nth-child(5) { animation-delay: 0.6s; height: 50%; }
.waveform-thinking .wave-bar:nth-child(6) { animation-delay: 0.75s; height: 40%; }
.waveform-thinking .wave-bar:nth-child(7) { animation-delay: 0.9s; height: 30%; }

/* ═══════════════════════════════════════════════════════════════════════════
   2AM SECTION SPECIFIC
   Dark, emotional, then relief
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark theme variables - Bold & Readable */
.night-section {
  --bg-primary: var(--color-bg-dark);
  --bg-secondary: var(--color-bg-dark-elevated);
  --text-primary: var(--color-text-inverse);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-dimmed);
}

/* Time display pulsing */
.time-display {
  animation: time-pulse 3s ease-in-out infinite;
}

@keyframes time-pulse {
  0%, 100% { 
    opacity: 0.5;
    text-shadow: 0 0 0 transparent;
  }
  50% { 
    opacity: 0.7;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
  }
}

/* Colon blink */
.time-colon {
  animation: colon-blink 1s steps(1) infinite;
}

@keyframes colon-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Unavailable items - staggered fade in */
.unavailable-item {
  opacity: 0;
  transform: translateY(10px);
  animation: unavailable-reveal 0.6s ease-out forwards;
}

.unavailable-item:nth-child(1) { animation-delay: 0.3s; }
.unavailable-item:nth-child(2) { animation-delay: 0.5s; }
.unavailable-item:nth-child(3) { animation-delay: 0.7s; }

@keyframes unavailable-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transition divider - gradient line */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--avatar-color, var(--color-ferni)), transparent);
  opacity: 0.3;
}

/* Response card entrance */
.response-card {
  animation: response-float 3s ease-in-out infinite;
}

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

/* Avatar entrance in 2AM section */
.avatar-entrance {
  animation: avatar-enter 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes avatar-enter {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS - Icon Animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phone ring animation */
.icon-phone-ring {
  animation: phone-ring 2s ease-in-out infinite;
}

@keyframes phone-ring {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* Message typing dots */
.icon-message-typing::after {
  content: '...';
  animation: typing-dots 1.5s steps(4) infinite;
}

@keyframes typing-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* Globe spin */
.icon-globe-spin {
  animation: globe-spin 20s linear infinite;
}

@keyframes globe-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* Card number animation */
.card-number {
  display: inline-block;
  animation: number-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.card-number:nth-child(1) { animation-delay: 0.1s; }
.card-number:nth-child(2) { animation-delay: 0.2s; }
.card-number:nth-child(3) { animation-delay: 0.3s; }

@keyframes number-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM SECTION - Persona Orbs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Persona card hover glow */
.persona-card {
  position: relative;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.persona-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--persona-glow, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(15px);
}

.persona-card:hover::before {
  opacity: 1;
}

.persona-card:hover {
  transform: translateY(-4px);
}

/* Persona orb with breathing */
.persona-orb {
  position: relative;
  animation: persona-breathe 3s ease-in-out infinite;
}

@keyframes persona-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Persona orb glow on hover */
.persona-orb::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, var(--persona-glow, rgba(74, 103, 65, 0.3)) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.group:hover .persona-orb::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING - Popular Tier Glow
   ═══════════════════════════════════════════════════════════════════════════ */

/* Popular tier glow effect */
.pricing-popular {
  position: relative;
}

.pricing-popular::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, rgba(74, 103, 65, 0.4), rgba(74, 103, 65, 0.1), rgba(74, 103, 65, 0.4));
  border-radius: 1.75rem;
  z-index: -1;
  animation: pricing-glow 3s ease-in-out infinite;
}

@keyframes pricing-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Price number animation */
.price-animate {
  display: inline-block;
}

.price-animate .price-value {
  display: inline-block;
  animation: price-count 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes price-count {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Feature check animation */
.feature-check {
  opacity: 0;
  transform: scale(0);
  animation: check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.feature-check:nth-child(1) { animation-delay: 0.1s; }
.feature-check:nth-child(2) { animation-delay: 0.15s; }
.feature-check:nth-child(3) { animation-delay: 0.2s; }
.feature-check:nth-child(4) { animation-delay: 0.25s; }
.feature-check:nth-child(5) { animation-delay: 0.3s; }

@keyframes check-pop {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ - Smooth Accordion
   ═══════════════════════════════════════════════════════════════════════════ */

/* FAQ item hover */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateX(4px);
}

/* FAQ icon rotation */
.faq-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

details[open] .faq-icon {
  transform: rotate(45deg);
}

/* FAQ content reveal */
.faq-content {
  animation: faq-reveal 0.4s ease-out;
}

@keyframes faq-reveal {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL CTA - Glowing Phone Number
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phone number glow */
.phone-glow {
  position: relative;
  display: inline-block;
}

.phone-glow::before {
  content: '';
  position: absolute;
  inset: -10px -20px;
  background: radial-gradient(ellipse, rgba(74, 103, 65, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: phone-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes phone-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* CTA section background animation */
.cta-bg-glow {
  animation: cta-breathe 6s ease-in-out infinite;
}

@keyframes cta-breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Number hover effect */
.phone-number-hover {
  transition: all 0.3s ease;
}

.phone-number-hover:hover {
  text-shadow: 0 0 30px rgba(74, 103, 65, 0.4);
  transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES SECTION - Memory Dots
   ═══════════════════════════════════════════════════════════════════════════ */

.memory-dot {
  animation: memory-float 4s ease-in-out infinite;
}

@keyframes memory-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-10px) scale(1.1); opacity: 1; }
}

/* Stagger memory dots */
.memory-dot:nth-child(1) { animation-delay: 0s; }
.memory-dot:nth-child(2) { animation-delay: -1s; }
.memory-dot:nth-child(3) { animation-delay: -2s; }
.memory-dot:nth-child(4) { animation-delay: -3s; }

/* Connection lines */
.connection-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: line-draw 2s ease-out forwards;
}

@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

/* Persona orbit - slow, deliberate */
.persona-orbit {
  animation: orbit-slow 45s linear infinite;
}

@keyframes orbit-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.persona-counter {
  animation: orbit-slow 45s linear infinite reverse;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT TEXT - SUBTLE SHIMMER
   Not flashy, just alive
   ═══════════════════════════════════════════════════════════════════════════ */

.text-gradient-alive {
  background: linear-gradient(
    135deg,
    var(--color-ferni) 0%,
    var(--color-ferni) 25%,
    var(--color-ferni-secondary) 50%,
    var(--color-ferni) 75%,
    var(--color-ferni) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease-in-out infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION - BRAND MOMENT
   Even highlighting feels intentional
   ═══════════════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(74, 103, 65, 0.2);
  color: inherit;
}

::-moz-selection {
  background: rgba(74, 103, 65, 0.2);
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES - ACCESSIBLE AND BEAUTIFUL
   Care for all users
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--color-ferni);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ferni);
  outline-offset: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL INDICATOR - INVITING
   Gentle invitation to explore
   ═══════════════════════════════════════════════════════════════════════════ */

.scroll-indicator {
  animation: scroll-hint 2s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(8px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LOAD SEQUENCE
   Orchestrated reveal, not sudden appearance
   ═══════════════════════════════════════════════════════════════════════════ */

html:not(.loaded) body {
  overflow: hidden;
}

html:not(.loaded) .hero-content > * {
  opacity: 0;
  transform: translateY(30px);
}

html.loaded .hero-content > * {
  animation: hero-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.loaded .hero-content > *:nth-child(1) { animation-delay: 0.1s; }
html.loaded .hero-content > *:nth-child(2) { animation-delay: 0.2s; }
html.loaded .hero-content > *:nth-child(3) { animation-delay: 0.35s; }
html.loaded .hero-content > *:nth-child(4) { animation-delay: 0.5s; }
html.loaded .hero-content > *:nth-child(5) { animation-delay: 0.65s; }
html.loaded .hero-content > *:nth-child(6) { animation-delay: 0.8s; }

@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION - CARE FOR ALL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
  }
  
  [data-breathe] {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAILS/SUMMARY (FAQ) - SMOOTH EXPANSION
   ═══════════════════════════════════════════════════════════════════════════ */

details {
  overflow: hidden;
}

details summary {
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary ~ * {
  animation: details-open 0.4s ease-out forwards;
}

@keyframes details-open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}