/* Ferni Landing Page Styles - Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Skip Link - Accessibility (must be before @import) */
.skip-link {
  position: fixed !important;
  top: -200px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  background: var(--color-ferni, var(--color-ferni));
  color: white;
  font-weight: 600;
  border-radius: 0 0 0.75rem 0.75rem;
  z-index: 9999;
  text-decoration: none;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  width: 1px;
  height: 1px;
}

.skip-link:focus {
  top: 0 !important;
  clip: auto;
  overflow: visible;
  width: auto;
  height: auto;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FERNI AWAKENS - Hero Introduction Animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* Initial hidden states during awakening */
.ferni-awakening .orb-glow {
  opacity: 0;
  transform: scale(0.8);
}

.ferni-awakening [data-fe-initials] {
  opacity: 0;
  transform: scale(0.9);
}

.ferni-awakening [data-hero-eyebrow],
.ferni-awakening [data-hero-headline],
.ferni-awakening [data-hero-subhead],
.ferni-awakening [data-hero-ctas] {
  opacity: 0;
  transform: translateY(20px);
}

/* Text reveal state */
.greeting-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Orb glow breathing when ready */
.ferni-ready .orb-glow {
  animation: glowBreathing 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes glowBreathing {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Orb breathing animation */
[data-hero-orb].breathing {
  animation: orbBreathing 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes orbBreathing {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 60px rgba(74, 103, 65, 0.3),
      inset 0 0 30px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 0 80px rgba(74, 103, 65, 0.4),
      inset 0 0 40px rgba(255, 255, 255, 0.15);
  }
}

/* Orb hover - enhanced presence */
[data-hero-orb].orb-hover {
  animation: none;
  transform: scale(1.05);
  box-shadow:
    0 0 100px rgba(74, 103, 65, 0.5),
    inset 0 0 50px rgba(255, 255, 255, 0.2);
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 300ms ease-out;
}

/* Waveform */
[data-waveform] {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  height: 24px;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

[data-waveform].waveform-active {
  opacity: 1;
}

.waveform-bar {
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-xs);
  transform-origin: center;
  animation: waveformIdle 1.2s ease-in-out infinite;
  animation-delay: calc(var(--bar-index, 0) * 0.1s);
}

@keyframes waveformIdle {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(0.8);
  }
}

/* Ready state - everything visible and alive */
.ferni-ready .orb-glow {
  opacity: 0.6;
  transform: scale(1);
}
.ferni-ready [data-fe-initials] {
  opacity: 1;
  transform: scale(1);
}
.ferni-ready [data-hero-eyebrow],
.ferni-ready [data-hero-headline],
.ferni-ready [data-hero-subhead],
.ferni-ready [data-hero-ctas] {
  opacity: 1;
  transform: translateY(0);
}
.ferni-ready [data-persona-orb] {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERSONA HOVER INTERACTIONS - Each persona feels alive
   ═══════════════════════════════════════════════════════════════════════════ */

[data-persona-orb] {
  cursor: pointer;
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 300ms ease-out;
}

/* Persona hover - they "perk up" when noticed */
[data-persona-orb]:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Each persona has their own hover personality */
[data-persona-orb='peter']:hover {
  animation: personaWavePeter 400ms ease-in-out;
}

[data-persona-orb='maya']:hover {
  animation: personaWaveMaya 450ms ease-in-out;
}

[data-persona-orb='alex']:hover {
  animation: personaWaveAlex 380ms ease-in-out;
}

[data-persona-orb='jordan']:hover {
  animation: personaWaveJordan 350ms ease-in-out;
}

@keyframes personaWavePeter {
  0%,
  100% {
    transform: scale(1.2) rotate(0deg);
  }
  25% {
    transform: scale(1.25) rotate(-3deg);
  }
  75% {
    transform: scale(1.25) rotate(3deg);
  }
}

@keyframes personaWaveMaya {
  0%,
  100% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.3) translateY(-3px);
  }
}

@keyframes personaWaveAlex {
  0%,
  100% {
    transform: scale(1.2) rotate(0deg);
  }
  33% {
    transform: scale(1.22) rotate(5deg);
  }
  66% {
    transform: scale(1.22) rotate(-5deg);
  }
}

@keyframes personaWaveJordan {
  0%,
  100% {
    transform: scale(1.2);
  }
  25% {
    transform: scale(1.28);
  }
  50% {
    transform: scale(1.15);
  }
  75% {
    transform: scale(1.25);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN ORB MICRO-EXPRESSIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtle "attention" state when something is happening */
[data-hero-orb].attention {
  animation: orbAttention 600ms ease-in-out;
}

@keyframes orbAttention {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* "Speaking" state */
[data-hero-orb].speaking {
  animation: orbSpeaking 200ms ease-in-out infinite;
}

@keyframes orbSpeaking {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ferni-awakening .orb-glow,
  .ferni-awakening [data-fe-initials],
  .ferni-awakening [data-hero-eyebrow],
  .ferni-awakening [data-hero-headline],
  .ferni-awakening [data-hero-subhead],
  .ferni-awakening [data-hero-ctas] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-hero-orb].breathing,
  .ferni-ready .orb-glow,
  [data-persona-orb]:hover {
    animation: none !important;
  }
}

/* Better than Human - Philosophy-driven enhancements */
@import './better-than-human.css';

/* Ferni Awakens - Hero introduction sequence */
@import './ferni-awakens.css';

/* Apple-Level Polish - World-class refinements */
@import './apple-polish.css';

/* Custom base styles */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-paper text-ink font-body;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-bold;
  }

  ::selection {
    background-color: rgba(74, 103, 65, 0.2);
    @apply text-ink;
  }
}

/* Component styles */
@layer components {
  /* Ferni Avatar Orb */
  .ferni-orb {
    @apply relative flex items-center justify-center;
    @apply rounded-full;
    background: linear-gradient(to bottom right, var(--color-ferni), var(--color-ferni), var(--color-ferni-secondary));
    box-shadow: 0 0 40px rgba(74, 103, 65, 0.3);
  }

  .ferni-orb-text {
    @apply font-display font-bold text-white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  .ferni-orb-ring {
    @apply absolute rounded-full border-2 pointer-events-none;
    border-color: rgba(74, 103, 65, 0.2);
  }

  .ferni-orb-glow {
    @apply absolute rounded-full pointer-events-none;
    background: radial-gradient(circle, rgba(74, 103, 65, 0.2) 0%, transparent 70%);
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2;
    @apply px-6 py-3 rounded-full font-display font-semibold;
    @apply transition-all duration-300 ease-spring;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    --tw-ring-color: rgba(74, 103, 65, 0.5);
  }

  .btn-primary {
    @apply bg-ferni text-white;
    @apply hover:bg-ferni-dark hover:shadow-lg hover:-translate-y-0.5;
    @apply active:translate-y-0 active:shadow-md;
  }

  .btn-secondary {
    @apply bg-paper-cream text-ink border-2;
    border-color: rgba(44, 37, 32, 0.1);
    @apply hover:border-ferni hover:text-ferni hover:shadow-md;
    @apply active:shadow-sm;
  }

  /* Cards */
  .card {
    @apply bg-paper-cream rounded-2xl p-6;
    @apply border shadow-md hover:shadow-lg;
    border-color: rgba(44, 37, 32, 0.05);
    @apply transition-all duration-300 ease-spring;
  }

  .card-elevated {
    @apply bg-white rounded-3xl p-8;
    @apply shadow-xl;
  }

  /* Section containers */
  .section {
    @apply py-ma-contemplation px-4;
  }

  .section-dark {
    @apply bg-gradient-to-b from-[var(--color-bg-dark)] via-[var(--color-bg-dark-elevated)] to-paper;
    @apply text-white;
  }

  /* Trust badges */
  .trust-badge {
    @apply inline-flex items-center gap-2;
    @apply px-4 py-2 rounded-full;
    @apply bg-paper-cream border text-sm text-ink-muted;
    border-color: rgba(44, 37, 32, 0.05);
  }

  /* Navigation */
  .nav {
    @apply fixed top-0 left-0 right-0 z-50;
    @apply backdrop-blur-lg border-b transition-all duration-300;
    background-color: rgba(243, 240, 235, 0.8);
    border-color: rgba(44, 37, 32, 0.05);
  }

  .nav-scrolled {
    @apply shadow-md;
  }

  /* Cookie banner */
  .cookie-banner {
    @apply fixed bottom-4 left-4 right-4 z-50;
    @apply bg-paper-cream rounded-xl p-4;
    @apply shadow-xl border;
    border-color: rgba(44, 37, 32, 0.1);
    @apply flex flex-wrap items-center justify-between gap-4;
    @apply max-w-xl mx-auto;
  }

  /* Mobile CTA bar */
  .mobile-cta {
    @apply fixed bottom-0 left-0 right-0 z-40;
    @apply backdrop-blur-lg border-t p-4 flex gap-3 md:hidden;
    background-color: rgba(248, 246, 243, 0.9);
    border-color: rgba(44, 37, 32, 0.05);
  }
}

/* Utility classes */
@layer utilities {
  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent;
    @apply bg-gradient-to-r from-ferni to-ferni-dark;
  }

  /* Glass effect */
  .glass {
    @apply bg-white/60 backdrop-blur-lg;
    @apply border border-white/20;
  }

  /* Reveal animation */
  .reveal {
    @apply opacity-0 translate-y-6;
    @apply transition-all duration-700 ease-expo-out;
  }

  .reveal.is-visible {
    @apply opacity-100 translate-y-0;
  }

  /* Breathing animation for orbs */
  .animate-breathe {
    animation: breathe 4s ease-in-out infinite;
  }

  /* Hide scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Blog Post Author Styles */
.blog-post__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blog-post__author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: var(--text-sm);
  color: white;
  flex-shrink: 0;
}

.blog-post__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-post__author-name {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text, var(--color-text-primary));
}

.blog-post__author-role {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted, #8a7f72);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-post__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #8a7f72);
}