/* ─────────────────────────────────────────────────────────────
 * Hero section — app window interactivity, mobile preview,
 * Anchor-style animations, product chips
 * ───────────────────────────────────────────────────────────── */

/* ── App window — tab switcher ─────────────────────────────── */

.app-panel { display: none; }

#app-tab-buttons:checked ~ .app-inner .panel-buttons,
#app-tab-tokens:checked  ~ .app-inner .panel-tokens,
#app-tab-type:checked    ~ .app-inner .panel-type,
#app-tab-scope:checked   ~ .app-inner .panel-scope {
  display: flex;
}

.tab-lbl {
  transition: color 0.15s ease, border-color 0.15s ease;
}

#app-tab-buttons:checked ~ .app-inner .tab-lbl-buttons,
#app-tab-tokens:checked  ~ .app-inner .tab-lbl-tokens,
#app-tab-type:checked    ~ .app-inner .tab-lbl-type,
#app-tab-scope:checked   ~ .app-inner .tab-lbl-scope {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* ── Theme toggle — icon/label swap ────────────────────────── */

.theme-icon-light,
.theme-label-light { display: none; }

#app-theme:checked ~ .app-inner .theme-icon-dark,
#app-theme:checked ~ .app-inner .theme-label-dark  { display: none; }

#app-theme:checked ~ .app-inner .theme-icon-light,
#app-theme:checked ~ .app-inner .theme-label-light { display: inline; }

/* Light mode CSS token overrides */
#app-theme:checked ~ .app-inner {
  --color-bg-base:      rgba(248, 250, 252, 1);
  --color-bg-subtle:    rgba(241, 245, 249, 1);
  --color-bg-elevated:  rgba(226, 232, 240, 1);
  --color-text-hi:      rgba(2,   6,  23,  1);
  --color-text-mid:     rgba(71,  85, 105, 1);
  --color-text-lo:      rgba(148, 163, 184, 1);
  --color-text-off:     rgba(203, 213, 225, 1);
  --color-border:       rgba(203, 213, 225, 1);
  --color-border-hi:    rgba(100, 116, 139, 1);
  --color-border-brand: rgba(99,  102, 241, 1);
  --color-border-focus: rgba(99,  102, 241, 1);
  --color-brand:        rgba(79,  70,  229, 1);
  --color-action:       rgba(99,  102, 241, 1);
  --color-action-hover: rgba(79,  70,  229, 1);
  --color-action-sec:   rgba(238, 242, 255, 1);
}

/* Tooltip parallax */
.hero-tooltip {
  --px: 0px;
  --py: 0px;
  translate: var(--px) var(--py);
  transition: translate 0.15s ease-out;
}

/* ── Mobile preview — auto-cycling panels ──────────────────── */

.mp-panel {
  position: absolute;
  inset: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
}

.mp-panel-1 { animation: mp-cycle-1 12s linear infinite; }
.mp-panel-2 { animation: mp-cycle-2 12s linear infinite; }
.mp-panel-3 { animation: mp-cycle-3 12s linear infinite; }
.mp-panel-4 { animation: mp-cycle-4 12s linear infinite; }

@keyframes mp-cycle-1 {
  0%    { opacity: 1; }
  23%   { opacity: 1; }
  25%   { opacity: 0; }
  97%   { opacity: 0; }
  100%  { opacity: 1; }
}

@keyframes mp-cycle-2 {
  0%    { opacity: 0; }
  23%   { opacity: 0; }
  25%   { opacity: 1; }
  48%   { opacity: 1; }
  50%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes mp-cycle-3 {
  0%    { opacity: 0; }
  48%   { opacity: 0; }
  50%   { opacity: 1; }
  73%   { opacity: 1; }
  75%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes mp-cycle-4 {
  0%    { opacity: 0; }
  73%   { opacity: 0; }
  75%   { opacity: 1; }
  97%   { opacity: 1; }
  100%  { opacity: 0; }
}

/* Indicator dots */
.mp-dot {
  border-radius: 9999px;
  background: rgba(71, 85, 105, 1);
}

.mp-dot-1 { animation: mp-dot-1 12s linear infinite; }
.mp-dot-2 { animation: mp-dot-2 12s linear infinite; }
.mp-dot-3 { animation: mp-dot-3 12s linear infinite; }
.mp-dot-4 { animation: mp-dot-4 12s linear infinite; }

@keyframes mp-dot-1 {
  0%    { background: rgba(129, 140, 248, 1); }
  23%   { background: rgba(129, 140, 248, 1); }
  25%   { background: rgba(71, 85, 105, 1); }
  100%  { background: rgba(71, 85, 105, 1); }
}

@keyframes mp-dot-2 {
  0%    { background: rgba(71, 85, 105, 1); }
  23%   { background: rgba(71, 85, 105, 1); }
  25%   { background: rgba(129, 140, 248, 1); }
  48%   { background: rgba(129, 140, 248, 1); }
  50%   { background: rgba(71, 85, 105, 1); }
  100%  { background: rgba(71, 85, 105, 1); }
}

@keyframes mp-dot-3 {
  0%    { background: rgba(71, 85, 105, 1); }
  48%   { background: rgba(71, 85, 105, 1); }
  50%   { background: rgba(129, 140, 248, 1); }
  73%   { background: rgba(129, 140, 248, 1); }
  75%   { background: rgba(71, 85, 105, 1); }
  100%  { background: rgba(71, 85, 105, 1); }
}

@keyframes mp-dot-4 {
  0%    { background: rgba(71, 85, 105, 1); }
  73%   { background: rgba(71, 85, 105, 1); }
  75%   { background: rgba(129, 140, 248, 1); }
  97%   { background: rgba(129, 140, 248, 1); }
  100%  { background: rgba(71, 85, 105, 1); }
}

/* ── Anchor-style entry animations ─────────────────────────── */

@keyframes word-in {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateX(-30deg) translateY(12px);
  }
  to {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0);
  }
}

@keyframes chip-fall {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateX(-22deg) translateY(-56px) scale(0.96);
  }
  65% {
    transform: perspective(900px) rotateX(1.5deg) translateY(3px) scale(1.003);
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Initial state: invisible but laid out */
.word-in {
  display: inline-block;
  opacity: 0;
}

.chip-falling {
  opacity: 0;
}

.marquee-track {
  display: flex;
  width: max-content;
}

/* Animations fire once body.js-loaded is set */
.js-loaded .word-in {
  animation: word-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js-loaded .chip-falling {
  animation: chip-fall 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js-loaded .marquee-track {
  animation: marquee 38s linear infinite;
}

/* Marquee pause on hover */
.marquee-track:hover {
  animation-play-state: paused !important;
}

/* ── Product chips ─────────────────────────────────────────── */

.product-chip {
  overflow: hidden;
  transition:
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

.product-chip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(var(--accent-rgb), 0.9);
  border-radius: 0 0 20px 20px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-chip:hover::after {
  width: 100%;
}

.product-chip:hover {
  border-color: rgba(var(--accent-rgb), 1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 56px rgba(0,0,0,0.3),
    0 0 32px rgba(var(--accent-rgb), 0.2);
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mp-panel-1 { animation: none; opacity: 1; }
  .mp-panel-2,
  .mp-panel-3,
  .mp-panel-4 { animation: none; opacity: 0; }
  .mp-dot-1   { animation: none; background: rgba(129, 140, 248, 1); }
  .mp-dot-2,
  .mp-dot-3,
  .mp-dot-4   { animation: none; }
  .word-in, .chip-falling { opacity: 1; }
  .js-loaded .word-in       { animation: none; opacity: 1; }
  .js-loaded .chip-falling  { animation: none; opacity: 1; }
  .js-loaded .marquee-track { animation: none; }
  .product-chip:hover { border-color: inherit; box-shadow: none; }
  .product-chip::after { display: none; }
  .marquee-track:hover { animation-play-state: running !important; }
}