/* bwin.css — svävande 3D-browserfönster som berättar Webbdesign-tjänsten i tre faser.
   Fas 1: tomt fönster + skissanteckningar · Fas 2: wireframe-block flyger in från djupet
   Fas 3: färgläggning, fönstret "shippar" bakåt, LIVE-badge + riktig URL.
   CSS-DEFAULT = SLUTLÄGET (fas 3) så no-JS/SEO/headless aldrig ser en tom sektion;
   GSAP-timelinen sätter startlägena via fromTo när den byggs. */

/* sektionen: lång + sticky scen */
.svc-bwin{display:block;padding:0;overflow:clip}
.svc-tall{min-height:260vh}
.svc-bwin .svc-sticky{position:sticky;top:0;min-height:96vh;display:flex;align-items:center;
  padding:clamp(4rem,9vw,7rem) clamp(1.2rem,6vw,4rem)}
/* sticky skapar egen stacking context → sektionens ::after-gradient (z1) skulle lägga sig
   ÖVER allt innehåll. Stäng av den och lägg gradienten inuti sticky, under inner (z2). */
.svc-bwin::after{content:none}
.svc-bwin .svc-sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(255deg,rgba(5,10,12,.94) 0%,rgba(5,10,12,.78) 40%,rgba(5,10,12,.4) 100%)}

/* ── scenen ── */
.bwin-stage{position:relative;perspective:1400px;margin:0 0 1.4rem;max-width:620px}
.bwin-tilt{transform:rotateX(4deg) rotateY(-8deg);transform-style:preserve-3d}
.bwin-float{transform-style:preserve-3d;animation:bwfloat 7s ease-in-out infinite}
@keyframes bwfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── fönstret ── */
.bwin{position:relative;border-radius:14px;background:#0a1518;border:1px solid rgba(79,227,212,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 60px rgba(79,227,212,.07);overflow:visible;will-change:transform}
.bwin-chrome{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border-bottom:1px solid rgba(79,227,212,.16);
  background:rgba(8,18,22,.9);border-radius:14px 14px 0 0}
.bdot{width:10px;height:10px;border-radius:50%;flex:none}
/* Nowill-krom (2026-07-27): macOS-trafikljusen strukna — de var sajtens enda
   färger utanför paletten. En mint-punkt räcker som fönstrets puls. */
.bdot.nw{background:rgba(79,227,212,.55)}
.bwin-url{position:relative;flex:1;display:flex;align-items:center;gap:.5rem;height:26px;margin:0 .3rem;
  background:rgba(5,10,12,.8);border:1px solid rgba(79,227,212,.14);border-radius:7px;padding:0 .7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--dis);overflow:hidden}
.burl-lock{width:7px;height:7px;border-radius:50%;flex:none;background:#5b6f6c;transition:background .5s,box-shadow .5s}
.bwin-stage[data-phase="3"] .burl-lock{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.8)}
.burl{position:absolute;left:1.55rem;white-space:nowrap}
.burl-a{opacity:0}
.burl-b{color:var(--text)}
.bwin-live{display:inline-flex;align-items:center;gap:.4rem;flex:none;font-family:var(--mono);font-size:.62rem;
  font-weight:700;letter-spacing:.16em;color:#34d399;border:1px solid rgba(52,211,153,.5);border-radius:99px;
  padding:.28em .7em;background:rgba(52,211,153,.08)}
.bwin-live i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:blivepuls 1.6s ease-in-out infinite}
@keyframes blivepuls{0%,100%{opacity:1}50%{opacity:.35}}

/* ── viewport med två lager (samma geometri) ── */
.bwin-view{position:relative;height:clamp(250px,34vh,330px);border-radius:0 0 14px 14px;
  background:linear-gradient(160deg,#081418,#060e11)}
.bwin-sketch,.bwin-blocks{position:absolute;inset:13px;display:flex;flex-direction:column;gap:9px}
.bwin-blocks{perspective:1000px}          /* egen 3D-kontext → translateZ utan plan-krockar */

/* fas 1: skiss-lagret (döljs som default = slutläge) */
.bwin-sketch>*{opacity:0}
.bsk{border:1.5px dashed rgba(79,227,212,.32);border-radius:7px}
.bsk-head{height:20px}
.bsk-hero{flex:1;position:relative}
.bsk-row{display:flex;gap:9px;height:76px}
.bsk-row .bsk{flex:1}
.bsk-foot{height:14px}
.bnote{position:absolute;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:rgba(79,227,212,.85);
  white-space:nowrap;pointer-events:none}
.bnote.nb1{top:2px;left:8px;transform:rotate(-2deg)}
.bnote.nb2{top:34%;left:12%;transform:rotate(-3deg);font-size:.7rem}
.bnote.nb3{bottom:96px;right:6%;transform:rotate(2deg)}
.bnote.nb4{bottom:2px;left:34%;transform:rotate(-1deg)}
.barrow{position:absolute;top:44%;left:14%;width:52px;height:26px;transform:rotate(12deg)}
.barrow path{fill:none;stroke:rgba(79,227,212,.7);stroke-width:1.6;stroke-dasharray:4 3;stroke-linecap:round}

/* fas 2: wireframe-block */
.bblk{position:relative;border:1px solid rgba(79,227,212,.3);border-radius:7px;background:rgba(10,24,28,.6);will-change:transform,opacity}
.b-head{height:20px;display:flex;align-items:center;gap:7px;padding:0 9px}
.blogo{width:9px;height:9px;border-radius:3px;background:var(--teal);opacity:.85}
.bnav{width:24px;height:4px;border-radius:2px;background:rgba(232,244,242,.22)}
.bnav:nth-of-type(3){margin-left:auto}
.b-hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;padding:0 12%}
.bline{height:8px;border-radius:4px;background:rgba(232,244,242,.2)}
.b-hero .l1{width:62%;height:13px}
.b-hero .l2{width:44%}
.bcta{width:74px;height:20px;border-radius:99px;border:1px solid rgba(79,227,212,.55);margin-top:5px;transition:background .5s,box-shadow .5s}
.bwin-stage[data-phase="3"] .bcta{background:var(--teal);box-shadow:0 0 16px rgba(79,227,212,.5)}
.brow{display:flex;gap:9px;height:76px}
.b-card{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px}
.bimg{height:30px;border-radius:5px;background:rgba(232,244,242,.1);transition:background .5s}
.bwin-stage[data-phase="3"] .bimg{background:linear-gradient(135deg,rgba(79,227,212,.5),rgba(79,227,212,.12))}
.b-card .bline{height:5px;width:80%}
.b-card .bline.s{width:55%}
.b-foot{height:14px}

/* fas 3: färg-wash per block (default PÅ = slutläge; GSAP scrubbar in dem) */
.bfill{position:absolute;inset:0;border-radius:6px;pointer-events:none}
.b-head .bfill{background:linear-gradient(90deg,rgba(79,227,212,.14),transparent 60%)}
.b-hero .bfill{background:radial-gradient(90% 120% at 18% 30%,rgba(79,227,212,.24),transparent 60%)}
.b-card .bfill{background:linear-gradient(180deg,rgba(79,227,212,.1),transparent 70%)}
.b-foot .bfill{background:linear-gradient(90deg,transparent,rgba(79,227,212,.12))}

/* markskugga */
.bwin-shadow{position:absolute;left:8%;right:8%;bottom:-34px;height:36px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);opacity:.3;pointer-events:none}

/* ── steg-rälsen under fönstret ── */
.bsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 2.4rem;max-width:620px}
.bstep{display:flex;gap:.7rem;align-items:flex-start;opacity:.45;transition:opacity .35s}
.bstep.on{opacity:1}
/* 2026-07-27: de boxade stegnumren visas inte längre under 820 px (mobilen
   behåller annars gamla räknar-språket som ströks på desktop) — se media-blocket */
.bs-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid rgba(79,227,212,.4);border-radius:10px;
  font-family:var(--mono);font-weight:700;font-size:.72rem;color:var(--teal);background:var(--duk);transition:border-color .35s,box-shadow .35s}
.bstep.on .bs-n{border-color:var(--teal);box-shadow:0 0 16px rgba(79,227,212,.4)}
.bstep p{color:var(--dis);font-size:.88rem;line-height:1.4;margin:0}
.bstep p b{color:var(--text);font-weight:600;display:block;margin-bottom:.1em;font-family:Supreme,sans-serif}

@media (max-width:820px){
  .bwin-view{height:clamp(220px,52vw,300px)}
  .bsteps{grid-template-columns:1fr;gap:.9rem}
  .bnote{font-size:.56rem}
  /* tyst stegrad på mobil (2026-07-27): inga boxade 01/02/03 — titeln bär,
     aktivt steg markeras av en mint hairline i vänsterkanten */
  .bs-n{display:none}
  .bstep{border-left:2px solid rgba(232,244,242,.14);padding-left:.9rem;transition:opacity .35s,border-color .35s}
  .bstep.on{border-left-color:var(--teal)}
}
@media (prefers-reduced-motion: reduce){
  .bwin-float{animation:none}
  .bwin-live i{animation:none}
}