/*
Theme Name: Top Stock Alert Landing
Theme URI: https://topstockalert.com
Author: Top Stock Alert
Author URI: https://topstockalert.com
Description: Landing page theme for the Top Stock Alert mobile app — AI signals, insider moves, congressional trades, and live sentiment.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: tsa-landing
*/

/* =========================================================
   Custom styles migrated from designer's <style> block.
   Tailwind utilities are loaded via the CDN in functions.php.
   ========================================================= */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Ticker tape */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track { animation: ticker 48s linear infinite; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }

/* Breathing float for hero card */
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.breathe { animation: breathe 5s ease-in-out infinite; }

/* Soft glow utility */
.signal-glow {
  background: radial-gradient(circle at center, rgba(47,107,255,0.45) 0%, rgba(47,107,255,0.18) 30%, transparent 65%);
}
.signal-glow-soft {
  background: radial-gradient(circle at center, rgba(47,107,255,0.25) 0%, transparent 60%);
}

/* Scroll-snap tape */
.tape { scroll-snap-type: x mandatory; scroll-padding-left: 2rem; }
.tape > * { scroll-snap-align: start; }

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

/* Screen (bare image + subtle signal-blue gradient halo behind) */
.phone {
  position: relative;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.phone::before {
  content: none; /* glow removed — phones sit flat against the page */
}
.phone > img {
  display: block;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.phone::after { content: none; display: none; }
.phone-sm > img { border-radius: 0; }

/* Hairlines */
.hairline-dark { border-color: rgba(255,255,255,0.07); }
.hairline-dark { border-color: rgba(11,18,32,0.1); }

/* Grid texture */
.grid-texture {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}
.grid-texture {
  background-image:
    linear-gradient(to right, rgba(11,18,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* Display headline treatment — Inter Tight at medium weight with tight tracking.
   Inter Tight is a condensed companion to Inter, better for large display text. */
.serif-h {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-weight: 500;
}
.serif-h em {
  font-style: normal;
  font-weight: 600;
}

/* Gradient text */
.text-signal-grad {
  background: linear-gradient(135deg, #2F6BFF 0%, #7FB3FF 55%, #E8EFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* FAQ accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .faq-plus { transform: rotate(45deg); color: #2F6BFF; }
.faq-plus { transition: transform .28s cubic-bezier(0.2,0.8,0.2,1), color .28s ease; }
details[open] .faq-answer { animation: slideDown .3s ease both; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover lifts */
.lift { transition: transform .28s cubic-bezier(0.2,0.8,0.2,1), box-shadow .28s, border-color .28s; }
.lift:hover { transform: translateY(-4px); }

/* Rotated editorial labels */
.vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.22em;
}

/* Marquee pulse dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

/* AppStore/Play buttons */
.store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 22px; border-radius: 14px;
  background: #fff; color: #0B1220;
  font-weight: 600; transition: transform .24s, box-shadow .24s;
  border: 1px solid rgba(0,0,0,0.05);
  box-sizing: border-box;
  width: 220px;
  height: 58px;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(47,107,255,0.12); }
.store-btn.dark { background: #0B1220; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.store-btn > div { line-height: 1; text-align: left; }
.store-btn small { display: block; font-size: 10px; line-height: 1.4; opacity: .7; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.store-btn strong { display: block; font-size: 15px; line-height: 1.2; font-weight: 600; }

/* Full-width store buttons on mobile so both CTAs span the entire column. */
@media (max-width: 640px) {
  .store-btn {
    width: 100%;
  }
}

/* =========================================================
   LIGHT THEME
   Applied via `.light-theme` on <html>. Default is dark.
   Smooth color transition on the root elements only.
   ========================================================= */

html.light-theme,
html.light-theme body {
  background-color: #FFFFFF;
  color: #0B1220;
}

html, body { transition: background-color .25s ease, color .25s ease; }

/* Solid backgrounds
   Page = pure white. Cards/alt sections = very subtle cool gray so they
   separate from the page without looking colored. */
.light-theme .bg-obsidian      { background-color: #FFFFFF !important; }
.light-theme .bg-graphite      { background-color: #F7F8FA !important; }
.light-theme .bg-graphite2     { background-color: #EEF1F5 !important; }
.light-theme .bg-\[\#1A2132\]  { background-color: #F2F4F7 !important; }

/* Sticky nav uses obsidian at 85% opacity */
.light-theme .bg-obsidian\/85  { background-color: rgba(255,255,255,0.85) !important; }

/* Gradients used in Deep Dive Acts & shelf fade edges */
.light-theme .bg-gradient-to-b.from-obsidian.to-graphite {
  background-image: linear-gradient(to bottom, #FFFFFF, #F7F8FA) !important;
}
.light-theme .from-graphite { --tw-gradient-from: #F7F8FA !important; }

/* Text colors — tuned for AA+ contrast on pure white.
   Slate-600 (#475569) is a warmer, more readable muted tone than the
   previous washed-out blue-gray (#56647A). */
.light-theme .text-white         { color: #0B1220 !important; }
.light-theme .text-mercury       { color: #475569 !important; }
.light-theme .text-mercury\/75   { color: rgba(71,85,105,0.85) !important; }
.light-theme .text-mercury\/60   { color: rgba(71,85,105,0.7) !important; }
.light-theme .text-mercury\/40   { color: rgba(71,85,105,0.5) !important; }

/* Hairlines — slightly stronger in light mode so borders actually read. */
.light-theme .hairline-dark { border-color: rgba(11,18,32,0.10) !important; }

/* Grid texture — softer so it doesn't compete with content. */
.light-theme .grid-texture {
  background-image:
    linear-gradient(to right, rgba(11,18,32,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,0.035) 1px, transparent 1px) !important;
}

/* Glows are too strong on a white background — tone them down further. */
.light-theme .signal-glow       { opacity: 0.28 !important; }
.light-theme .signal-glow-soft  { opacity: 0.22 !important; }

/* Small UI chips that use translucent white over graphite */
.light-theme .bg-white\/5  { background-color: rgba(11,18,32,0.04) !important; }
.light-theme .bg-white\/10 { background-color: rgba(11,18,32,0.08) !important; }

/* Theme toggle border in light mode */
.light-theme #theme-toggle { border-color: rgba(11,18,32,0.15) !important; }

/* Store buttons — minimal symmetric shadows in light mode. */
.light-theme .store-btn:not(.dark) {
  border-color: rgba(11,18,32,0.10) !important;
  box-shadow: 0 0 10px rgba(11,18,32,0.05) !important;
}
.light-theme .store-btn:not(.dark):hover {
  box-shadow: 0 0 16px rgba(47,107,255,0.12) !important;
  border-color: rgba(47,107,255,0.20) !important;
}
.light-theme .store-btn.dark {
  box-shadow: 0 0 14px rgba(11,18,32,0.15) !important;
}

/* Section-level header bg in light mode — the nav had bg-obsidian/85; we
   tuned that. Also make sure the "Get the app" signal button pops. */
.light-theme .bg-signal\/10 { background-color: rgba(47,107,255,0.10) !important; }
.light-theme .bg-gain\/10   { background-color: rgba(24,185,123,0.12) !important; }
.light-theme .bg-amber\/10  { background-color: rgba(255,181,71,0.14) !important; }

/* Slight tweak so amber text reads on white. */
.light-theme .text-amber { color: #D88B00 !important; }

/* =========================================================
   APP SCREENSHOT FILTER — swapped
   Original PNGs are dark-UI; we invert them in the DARK page
   theme (so the app UI appears light against dark backgrounds)
   and leave them as-is in the LIGHT page theme (dark UI reads
   cleanly against a white page).
   invert() flips luminance, hue-rotate(180deg) restores hue so
   brand greens/reds/blues stay recognizable.
   Selector matches any img whose src contains "/tsa-" — app
   screens only, logos + avatars untouched.
   ========================================================= */

img[src*="/tsa-"] {
  transition: filter .4s ease;
  /* brightness(0.88) tones down the over-bright whites that appear after
     inversion — makes the phone UI softer, less shiny, still readable.
     saturate(0.92) reduces color pop a touch too. */
  filter: invert(1) hue-rotate(180deg) brightness(0.88) saturate(0.92);
  /* Soft radial mask on all 4 sides — fades the baked-in PNG halo ~90%
     without cropping the phone content. */
  -webkit-mask-image: radial-gradient(ellipse 96% 97% at center, #000 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 97% at center, #000 88%, transparent 100%);
}
.light-theme img[src*="/tsa-"] {
  filter: none;
  /* Light theme: baked halo is already faint; a lighter fade keeps edges clean. */
  -webkit-mask-image: radial-gradient(ellipse 98% 99% at center, #000 92%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 99% at center, #000 92%, transparent 100%);
}

/* Hero stock card artifact — CSS-built element that should behave like the
   phone screenshots: light-looking in dark page theme, dark-looking in
   light page theme. Because the light-theme CSS overrides turn
   .bg-graphite into a light surface, we KEEP the invert filter applied in
   both themes — that gives us a light card in dark theme and a dark card
   in light theme from the same filter stack. */
.bg-graphite.rounded-\[22px\] {
  transition: filter .4s ease;
  filter: invert(1) hue-rotate(180deg) brightness(0.88) saturate(0.92);
}

/* Small floating annotation chips (NEW SIGNAL · AAPL · BUY, Filed 40s ago,
   NVDA Strong Buy tooltip, +847 filings, NVDA STRONG BUY · 2m ago,
   FEAR & GREED · 72, signal receipt). Same filter in both themes so they
   flip with the surrounding background. Large content cards (feature
   cards, testimonials with shadow-[…]) don't match these selectors. */
.bg-graphite.rounded-full,
.bg-graphite.rounded-xl,
.bg-graphite.rounded-2xl.shadow-sm,
.bg-graphite2.rounded-full {
  transition: filter .4s ease;
  filter: invert(1) hue-rotate(180deg) brightness(0.88) saturate(0.92);
}

/* =========================================================
   LIGHT-MODE CARD SHADOWS
   Premium layered shadows so cards lift off the page,
   following the Stripe / Linear playbook (tight inner shadow,
   medium mid shadow, soft far shadow).
   ========================================================= */

.light-theme article.bg-graphite,
.light-theme article.rounded-2xl.bg-graphite {
  box-shadow: 0 0 14px rgba(11, 18, 32, 0.05) !important;
  transition: box-shadow .35s cubic-bezier(0.2,0.8,0.2,1),
              transform .35s cubic-bezier(0.2,0.8,0.2,1),
              border-color .35s ease !important;
}

.light-theme article.bg-graphite:hover {
  box-shadow: 0 0 20px rgba(47, 107, 255, 0.10) !important;
  border-color: rgba(47, 107, 255, 0.25) !important;
}

/* Hero stock card artifact */
.light-theme .bg-graphite.rounded-\[22px\] {
  box-shadow: 0 0 24px rgba(47, 107, 255, 0.10) !important;
}

/* Small floating chips (NEW SIGNAL, Filed 40s ago, +847 filings...) */
.light-theme .bg-graphite.border.rounded-full,
.light-theme .bg-graphite.border.rounded-xl,
.light-theme .bg-graphite.border.rounded-2xl {
  box-shadow: 0 0 10px rgba(11, 18, 32, 0.05) !important;
}

/* Sticky nav gets a soft divider shadow in light mode */
.light-theme header.sticky {
  box-shadow: 0 1px 0 rgba(11, 18, 32, 0.04);
}

/* =========================================================
   SCROLL REVEAL
   Elements with .reveal start hidden and animate in when they
   enter the viewport. Guarded by body.motion-ready so that if
   JS fails, content stays visible.
   ========================================================= */

body.motion-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(0.2,0.8,0.2,1),
    transform .75s cubic-bezier(0.2,0.8,0.2,1);
  will-change: opacity, transform;
}

body.motion-ready .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: direct children inside a .stagger parent fade in in sequence. */
body.motion-ready .stagger > *:nth-child(1).reveal { transition-delay: .05s; }
body.motion-ready .stagger > *:nth-child(2).reveal { transition-delay: .12s; }
body.motion-ready .stagger > *:nth-child(3).reveal { transition-delay: .19s; }
body.motion-ready .stagger > *:nth-child(4).reveal { transition-delay: .26s; }
body.motion-ready .stagger > *:nth-child(5).reveal { transition-delay: .33s; }
body.motion-ready .stagger > *:nth-child(6).reveal { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  body.motion-ready .reveal,
  body.motion-ready .reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HERO: ANIMATED GRADIENT BLOBS
   Adds slow, organic drift to the existing signal-glow divs
   in the hero. Purely decorative; no layout shift.
   ========================================================= */

@keyframes blob-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-50px, 40px, 0) scale(1.08); }
}
@keyframes blob-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -30px, 0) scale(1.12); }
}
@keyframes blob-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .35; }
  50%      { transform: translate3d(-30px, 20px, 0) scale(1.15); opacity: .55; }
}

.hero-blob-a { animation: blob-drift-a 16s ease-in-out infinite; }
.hero-blob-b { animation: blob-drift-b 22s ease-in-out infinite; }
.hero-blob-c { animation: blob-drift-c 19s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-blob-a, .hero-blob-b, .hero-blob-c { animation: none; }
}

/* =========================================================
   BENTO FEATURES GRID
   Premium card grid replacing the horizontal scroll tape.
   - Asymmetric column spans (7/5, 5/7, 6/6) for editorial rhythm
   - Gradient border, glass-adjacent surface, hover glow
   - Phone image peeks from bottom with signal-blue halo
   - Works identically in dark + light themes
   ========================================================= */

.bento-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47,107,255,0.06), transparent 55%),
    linear-gradient(180deg, #141A28 0%, #0F1420 100%);
  overflow: hidden;
  min-height: 420px;
  transition:
    transform .4s cubic-bezier(0.2,0.8,0.2,1),
    border-color .4s ease,
    box-shadow .4s ease;
}
.bento-card--large { min-height: 500px; }

@media (min-width: 1024px) {
  .bento-card { min-height: 480px; }
  .bento-card--large { min-height: 540px; }
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,107,255,0.32);
  box-shadow: 0 30px 70px -20px rgba(47,107,255,0.25);
}

/* Hover halo — soft blue radial from the top */
.bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at 50% -10%, rgba(47,107,255,0.22), transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.bento-card:hover::after { opacity: 1; }

/* Fine grid texture inside card */
.bento-card .bento-texture {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 75%);
}

/* Text block */
.bento-inner {
  position: relative;
  z-index: 1;
  padding: 32px 32px 12px 32px;
  flex-shrink: 0;
  max-width: 480px;
}
@media (min-width: 1024px) {
  .bento-inner { padding: 40px 40px 16px 40px; }
  .bento-card--large .bento-inner { max-width: 520px; padding: 48px 48px 20px 48px; }
}

.bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.bento-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #9AA7BE;
}

.bento-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.bento-icon--blue  { background: rgba(47,107,255,0.12);  color: #2F6BFF; border-color: rgba(47,107,255,0.2); }
.bento-icon--amber { background: rgba(255,181,71,0.12); color: #FFB547; border-color: rgba(255,181,71,0.2); }
.bento-icon--green { background: rgba(24,185,123,0.12); color: #18B97B; border-color: rgba(24,185,123,0.2); }

.bento-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: 28px;
  margin-bottom: 14px;
  color: #fff;
}
@media (min-width: 1024px) {
  .bento-title { font-size: 34px; }
  .bento-card--large .bento-title { font-size: 44px; }
}

.bento-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #9AA7BE;
  max-width: 400px;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .bento-desc { font-size: 15px; }
  .bento-card--large .bento-desc { font-size: 16px; max-width: 440px; }
}

.bento-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}

/* Phone showcase — peeks out from the bottom of the card */
.bento-phone {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 0 24px;
}
.bento-phone::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 70%;
  background: radial-gradient(ellipse 55% 60% at center top, rgba(47,107,255,0.40), rgba(47,107,255,0.10) 45%, transparent 72%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}
.bento-phone img {
  display: block;
  width: 260px;
  max-width: 70%;
  transform: translateY(28px);
  transition: transform .5s cubic-bezier(0.2,0.8,0.2,1);
  filter: drop-shadow(0 30px 60px rgba(11,18,32,0.45));
}
.bento-card--large .bento-phone img {
  width: 340px;
  max-width: 78%;
  transform: translateY(36px);
}
.bento-card:hover .bento-phone img { transform: translateY(18px); }
.bento-card--large:hover .bento-phone img { transform: translateY(22px); }

/* Corner ornament — thin diagonal line, editorial touch */
.bento-corner {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.25;
  transition: opacity .35s ease;
}
.bento-card:hover .bento-corner { opacity: 0.55; }

/* -------- LIGHT THEME -------- */
.light-theme .bento-card {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47,107,255,0.05), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border-color: rgba(11,18,32,0.07);
  box-shadow:
    0 1px 2px rgba(11,18,32,0.04),
    0 12px 30px -12px rgba(11,18,32,0.08);
}
.light-theme .bento-card:hover {
  border-color: rgba(47,107,255,0.32);
  box-shadow:
    0 4px 10px rgba(47,107,255,0.08),
    0 36px 70px -20px rgba(47,107,255,0.22);
}
.light-theme .bento-card::after {
  background: radial-gradient(800px circle at 50% -10%, rgba(47,107,255,0.14), transparent 55%);
}
.light-theme .bento-card .bento-texture {
  background-image:
    linear-gradient(to right, rgba(11,18,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,0.04) 1px, transparent 1px);
}
.light-theme .bento-title   { color: #0B1220; }
.light-theme .bento-desc    { color: #56647A; }
.light-theme .bento-eyebrow { color: #6F7A8F; }
.light-theme .bento-chip    {
  background: rgba(11,18,32,0.04);
  border-color: rgba(11,18,32,0.08);
}
.light-theme .bento-phone::before {
  background: radial-gradient(ellipse 55% 60% at center top, rgba(47,107,255,0.20), rgba(47,107,255,0.04) 45%, transparent 72%);
}
.light-theme .bento-phone img {
  filter: drop-shadow(0 24px 48px rgba(47,107,255,0.22));
}