/* ============================================================
   Nordisk Bilpleie — styles for interactive product demos
   Paired with assets/fx-demos.js. Classes created at runtime
   (.fx-scratch, .fx-chip, .fx-bead …) are styled here.
   ============================================================ */

/* ---------- shared shell ---------- */
.fxwrap { position: relative; }
.fxsurface { position: relative; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.fxbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.fxnote { color: var(--text-secondary); font-size: .88rem; }
.fxhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  color: rgba(255,255,255,.72); font-weight: 600; font-size: .95rem; pointer-events: none; transition: opacity .3s; text-align: center; padding: 0 18px; z-index: 4; }
.fxhint .ic { width: 18px; height: 18px; }
.fx-shake { animation: fxShake .4s; }
@keyframes fxShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }

/* toggle pill (PPF on/off, coating on/off) */
.fxtoggle { display: inline-flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: var(--r-pill);
  background: var(--ice); border: 1px solid var(--border); font-weight: 600; color: var(--navy); cursor: pointer; font-size: .92rem; }
.fxtoggle__sw { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c7d0dd; transition: background .25s; flex: none; }
.fxtoggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .25s; }
.fxtoggle[aria-pressed="true"] .fxtoggle__sw { background: var(--teal); }
.fxtoggle[aria-pressed="true"] .fxtoggle__sw::after { transform: translateX(20px); }
.fxstate { font-weight: 700; }

/* ============================================================
   1 · SELF-HEALING
   ============================================================ */
.shx { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; margin-bottom: 4px;
  background: radial-gradient(130% 130% at 30% 0%, #27405b 0%, #13243a 46%, #0a0f18 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 34px 70px -34px rgba(255,255,255,.22);
  cursor: crosshair; touch-action: none; }
.shx::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.02) 54%, transparent 64%); }
.shx.is-drawing .fxhint, .shx.has-marks .fxhint { opacity: 0; }
.fx-scratch { position: absolute; height: 2px; transform-origin: left center; border-radius: 2px; pointer-events: none; opacity: .92;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 18%, rgba(255,255,255,.9) 82%, rgba(255,255,255,0));
  filter: blur(.3px); transition: opacity .9s ease; }
.fx-scratch.healed { opacity: 0; }
.shx__heat { position: absolute; top: -12%; left: 0; height: 124%; width: 100px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,150,70,0) 8%, rgba(255,140,60,.6) 50%, rgba(255,95,40,.32) 72%, transparent);
  filter: blur(8px); mix-blend-mode: screen; }
.shx.is-healing .shx__heat { animation: shxHeat 1.4s ease-in-out forwards; }
@keyframes shxHeat { 0%{transform:translateX(-180%);opacity:0} 15%{opacity:1} 82%{opacity:1} 100%{transform:translateX(820%);opacity:0} }
.shx__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: var(--r-pill); background: rgba(10,14,22,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: .8rem; font-weight: 600; pointer-events: none; z-index: 4; }
.shx__tag .ic { width: 14px; height: 14px; color: #FF8A4A; }

/* ============================================================
   2 · IMPACT (stone vs film)
   ============================================================ */
.imp { aspect-ratio: 16/9; cursor: crosshair; touch-action: none;
  background: linear-gradient(165deg, #c50a36 0%, #8c0223 58%, #520014 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 40px 80px -40px rgba(255,255,255,.4); }
.imp::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 34%, rgba(255,255,255,.22) 47%, rgba(255,255,255,.03) 55%, transparent 66%); }
.ppf-on .imp::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 2px rgba(127,227,220,.5); background: linear-gradient(135deg, rgba(127,227,220,.1), rgba(127,227,220,0) 40%); }
.fx-chip { position: absolute; width: 13px; height: 13px; pointer-events: none; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 34%, #6b6b6b, #1c1c1c 70%); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
  animation: fxPop .18s ease-out; }
@keyframes fxPop { from { transform: translate(-50%,-50%) scale(.2); } to { transform: translate(-50%,-50%) scale(1); } }
.fx-ring { position: absolute; width: 12px; height: 12px; transform: translate(-50%,-50%); pointer-events: none;
  border-radius: 50%; border: 2px solid rgba(127,227,220,.9); animation: fxRing .6s ease-out forwards; }
@keyframes fxRing { 0%{opacity:1;width:10px;height:10px} 100%{opacity:0;width:70px;height:70px} }
.fx-stone { position: absolute; width: 9px; height: 9px; transform: translate(-50%,-50%); pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9a9a9a, #3a3a3a); animation: fxStone .35s ease-in forwards; }
@keyframes fxStone { 0%{transform:translate(-50%,-160%) scale(.6);opacity:0} 40%{opacity:1} 100%{transform:translate(-50%,-50%) scale(1);opacity:.9} }
.ppf-on .fx-stone { animation: fxStoneBounce .5s ease-out forwards; }
@keyframes fxStoneBounce { 0%{transform:translate(-50%,-160%) scale(.6);opacity:0} 40%{transform:translate(-50%,-50%);opacity:1} 100%{transform:translate(-50%,-220%) scale(.4);opacity:0} }

/* ============================================================
   3 · WATER (hydrophobic)
   ============================================================ */
.wtr { aspect-ratio: 16/9; cursor: pointer; touch-action: none;
  background: linear-gradient(165deg, #14233b 0%, #0c1626 60%, #060b14 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 36px 72px -36px rgba(120,170,230,.3); }
.wtr::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s;
  background: linear-gradient(118deg, transparent 32%, rgba(150,200,255,.18) 46%, rgba(150,200,255,.02) 55%, transparent 66%); }
.coat-on .wtr::before { opacity: 1; }
.wtr::before { opacity: .5; }
.fx-bead { position: absolute; width: 22px; height: 22px; transform: translate(-50%,-50%); pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(170,210,255,.5) 45%, rgba(90,150,220,.35) 75%);
  box-shadow: inset 0 -3px 6px rgba(40,90,150,.5), 0 2px 6px rgba(0,0,0,.3); transition: transform 1.1s cubic-bezier(.5,0,.7,1), opacity .4s; }
.fx-bead.roll { transform: translate(-50%, var(--fall)) scale(.9); opacity: .2; }
.fx-sheet { position: absolute; width: 26px; height: 18px; transform: translate(-50%,-50%); pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(150,180,210,.35), rgba(120,150,190,.12) 70%, transparent);
  filter: blur(1px); transition: width .9s ease, height .9s ease, opacity .9s ease; opacity: .8; }
.fx-sheet.spread { width: 92px; height: 60px; }
.fx-sheet.fade { opacity: 0; }

/* ============================================================
   4 · GLOSS (matte → deep gloss reveal)
   ============================================================ */
.gls { position: relative; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; touch-action: none; box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, #5b6168 0%, #44484e 55%, #303338 100%); }
.gls__layer { position: absolute; inset: 0; }
.gls__layer--gloss { background:
    radial-gradient(120% 90% at 28% 8%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(160deg, #1a3a6e 0%, #0f2247 52%, #081633 100%); }
.gls__layer--gloss::after { content: ""; position: absolute; left: 8%; top: -10%; width: 26%; height: 130%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); filter: blur(3px); }
.gls__handle { position: absolute; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: rgba(255,255,255,.9); cursor: ew-resize; z-index: 3; box-shadow: 0 0 10px rgba(0,0,0,.4); }
.gls__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.gls__knob .ic { width: 20px; height: 20px; }
.gls__lab { position: absolute; bottom: 12px; z-index: 2; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: #fff; background: rgba(8,16,32,.5); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.16); pointer-events: none; }
.gls__lab--l { left: 12px; } .gls__lab--r { right: 12px; }

@media (prefers-reduced-motion: reduce) {
  .shx.is-healing .shx__heat, .fx-chip, .fx-stone, .fx-ring { animation-duration: .01ms; }
}