/* ===========================================================================
   MemFlix — hero-only site styles
   =========================================================================== */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { background-color: #0B0B0F; }

/* --- Brand gradient helpers --- */
.bg-brand-gradient { background-image: linear-gradient(135deg, #FDBD03 0%, #FC8A02 50%, #CE0B2C 100%); }
.text-brand-gradient {
  background-image: linear-gradient(120deg, #FDBD03 0%, #FC8A02 45%, #CE0B2C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Ambient hero glow --- */
.hero-glow {
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(252,138,2,0.22) 0%, rgba(252,138,2,0) 60%),
    radial-gradient(50% 45% at 20% 75%, rgba(206,11,44,0.18) 0%, rgba(206,11,44,0) 60%),
    radial-gradient(45% 40% at 50% 0%, rgba(253,189,3,0.14) 0%, rgba(253,189,3,0) 55%);
}

/* --- Entrance animation (staggered via inline animation-delay) --- */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: riseIn .7s cubic-bezier(.22,.61,.36,1) forwards; }

/* --- Phone mockup motion --- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .5; } }
.bob { animation: bob 1.8s ease-in-out infinite; }

@keyframes progressFill { from { width: 0; } to { width: 100%; } }
.progress-fill { animation: progressFill 5s linear infinite; }

@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,189,3,0.55); }
  50% { box-shadow: 0 0 0 6px rgba(253,189,3,0); }
}
.pin-pulse { animation: pinPulse 2.4s ease-out infinite; }

/* --- Subtle film grain over the "scene" --- */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Full-bleed soft grain for the hero backdrop --- */
.hero-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Accessible focus ring --- */
a:focus-visible, button:focus-visible {
  outline: 3px solid #FDBD03; outline-offset: 3px; border-radius: 12px;
}

/* --- Hero "4 beats" flow (Discover → Understand → Practice → Remember) --- */
.beat {
  appearance: none; background: none; border: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; /* touch target */
  padding: 0.15rem 0.35rem;
  color: rgba(255,255,255,0.62);
  /* dotted underline = "this word has a definition" affordance */
  text-decoration: underline dotted rgba(255,255,255,0.3);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.12s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.beat:hover, .beat:focus-visible { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
.beat:active { transform: scale(0.96); }         /* tactile press feedback */
.beat[aria-current="true"] {
  /* each step owns one stop of the brand gradient (amber → red), set below */
  color: var(--beat-c, #FDBD03);
  /* solid underline distinguishes the active step by shape, not color alone */
  text-decoration: underline solid var(--beat-c, #FDBD03); text-decoration-thickness: 2px;
}
.beat:nth-of-type(1) { --beat-c: #FDBD03; } /* Discover   — brand amber */
.beat:nth-of-type(2) { --beat-c: #FC8A02; } /* Understand — brand orange */
.beat:nth-of-type(3) { --beat-c: #E54B17; } /* Practice   — orange→red midpoint */
.beat:nth-of-type(4) { --beat-c: #CE0B2C; } /* Remember   — brand red */
.beat-arrow {
  width: 1.05em; height: 1.05em; flex: none;
  color: rgba(255,255,255,0.5);
}

/* --- Cookie consent card --- */
/* The element ships with the `hidden` attribute; analytics.js flips it, so
   display goes none -> block and the entrance animation (re)starts then. */
@keyframes consentIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
#consent-banner { animation: consentIn .26s cubic-bezier(0, 0, .2, 1) both; }

/* Must stay display:none while `hidden` is set, whatever classes are added. */
#consent-banner[hidden] { display: none !important; }

/* Elevation: deep drop shadow + amber/red glow hugging the gradient border,
   plus a slow breathing halo behind the card so it keeps drawing the eye. */
.consent-glow {
  position: relative;
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.65),
    0 0 40px -8px rgba(252, 138, 2, 0.35),
    0 0 80px -16px rgba(206, 11, 44, 0.25);
}
.consent-glow::after {
  content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 28px;
  background: linear-gradient(135deg, rgba(253,189,3,0.45) 0%, rgba(252,138,2,0.35) 50%, rgba(206,11,44,0.30) 100%);
  filter: blur(28px); opacity: .35; pointer-events: none;
  animation: consentBreathe 4s ease-in-out infinite;
}
@keyframes consentBreathe { 0%, 100% { opacity: .3; } 50% { opacity: .55; } }

/* Gradient-tinted chip behind the cookie icon */
.consent-chip {
  background: linear-gradient(135deg, rgba(253, 189, 3, 0.16) 0%, rgba(252, 138, 2, 0.12) 50%, rgba(206, 11, 44, 0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(252, 138, 2, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .floaty, .bob, .progress-fill, .pin-pulse { animation: none !important; }
  .rise { opacity: 1; transform: none; }
  .progress-fill { width: 65%; }
  .beat { transition: color 0.2s ease, text-decoration-color 0.2s ease; }
  .beat:active { transform: none; }
  #consent-banner { animation: none !important; opacity: 1; transform: none; }
  .consent-glow::after { animation: none !important; opacity: .35; }
}