/* ======================================================================
   ix-v3-motion.css
   Visual/motion layer only. Adds no new UI, changes no copy, prices,
   routes or JS behaviour. It is purely additive: every rule below
   targets a selector that already exists in styles.css / views.js /
   ix-v2-p5.js / ix-v2.css / ix-pop.js, and only styles/animates it.
   Loaded last on purpose (see index.html) so it can refine without a
   specificity fight. All motion is transform/opacity only — nothing
   here triggers layout, so it stays cheap even on the 18-tile grid.
   ====================================================================== */

:root {
  --ixv3-ease: cubic-bezier(.2, .7, .2, 1);
  --ixv3-fast: 160ms;
  --ixv3-med: 260ms;
}

/* Respect the user's OS setting first — this block wins by appearing
   last among equal-specificity rules, and every keyframe animation
   below is also wrapped so reduced-motion users get instant states. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Buttons (.button / .button-primary / .button-gold / .button-blue /
   .button-pink / .button-secondary) — real classes, static/styles.css
   --------------------------------------------------------------------- */
.button {
  transition: transform var(--ixv3-fast) var(--ixv3-ease),
              box-shadow var(--ixv3-med) var(--ixv3-ease),
              border-color var(--ixv3-fast) var(--ixv3-ease),
              background-color var(--ixv3-fast) var(--ixv3-ease);
}
.button-primary,
.button-gold,
.button-blue,
.button-pink {
  position: relative;
  overflow: hidden;
  background-size: 180% 100%;
  background-position: 0% 0%;
  transition: transform var(--ixv3-fast) var(--ixv3-ease),
              box-shadow var(--ixv3-med) var(--ixv3-ease),
              background-position var(--ixv3-med) var(--ixv3-ease);
}
.button-primary:hover,
.button-gold:hover,
.button-blue:hover,
.button-pink:hover {
  transform: translateY(-2px);
  background-position: 100% 0%;
}
.button:active { transform: translateY(0) scale(.98); }

/* ---------------------------------------------------------------------
   Studio tool grid — confirmed live markup:
   button.feature-tile.feature-grid-item[data-feature-state]
   with an inline --feature-accent custom property per tile.
   --------------------------------------------------------------------- */
.feature-tile {
  --ixv3-accent: var(--feature-accent, var(--gold));
  transition: transform var(--ixv3-med) var(--ixv3-ease),
              border-color var(--ixv3-med) var(--ixv3-ease),
              box-shadow var(--ixv3-med) var(--ixv3-ease);
  will-change: auto;
}
.feature-tile:hover,
.feature-tile:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ixv3-accent) 55%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38),
              0 0 0 1px color-mix(in srgb, var(--ixv3-accent) 30%, transparent) inset;
}
.feature-tile .tile-emoji,
.feature-tile .feature-grid-icon {
  display: inline-block;
  transition: transform var(--ixv3-med) var(--ixv3-ease);
}
.feature-tile:hover .tile-emoji,
.feature-tile:hover .feature-grid-icon {
  transform: scale(1.12) rotate(-6deg);
}

/* Construction / paused tiles: a slow diagonal shimmer instead of
   looking dead. Pure background-position animation — cheap. */
.feature-tile.construction,
.feature-tile.gsi-upgrade-paused {
  position: relative;
  overflow: hidden;
}
.feature-tile.construction::after,
.feature-tile.gsi-upgrade-paused::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 210, 122, .06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ixv3-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ixv3-shimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* ---------------------------------------------------------------------
   Sidebar — confirmed live v1 markup (.dashboard-sidebar / .sidebar-nav)
   plus the v2 grouped rail if it is active at runtime
   (html.ixv2 .ixv2-nav-item / .ixv2-rail-mini) — both covered so the
   motion is correct whichever one actually renders for an account.
   --------------------------------------------------------------------- */
.sidebar-nav button,
.ixv2-nav-item {
  transition: background-color var(--ixv3-fast) var(--ixv3-ease),
              color var(--ixv3-fast) var(--ixv3-ease),
              padding-left var(--ixv3-fast) var(--ixv3-ease);
}
.sidebar-nav button:hover,
.ixv2-nav-item:hover {
  padding-left: 14px;
}
.sidebar-nav button.active,
.ixv2-nav-item.active {
  position: relative;
}
.sidebar-nav button.active::before,
.ixv2-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 60%;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: var(--gradient-gold);
}
html.ixv2 .dashboard-shell,
html.ixv2.ixv2-rail-mini .dashboard-shell {
  transition: grid-template-columns var(--ixv3-med) var(--ixv3-ease);
}

/* Collapsible category headers inside the tool grid, if the grouped
   v2 rail/grid markup is active (.ixv2-group-label + caret toggle). */
.ixv2-group-label { transition: color var(--ixv3-fast) var(--ixv3-ease); }
.ixv2-group-label svg,
.ixv2-group-label .caret {
  transition: transform var(--ixv3-med) var(--ixv3-ease);
}

/* ---------------------------------------------------------------------
   Tool dialog (.feature-dialog / .feature-dialog-panel) — real markup,
   static/styles.css. Replace the instant show with a soft pop-in.
   --------------------------------------------------------------------- */
.feature-dialog-backdrop {
  animation: ixv3-fade-in var(--ixv3-med) var(--ixv3-ease) both;
}
.feature-dialog-panel {
  animation: ixv3-panel-in var(--ixv3-med) var(--ixv3-ease) both;
}
@keyframes ixv3-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ixv3-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.feature-dialog-close {
  transition: transform var(--ixv3-fast) var(--ixv3-ease),
              border-color var(--ixv3-fast) var(--ixv3-ease);
}
.feature-dialog-close:hover { transform: rotate(90deg); }

/* ---------------------------------------------------------------------
   GSI progress ring (.ixp-ring, built by ix-pop.js) — purely smoothing
   the stroke transition the existing script already drives via JS.
   --------------------------------------------------------------------- */
.ixp-ring-fg {
  transition: stroke-dashoffset 420ms var(--ixv3-ease);
}
.ixp-ring { animation: ixv3-fade-in var(--ixv3-med) var(--ixv3-ease) both; }

/* ---------------------------------------------------------------------
   Rank card / stat boxes (.rank-card, .stat-box) — real markup
   --------------------------------------------------------------------- */
.rank-card,
.stat-box {
  transition: transform var(--ixv3-med) var(--ixv3-ease),
              border-color var(--ixv3-med) var(--ixv3-ease);
}
.rank-card:hover,
.stat-box:hover {
  transform: translateY(-2px);
}
.rank-card-icon {
  display: inline-block;
  animation: ixv3-bob 4.5s ease-in-out infinite;
}
@keyframes ixv3-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ---------------------------------------------------------------------
   Hero (.hero / .hero-copy / .hero-actions / .hero-guide-card) —
   real landing markup. Staggered entrance, one shot on load.
   --------------------------------------------------------------------- */
.hero-guide-card,
.hero-copy > *,
.hero-actions {
  animation: ixv3-rise var(--ixv3-med) var(--ixv3-ease) both;
}
.hero-guide-card { animation-delay: 0ms; }
.hero-copy > *:nth-child(1) { animation-delay: 40ms; }
.hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.hero-copy > *:nth-child(3) { animation-delay: 140ms; }
.hero-copy > *:nth-child(4) { animation-delay: 190ms; }
.hero-actions { animation-delay: 230ms; }
@keyframes ixv3-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hero-guide-arrow { display: inline-block; transition: transform var(--ixv3-fast) var(--ixv3-ease); }
.hero-guide-card:hover .hero-guide-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Scroll reveal utility — class applied by ix-v3-motion.js only,
   never required for the page to work (default state is visible).
   --------------------------------------------------------------------- */
.ixv3-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ixv3-med) var(--ixv3-ease),
              transform var(--ixv3-med) var(--ixv3-ease);
}
.ixv3-reveal.is-in { opacity: 1; transform: none; }
/* If JS fails to load for any reason, nothing stays hidden: */
.no-js .ixv3-reveal { opacity: 1; transform: none; }