/* Interactive effects. Everything here degrades gracefully: effects only apply under html.fx, which fx.js sets. */

/* ---- Scroll progress bar ---- */
.fx-progress {
  position: fixed; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, #ff7a00, #ffb066);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 200; pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.8);
}

/* ---- Hero: embers, spotlight, living gear ---- */
.hero { isolation: isolate; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero .hazard { z-index: 2; }
.hero-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px 420px at var(--sx, 70%) var(--sy, 40%), rgba(255, 122, 0, 0.22), transparent 70%);
  opacity: 0; transition: opacity 0.4s ease;
}
html.fx .hero:hover .hero-spot { opacity: 1; }

.hero h1 em {
  background: linear-gradient(100deg, #ff7a00 0%, #ff7a00 35%, #ffd2a1 50%, #ff7a00 65%, #ff7a00 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.fx .hero h1 em { animation: shine 5s linear infinite; }
@keyframes shine { from { background-position: 125% 0; } to { background-position: -125% 0; } }

.hero-art { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-art svg { transition: transform 0.2s ease-out; }
html.fx .hero-art svg { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px)); }
.hero-art .gear { transform-box: view-box; transform-origin: 100px 100px; }
.hero-art .ring-out { transform-box: view-box; transform-origin: 100px 100px; }
html.fx .hero-art .gear { animation: spin 14s linear infinite; }
html.fx .hero-art .ring-out { animation: spin 40s linear infinite reverse; }
html.fx .hero-art.rev .gear { animation-duration: 0.9s; }
html.fx .hero-art .wrench { transform-box: view-box; transform-origin: 46px 174px; transition: transform 0.3s ease; }
html.fx .hero-art:hover .wrench { transform: rotate(-12deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-hint { color: #8a8a8a; font-size: 0.78rem; text-align: center; margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; }

/* hazard tape that moves */
html.fx .hazard, html.fx .page-hero::after { background-size: 51px 100%; animation: tape 2.4s linear infinite; }
@keyframes tape { from { background-position: 0 0; } to { background-position: 51px 0; } }

/* ---- Scroll reveal ---- */
html.fx [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
html.fx [data-reveal].in { opacity: 1; transform: none; }

/* ---- Tilt + shine on cards ---- */
html.fx .card-hover { transform-style: preserve-3d; position: relative; overflow: hidden; will-change: transform; }
html.fx .card-hover.tilting { transition: none; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
html.fx .card-hover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(260px 260px at var(--gx, 50%) var(--gy, 50%), rgba(255, 122, 0, 0.35), transparent 65%);
}
html.fx .card-hover.tilting::after { opacity: 1; }
.card-hover:hover .icon { animation: wiggle 0.6s ease; }
@keyframes wiggle { 25% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.08); } 100% { transform: none; } }

/* ---- Magnetic buttons ---- */
html.fx .btn.magnet { transition: transform 0.15s ease-out, background 0.12s ease; }

/* ---- Steps ---- */
html.fx .steps li { transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s, box-shadow 0.3s; }
.steps li:hover { border-color: var(--amber); box-shadow: 0 10px 26px rgba(255, 122, 0, 0.25); transform: translateY(-4px); }

/* ---- Dark band cards ---- */
.dark-band .card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dark-band .card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255, 122, 0, 0.3); }

/* ---- Troubleshooter ---- */
.diag { background: #0d0d0d; color: #fff; border-radius: 20px; border: 2px solid var(--amber); padding: 28px; box-shadow: 0 20px 60px rgba(255, 122, 0, 0.18); }
.diag h3 { color: #fff; margin: 0 0 4px; }
.diag .sub { color: #cfcfcf; margin: 0 0 18px; }
.diag-steps { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; flex-wrap: wrap; }
.diag-steps li { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: #1f1f1f; color: #8a8a8a; }
.diag-steps li.on { background: var(--amber); color: #0d0d0d; }
.diag-steps li.done { background: #3a2410; color: var(--amber); }
.diag-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.diag-btn {
  font: inherit; text-align: left; cursor: pointer; color: #fff;
  background: #1a1a1a; border: 2px solid #333; border-radius: 14px; padding: 16px;
  font-weight: 700; transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.diag-btn:hover, .diag-btn:focus-visible { border-color: var(--amber); background: #251a10; transform: translateY(-3px); }
.diag-btn .icon { background: var(--amber); margin-bottom: 10px; }
.diag-btn .icon svg { stroke: #0d0d0d; }
.diag-back { font: inherit; background: none; border: 0; color: var(--amber); cursor: pointer; font-weight: 700; padding: 0; margin: 0 0 14px; }
.diag-q { font-weight: 800; font-size: 1.15rem; margin: 0 0 14px; }
.diag-result { display: grid; gap: 14px; animation: pop 0.35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.diag-result .box { background: #1a1a1a; border: 1px solid #333; border-left: 5px solid var(--amber); border-radius: 12px; padding: 14px 16px; }
.diag-result .box h4 { margin: 0 0 6px; color: var(--amber); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.diag-result .box p, .diag-result .box ul { margin: 0; color: #e8e8e8; }
.diag-result .box ul { padding-left: 20px; }
.diag-result .box.warn { border-left-color: #ff4d3d; background: #2a1411; }
.diag-result .box.warn h4 { color: #ff8a7d; }
.diag-note { color: #9a9a9a; font-size: 0.85rem; margin: 6px 0 0; }
.diag-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  html.fx [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.fx .hero h1 em, html.fx .hero-art .gear, html.fx .hero-art .ring-out, html.fx .hazard, html.fx .page-hero::after { animation: none; }
  .diag-result { animation: none; }
}
@media (max-width: 760px) {
  .hero-hint { display: none; }
  .diag { padding: 20px; }
}