/* hero-anim.css — futuristic on-brand animations for the four product
   sections (extension, browser, app, ai) on whitelabel.dev homepage.

   All CSS-only, GPU-accelerated transforms, no JS. Black/white palette
   to match the whitelabel.dev minimal lockup. Respects prefers-reduced-
   motion (animations bypass to a static state for accessibility). */

/* ────────────────────────────────────────────────────────────────────
   Shared 2-column hero layout — text on left, animation on right.
   Mobile stacks vertically.
   ──────────────────────────────────────────────────────────────────── */

/* Hero layout: text lives in the natural flow (left column), animation
   is absolute-positioned on the right side of the section. Bulletproof
   across browsers; sidesteps any subtle CSS Grid quirks. */

@media (min-width: 881px) {
  .browser-hero {
    position: relative;
    padding-right: 400px !important;       /* reserve right gutter for the animation */
    min-height: 380px;
  }
  .browser-hero > .hero-anim {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 340px;
  }
  .browser-hero .browser-tag {
    max-width: 36rem;                       /* prevent tag from running into the gutter */
  }
}

@media (max-width: 880px) {
  /* Mobile: stack. Animation rides below the existing text content. */
  .browser-hero > .hero-anim {
    width: 100%;
    max-width: 320px;
    margin: 1.5rem auto 0;
    display: block;
  }
}

.hero-anim {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 0;
  isolation: isolate;
}

/* Subtle dot-grid background shared by all four panels — adds the
   "futuristic terminal" texture without screaming. */
.hero-anim::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10, 10, 10, 0.08) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Soft vignette so the eye lands on the animation, not the edges */
.hero-anim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 50%,
              rgba(255, 255, 255, 0) 60%,
              rgba(255, 255, 255, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────
   #1 — EXTENSION: tile composition
   A 3×3 grid of mini frame-marks tiling, each phase-shifted. Reads as
   "new tab workspace assembling itself." Outer container does a
   2°/-2° tilt to feel alive without distracting.
   ──────────────────────────────────────────────────────────────────── */

.hero-anim-extension {}
.hero-anim-extension .anim-stage {
  position: absolute;
  inset: 18%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6%;
  animation: ext-stage 12s ease-in-out infinite;
}
.hero-anim-extension .anim-stage span {
  display: block;
  background: transparent;
  border: 1.5px solid #0a0a0a;
  position: relative;
  opacity: 0;
  animation: ext-tile-pulse 3.6s ease-in-out infinite;
}
.hero-anim-extension .anim-stage span::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 1.5px solid #0a0a0a;
}
.hero-anim-extension .anim-stage span:nth-child(1) { animation-delay: 0.00s; }
.hero-anim-extension .anim-stage span:nth-child(2) { animation-delay: 0.15s; }
.hero-anim-extension .anim-stage span:nth-child(3) { animation-delay: 0.30s; }
.hero-anim-extension .anim-stage span:nth-child(4) { animation-delay: 0.15s; }
.hero-anim-extension .anim-stage span:nth-child(5) { animation-delay: 0.45s; }
.hero-anim-extension .anim-stage span:nth-child(6) { animation-delay: 0.60s; }
.hero-anim-extension .anim-stage span:nth-child(7) { animation-delay: 0.30s; }
.hero-anim-extension .anim-stage span:nth-child(8) { animation-delay: 0.60s; }
.hero-anim-extension .anim-stage span:nth-child(9) { animation-delay: 0.90s; }

@keyframes ext-stage {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(2deg) scale(0.98); }
  75%      { transform: rotate(-2deg) scale(0.98); }
}

@keyframes ext-tile-pulse {
  0%   { opacity: 0;   transform: scale(0.6); }
  20%  { opacity: 1;   transform: scale(1); }
  60%  { opacity: 1;   transform: scale(1); }
  90%  { opacity: 0;   transform: scale(1.1); }
  100% { opacity: 0;   transform: scale(0.6); }
}

/* ────────────────────────────────────────────────────────────────────
   #2 — BROWSER: shield ping
   Concentric frames radiating outward from a solid central mark.
   Reads as "privacy shield active." Center frame stays solid; outer
   pings dissolve as they reach the edge.
   ──────────────────────────────────────────────────────────────────── */

.hero-anim-browser .anim-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-anim-browser .anim-mark {
  width: 38%;
  aspect-ratio: 1;
  border: 2.5px solid #0a0a0a;
  position: relative;
  z-index: 3;
}
.hero-anim-browser .anim-mark::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 2.5px solid #0a0a0a;
}
.hero-anim-browser .anim-ping {
  position: absolute;
  top: 50%; left: 50%;
  width: 38%;
  aspect-ratio: 1;
  border: 1.5px solid #0a0a0a;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  animation: browser-ping 3.6s ease-out infinite;
}
.hero-anim-browser .anim-ping:nth-child(2) { animation-delay: 0.9s; }
.hero-anim-browser .anim-ping:nth-child(3) { animation-delay: 1.8s; }
.hero-anim-browser .anim-ping:nth-child(4) { animation-delay: 2.7s; }

@keyframes browser-ping {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  60%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0;    }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0;    }
}

/* ────────────────────────────────────────────────────────────────────
   #3 — APP: ecosystem orbit
   Three small marks orbiting a central mark in a perfect circle, with
   a dashed orbit ring + connecting beams that pulse from center.
   ──────────────────────────────────────────────────────────────────── */

.hero-anim-app .anim-stage {
  position: absolute;
  inset: 12%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-anim-app .anim-orbit {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(10, 10, 10, 0.25);
  border-radius: 50%;
  animation: app-orbit-spin 28s linear infinite;
}
.hero-anim-app .anim-orbit span {
  position: absolute;
  top: 50%; left: 50%;
  width: 18%;
  aspect-ratio: 1;
  margin-top: -9%;
  margin-left: -9%;
  background: #ffffff;
  border: 1.5px solid #0a0a0a;
}
.hero-anim-app .anim-orbit span::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 1.5px solid #0a0a0a;
}
/* place the 3 satellites at 0° / 120° / 240° via transform-origin */
.hero-anim-app .anim-orbit span:nth-child(1) {
  transform: rotate(0deg) translate(0, -50%) rotate(0deg);
  transform-origin: 50% 100%;
}
.hero-anim-app .anim-orbit span:nth-child(2) {
  transform: rotate(120deg) translate(0, -50%) rotate(-120deg);
  transform-origin: 50% 100%;
}
.hero-anim-app .anim-orbit span:nth-child(3) {
  transform: rotate(240deg) translate(0, -50%) rotate(-240deg);
  transform-origin: 50% 100%;
}
/* offset the orbit so the satellites ride the dashed ring */
.hero-anim-app .anim-orbit {
  position: absolute;
  inset: 8%;
}

.hero-anim-app .anim-core {
  position: relative;
  width: 28%;
  aspect-ratio: 1;
  border: 2.5px solid #0a0a0a;
  background: #ffffff;
  z-index: 3;
}
.hero-anim-app .anim-core::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 2.5px solid #0a0a0a;
}
.hero-anim-app .anim-core::before {
  /* central pulsing ring */
  content: '';
  position: absolute;
  inset: -30%;
  border: 1px solid rgba(10, 10, 10, 0.3);
  border-radius: 50%;
  animation: app-core-pulse 2.4s ease-in-out infinite;
  z-index: -1;
}

@keyframes app-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes app-core-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0;   transform: scale(1.6); }
}

/* ────────────────────────────────────────────────────────────────────
   #4 — AI: constellation + glitch
   Dot field that fades in random patterns, then a brand mark glitches
   into view briefly. Subtle horizontal scan-line slides every cycle.
   ──────────────────────────────────────────────────────────────────── */

.hero-anim-ai .anim-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero-anim-ai .anim-dots {
  position: absolute;
  inset: 12%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4%;
}
.hero-anim-ai .anim-dots span {
  background: #0a0a0a;
  border-radius: 50%;
  opacity: 0;
  animation: ai-dot-twinkle 5.4s ease-in-out infinite;
}
/* pseudo-random delays for 64 dots — repeating phase pattern */
.hero-anim-ai .anim-dots span:nth-child(8n+1) { animation-delay: 0.0s; }
.hero-anim-ai .anim-dots span:nth-child(8n+2) { animation-delay: 0.4s; }
.hero-anim-ai .anim-dots span:nth-child(8n+3) { animation-delay: 1.0s; }
.hero-anim-ai .anim-dots span:nth-child(8n+4) { animation-delay: 1.6s; }
.hero-anim-ai .anim-dots span:nth-child(8n+5) { animation-delay: 2.2s; }
.hero-anim-ai .anim-dots span:nth-child(8n+6) { animation-delay: 2.8s; }
.hero-anim-ai .anim-dots span:nth-child(8n+7) { animation-delay: 3.4s; }
.hero-anim-ai .anim-dots span:nth-child(8n+8) { animation-delay: 4.0s; }

@keyframes ai-dot-twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.6); }
  20%      { opacity: 0.7;  transform: scale(1.4); }
  40%      { opacity: 0.18; transform: scale(1);   }
  60%      { opacity: 0.55; transform: scale(1.2); }
}

.hero-anim-ai .anim-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 36%;
  aspect-ratio: 1;
  border: 2.5px solid #0a0a0a;
  background: #ffffff;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: ai-mark-glitch 5.4s steps(1, end) infinite;
}
.hero-anim-ai .anim-mark::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 2.5px solid #0a0a0a;
}

.hero-anim-ai .anim-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(10, 10, 10, 0.5),
              transparent);
  top: 0;
  z-index: 4;
  animation: ai-scan 5.4s linear infinite;
}

@keyframes ai-mark-glitch {
  /* mostly hidden, snaps in twice per cycle with offset */
  0%, 25%   { opacity: 0; transform: translate(-50%, -50%) skewX(0deg); }
  26%       { opacity: 1; transform: translate(-50%, -50%) skewX(3deg); }
  30%       { opacity: 0.7; transform: translate(-48%, -52%) skewX(-2deg); }
  34%       { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
  60%       { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
  62%       { opacity: 0.55; transform: translate(-52%, -50%) skewX(2deg); }
  64%       { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
  100%      { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
}

@keyframes ai-scan {
  0%   { top: -2%;   opacity: 0;   }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { top: 102%;  opacity: 0;   }
}

/* ────────────────────────────────────────────────────────────────────
   ext-store-row — small browser-logo strip under the install CTA.
   ──────────────────────────────────────────────────────────────────── */

.ext-store-row {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}
.ext-store-row li { display: inline-flex; }
.ext-store-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 0.4rem;
  background: #fff;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.ext-store-row a:hover {
  border-color: rgba(10, 10, 10, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.08);
}
.ext-store-row img {
  display: block;
  filter: none;
}

/* The .dl-btn-icon for the chrome SVG keeps its native multi-color
   palette — override the parent button's currentColor fill. */
.dl-btn .dl-btn-icon svg [fill="#ea4335"],
.dl-btn .dl-btn-icon svg [fill="#fbbc04"],
.dl-btn .dl-btn-icon svg [fill="#34a853"],
.dl-btn .dl-btn-icon svg [fill="#4285f4"],
.dl-btn .dl-btn-icon svg [fill="#fff"] {
  /* explicit fills preserved — defensive against `fill: currentColor`
     applied to the parent. */
}

/* ────────────────────────────────────────────────────────────────────
   INTERACTIVE PORTAL — bottom-of-homepage transition section.
   Full-bleed black panel, terminal-rain columns running behind a
   centered glow-button that links to interactive.whitelabel.dev.
   ──────────────────────────────────────────────────────────────────── */

.interactive-portal {
  position: relative;
  margin: 4rem -1.5rem 0;
  padding: 6rem 1.5rem;
  background: #050505;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.interactive-portal-rain {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.interactive-portal-rain .col {
  position: relative;
  overflow: hidden;
}
.interactive-portal-rain .col::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -100%;
  width: 1px;
  height: 65%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55) 70%, #ffffff 100%);
  transform: translateX(-50%);
  animation: portal-rain 4.5s linear infinite;
}
.interactive-portal-rain .col:nth-child(1)::before  { animation-delay: 0.0s;  animation-duration: 3.2s; }
.interactive-portal-rain .col:nth-child(2)::before  { animation-delay: 0.7s;  animation-duration: 4.8s; }
.interactive-portal-rain .col:nth-child(3)::before  { animation-delay: 1.3s;  animation-duration: 3.9s; }
.interactive-portal-rain .col:nth-child(4)::before  { animation-delay: 0.4s;  animation-duration: 5.1s; }
.interactive-portal-rain .col:nth-child(5)::before  { animation-delay: 2.0s;  animation-duration: 3.5s; }
.interactive-portal-rain .col:nth-child(6)::before  { animation-delay: 0.9s;  animation-duration: 4.4s; }
.interactive-portal-rain .col:nth-child(7)::before  { animation-delay: 2.6s;  animation-duration: 3.8s; }
.interactive-portal-rain .col:nth-child(8)::before  { animation-delay: 1.8s;  animation-duration: 5.0s; }
.interactive-portal-rain .col:nth-child(9)::before  { animation-delay: 0.2s;  animation-duration: 3.7s; }
.interactive-portal-rain .col:nth-child(10)::before { animation-delay: 3.0s;  animation-duration: 4.2s; }
.interactive-portal-rain .col:nth-child(11)::before { animation-delay: 1.5s;  animation-duration: 3.4s; }
.interactive-portal-rain .col:nth-child(12)::before { animation-delay: 2.3s;  animation-duration: 4.7s; }
.interactive-portal-rain .col:nth-child(13)::before { animation-delay: 0.8s;  animation-duration: 5.3s; }
.interactive-portal-rain .col:nth-child(14)::before { animation-delay: 2.9s;  animation-duration: 3.6s; }
.interactive-portal-rain .col:nth-child(15)::before { animation-delay: 1.1s;  animation-duration: 4.0s; }
.interactive-portal-rain .col:nth-child(16)::before { animation-delay: 0.5s;  animation-duration: 4.9s; }
.interactive-portal-rain .col:nth-child(17)::before { animation-delay: 3.5s;  animation-duration: 3.3s; }
.interactive-portal-rain .col:nth-child(18)::before { animation-delay: 1.7s;  animation-duration: 4.6s; }
.interactive-portal-rain .col:nth-child(19)::before { animation-delay: 0.3s;  animation-duration: 4.1s; }
.interactive-portal-rain .col:nth-child(20)::before { animation-delay: 2.4s;  animation-duration: 3.8s; }
.interactive-portal-rain .col:nth-child(21)::before { animation-delay: 1.0s;  animation-duration: 5.2s; }
.interactive-portal-rain .col:nth-child(22)::before { animation-delay: 2.7s;  animation-duration: 3.5s; }
.interactive-portal-rain .col:nth-child(23)::before { animation-delay: 0.6s;  animation-duration: 4.3s; }
.interactive-portal-rain .col:nth-child(24)::before { animation-delay: 3.2s;  animation-duration: 4.0s; }

@keyframes portal-rain {
  0%   { top: -70%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Soft radial spotlight on the button so the rain reads as backdrop */
.interactive-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 50%,
              rgba(5, 5, 5, 0.85) 0%,
              rgba(5, 5, 5, 0.65) 30%,
              rgba(5, 5, 5, 0.1) 65%,
              transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.interactive-portal-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.interactive-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.85rem 1.05rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.interactive-portal-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 255, 255, 0.18) 50%,
              transparent 100%);
  transform: translateX(-100%);
  animation: portal-btn-sweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
.interactive-portal-btn:hover,
.interactive-portal-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255, 255, 255, 0.12);
}
.interactive-portal-btn-diamond {
  font-size: 0.85rem;
  line-height: 1;
}
.interactive-portal-btn-label {
  display: inline-block;
}
.interactive-portal-btn-arrow {
  transition: transform 0.25s ease;
}
.interactive-portal-btn:hover .interactive-portal-btn-arrow {
  transform: translateX(4px);
}
@keyframes portal-btn-sweep {
  0%, 60% { transform: translateX(-100%); }
  80%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

.interactive-portal-sub {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

/* ────────────────────────────────────────────────────────────────────
   prefers-reduced-motion — keep the static composition but kill the
   movement so users with vestibular sensitivity aren't punished.
   ──────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-anim *,
  .hero-anim *::before,
  .hero-anim *::after {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-anim-ai .anim-mark { opacity: 1; }
  .hero-anim-ai .anim-dots span { opacity: 0.3; }
  .hero-anim-ai .anim-scan { display: none; }
  .hero-anim-app .anim-orbit { animation: none !important; }
}