/* styles.css */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --honey-deep: #1a0e02;
  --honey-dark: #2c1a08;
  --honey-mid: #6b3a12;
  --honey-warm: #c47b2b;
  --honey-gold: #e8a838;
  --honey-light: #f5d590;
  --honey-cream: #fef3dc;
  --glow-alpha: rgba(232, 168, 56, 0.12);

  --navy: #000028;
  --black: #000000;
  --white: #ffffff;
  --grey-dark: #1a1a1a;
  --grey-mid: #444444;
  --grey-light: #999999;

  --breath: 5.5s;
  --breath-ease: cubic-bezier(0.45, 0.0, 0.25, 1.0);
  --logo-size: 200px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--honey-deep);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ============================================
   DEEP BACKGROUND - honey nebula
   ============================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 48%, rgba(108, 58, 18, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0, 0, 40, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 22% 55%, rgba(44, 26, 8, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 78% 45%, rgba(44, 26, 8, 0.10) 0%, transparent 50%),
    var(--honey-deep);
  animation: nebulaShift 20s ease-in-out infinite alternate;
}

@keyframes nebulaShift {
  0%   { filter: brightness(1) hue-rotate(0deg); }
  50%  { filter: brightness(1.08) hue-rotate(-2deg); }
  100% { filter: brightness(1) hue-rotate(0deg); }
}

/* CRT scan lines */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.025) 2px,
    rgba(0, 0, 0, 0.025) 4px
  );
  pointer-events: none;
}

/* ============================================
   FLOATING PARTICLES - warm embers
   ============================================ */
.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: drift linear infinite;
}

.particle:nth-child(1)  { width: 3px; height: 3px; left: 15%; background: var(--honey-gold);  animation-duration: 18s; animation-delay: 0s; }
.particle:nth-child(2)  { width: 2px; height: 2px; left: 35%; background: var(--honey-warm);  animation-duration: 22s; animation-delay: 3s; }
.particle:nth-child(3)  { width: 4px; height: 4px; left: 55%; background: var(--honey-mid);   animation-duration: 16s; animation-delay: 6s; }
.particle:nth-child(4)  { width: 2px; height: 2px; left: 72%; background: var(--honey-light); animation-duration: 20s; animation-delay: 2s; }
.particle:nth-child(5)  { width: 3px; height: 3px; left: 88%; background: var(--honey-gold);  animation-duration: 24s; animation-delay: 8s; }
.particle:nth-child(6)  { width: 2px; height: 2px; left: 8%;  background: var(--honey-warm);  animation-duration: 19s; animation-delay: 5s; }
.particle:nth-child(7)  { width: 3px; height: 3px; left: 45%; background: var(--honey-light); animation-duration: 21s; animation-delay: 1s; }
.particle:nth-child(8)  { width: 2px; height: 2px; left: 62%; background: var(--honey-mid);   animation-duration: 17s; animation-delay: 7s; }
.particle:nth-child(9)  { width: 4px; height: 4px; left: 25%; background: var(--honey-gold);  animation-duration: 23s; animation-delay: 4s; }
.particle:nth-child(10) { width: 2px; height: 2px; left: 80%; background: var(--honey-warm);  animation-duration: 15s; animation-delay: 9s; }

@keyframes drift {
  0%   { transform: translateY(110vh) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: 0.25; }
  20%  { opacity: 0.12; }
  50%  { opacity: 0.20; transform: translateY(50vh) translateX(40px) scale(0.8); }
  80%  { opacity: 0.08; }
  100% { transform: translateY(-10vh) translateX(-30px) scale(0.4); opacity: 0; }
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  animation: containerFadeIn 2.8s ease-out forwards;
  opacity: 0;
}

@keyframes containerFadeIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(6px); }
  60%  { filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}

/* ============================================
   LOGO BREATHING SYSTEM
   6 layered animations, staggered timing,
   asymmetric inhale/exhale

   Breath timing map:
   0%  → 38%  : INHALE  (slow expansive draw)
   38% → 52%  : HOLD    (brief living plateau)
   52% → 82%  : EXHALE  (quicker release)
   82% → 100% : REST    (quiet stillness)
   ============================================ */
.logo-wrap {
  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LAYER 1: outermost diffuse glow - leads the breath */
.logo-wrap::before {
  content: '';
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196, 123, 43, 0.06) 0%,
    rgba(232, 168, 56, 0.03) 35%,
    transparent 65%
  );
  animation: outerGlow var(--breath) var(--breath-ease) infinite;
  animation-delay: -0.3s;
}

/* LAYER 2: inner ring pulse - appears from nothing */
.logo-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(232, 168, 56, 0.0);
  animation: ringPulse var(--breath) var(--breath-ease) infinite;
  animation-delay: 0.1s;
}

@keyframes outerGlow {
  0%   { transform: scale(0.80); opacity: 0.15; }
  38%  { transform: scale(1.35); opacity: 1.0; }
  52%  { transform: scale(1.30); opacity: 0.9; }
  82%  { transform: scale(0.85); opacity: 0.1; }
  100% { transform: scale(0.80); opacity: 0.15; }
}

@keyframes ringPulse {
  0%   { transform: scale(0.96); opacity: 0;   border-color: rgba(232, 168, 56, 0.0); }
  30%  { opacity: 0.5; }
  38%  { transform: scale(1.08); opacity: 0.9; border-color: rgba(245, 213, 144, 0.22); }
  52%  { transform: scale(1.06); opacity: 0.7; border-color: rgba(245, 213, 144, 0.15); }
  70%  { opacity: 0.2; }
  82%  { transform: scale(0.97); opacity: 0;   border-color: rgba(232, 168, 56, 0.0); }
  100% { transform: scale(0.96); opacity: 0;   border-color: rgba(232, 168, 56, 0.0); }
}

.logo {
  width: calc(var(--logo-size) - 20px);
  height: calc(var(--logo-size) - 20px);
  border-radius: 50%;
  object-fit: cover;
  animation:
    logoScale   var(--breath) var(--breath-ease) infinite,
    logoGlow    var(--breath) var(--breath-ease) infinite,
    logoShadow  var(--breath) var(--breath-ease) infinite,
    logoDrift   calc(var(--breath) * 3) ease-in-out infinite;
}

/* LAYER 3: scale - the core breath */
@keyframes logoScale {
  0%   { transform: scale(1.0); }
  38%  { transform: scale(1.12); }
  52%  { transform: scale(1.10); }
  82%  { transform: scale(0.98); }
  100% { transform: scale(1.0); }
}

/* LAYER 4: brightness + saturation pulse */
@keyframes logoGlow {
  0%   { filter: brightness(0.95) saturate(1.0); }
  38%  { filter: brightness(1.20) saturate(1.30); }
  52%  { filter: brightness(1.15) saturate(1.22); }
  82%  { filter: brightness(0.92) saturate(0.95); }
  100% { filter: brightness(0.95) saturate(1.0); }
}

/* LAYER 5: multi-ring shadow bloom - honey golds into navy depths */
@keyframes logoShadow {
  0% {
    box-shadow:
      0 0 12px rgba(232, 168, 56, 0.05),
      0 0 40px rgba(196, 123, 43, 0.03),
      0 0 0px rgba(0, 0, 40, 0.0);
  }
  38% {
    box-shadow:
      0 0 30px rgba(232, 168, 56, 0.28),
      0 0 80px rgba(196, 123, 43, 0.16),
      0 0 160px rgba(107, 58, 18, 0.08),
      0 0 250px rgba(0, 0, 40, 0.04);
  }
  52% {
    box-shadow:
      0 0 25px rgba(232, 168, 56, 0.22),
      0 0 70px rgba(196, 123, 43, 0.12),
      0 0 140px rgba(107, 58, 18, 0.06),
      0 0 220px rgba(0, 0, 40, 0.03);
  }
  82% {
    box-shadow:
      0 0 8px rgba(232, 168, 56, 0.03),
      0 0 30px rgba(196, 123, 43, 0.02),
      0 0 0px rgba(0, 0, 40, 0.0);
  }
  100% {
    box-shadow:
      0 0 12px rgba(232, 168, 56, 0.05),
      0 0 40px rgba(196, 123, 43, 0.03),
      0 0 0px rgba(0, 0, 40, 0.0);
  }
}

/* LAYER 6: ultra-slow organic drift */
@keyframes logoDrift {
  0%   { transform: rotate(0deg)    translate(0px, 0px); }
  25%  { transform: rotate(0.6deg)  translate(1px, -1px); }
  50%  { transform: rotate(-0.3deg) translate(-1px, 0.5px); }
  75%  { transform: rotate(0.4deg)  translate(0.5px, 1px); }
  100% { transform: rotate(0deg)    translate(0px, 0px); }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.title {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--honey-cream);
  text-align: center;
  text-shadow:
    0 0 30px rgba(232, 168, 56, 0.06),
    0 0 60px rgba(0, 0, 40, 0.04);
  animation:
    textFadeIn 2.8s ease-out 0.8s forwards,
    textGlow var(--breath) var(--breath-ease) infinite;
  animation-delay: 0.8s, 0s;
  opacity: 0;
}

.tagline {
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.15em;
  color: var(--grey-light);
  text-align: center;
  margin-top: -1.5rem;
  animation: textFadeIn 2.8s ease-out 1.5s forwards;
  opacity: 0;
}

@keyframes textFadeIn {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  60%  { filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

/* title breathes with the logo */
@keyframes textGlow {
  0%   { text-shadow: 0 0 30px rgba(232,168,56,0.04), 0 0 60px rgba(0,0,40,0.03); }
  38%  { text-shadow: 0 0 40px rgba(232,168,56,0.12), 0 0 80px rgba(0,0,40,0.06); }
  52%  { text-shadow: 0 0 35px rgba(232,168,56,0.10), 0 0 70px rgba(0,0,40,0.05); }
  82%  { text-shadow: 0 0 25px rgba(232,168,56,0.03), 0 0 50px rgba(0,0,40,0.02); }
  100% { text-shadow: 0 0 30px rgba(232,168,56,0.04), 0 0 60px rgba(0,0,40,0.03); }
}

/* ============================================
   NOISE OVERLAY - animated grain
   ============================================ */
.noise {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: noiseShift 0.5s steps(2) infinite;
}

@keyframes noiseShift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
  :root { --logo-size: 160px; }
  .logo-wrap::before { inset: -50px; }
  .title { font-size: 1.6em; letter-spacing: 0.25em; }
  .tagline { font-size: 1.2rem; }
}