/* ============================================================
   PREVIEW ADD-ON — case-index product previews (A/B trial)
   Loaded only by index-hover.html and index-open.html.
   Nothing here touches the shipping index.html.
   ============================================================ */

/* build badge */
.pvbadge{position:fixed;left:.8rem;bottom:.8rem;z-index:95;
  font:700 .6rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:.45rem .6rem;pointer-events:none}

/* ============================================================
   DEVICE MOCKUP — static frame, the screen content animates inside
   (phone for app shots, browser for web shots). object-position
   pan reads as "the product in use" without touching the frame.
   ============================================================ */
.device{position:relative;margin-inline:auto;background:#0d0d0f}
.device__screen{position:relative;overflow:hidden;background:#fff}
.device__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* screen-recording plays as the phone screen itself — clipped by the bezel's rounded screen, no manual geometry */
.device__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* SRG intervention: the 157->283 sheet slides up over the recording once the user's rate choice
   settles (283€/36mo, dead-still from 10.5s in the 14.858s recording — frame-diff measured).
   Timing is driven by JS off the video's own currentTime (main.js "sheet sync") — a CSS animation
   clock can never stay phase-locked to a video (load delay + loop imprecision drift apart).
   Selector must out-specify `.device__screen img` (which forces inset:0/height:100%/cover). */
.device__screen img.device__sheet{top:auto;bottom:0;height:auto;object-fit:contain;z-index:2;
  transform:translateY(102%);transition:transform .9s var(--ease)}
.device__screen img.device__sheet.up{transform:translateY(0)}
/* reduced motion / screenshot capture: no slide, solution shown statically (JS adds .up) */
html.flat .device__screen img.device__sheet{transition:none}
@media(prefers-reduced-motion:reduce){.device__screen img.device__sheet{transition:none}}

/* phone — dark bezel (40px radius, 11px pad, 28px inner screen). Screen aspect matches the
   recording (1284x2778) so object-fit:cover shows the FULL app — header/footer never cropped. */
.device--phone{width:min(264px,58%);padding:11px;border-radius:40px;
  box-shadow:0 34px 70px -34px rgba(12,12,12,.55),0 10px 24px -14px rgba(12,12,12,.35)}
.device--phone .device__screen{border-radius:28px;aspect-ratio:1284/2778}
.device--phone .device__notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);
  z-index:2;width:32%;height:11px;background:#0d0d0f;border-radius:99px}
.device--phone .device__screen img{object-position:50% 0%;animation:pvScrollY 14s var(--ease) infinite alternate}
@keyframes pvScrollY{0%,7%{object-position:50% 0%}93%,100%{object-position:50% 100%}}

/* browser / web */
.device--web{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--rule);
  background:#e9e9e4;box-shadow:0 34px 70px -34px rgba(12,12,12,.4),0 10px 24px -16px rgba(12,12,12,.25)}
.device--web .device__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px}
.device--web .device__dot{width:10px;height:10px;border-radius:50%;background:#c4c4bd}
.device--web .device__screen{aspect-ratio:16/10;border-top:1px solid var(--rule-soft)}
.device--web .device__screen img{object-position:0% 0%;animation:pvPan 18s var(--ease) infinite alternate}

/* flat — pre-rendered mockup art shown as-is (baked device frame, or a clean screenshot); no CSS chrome */
.device--flat{position:relative;background:none;margin-inline:auto;line-height:0}
.device--flat>img{display:block;width:100%;height:auto;object-fit:contain}
.device--flat--phone{width:min(300px,60%)}
.device--flat--wide{width:min(540px,94%)}
/* clean screenshot with no baked frame → give it a card edge + shadow */
.device--flat--shot>img{border-radius:12px;border:1px solid var(--rule-soft);
  box-shadow:0 34px 70px -34px rgba(12,12,12,.4),0 10px 24px -16px rgba(12,12,12,.25)}
@keyframes pvPan{0%{object-position:0% 0%}100%{object-position:100% 100%}}

/* ============================================================
   V1 — HOVER PEEK  (compact index kept; device floats on hover)
   ============================================================ */
.work--hover .case{position:relative}
.case__peek{
  position:fixed;z-index:34;
  right:max(1.2rem,calc(50vw - 720px + 1.2rem));
  top:50%;transform:translateY(-50%) scale(.97);
  width:min(30vw,340px);pointer-events:none;
  opacity:0;transition:opacity .38s var(--ease),transform .5s var(--ease-q)}
.case__peek .device--mini.device--phone{width:190px;padding:8px;border-radius:30px}
.case__peek .device--mini.device--phone .device__screen{border-radius:20px}
.case__peek .device--mini.device--phone .device__notch{top:14px;height:8px}
.case__peek figcaption{display:flex;justify-content:space-between;gap:1rem;
  margin-top:.7rem;font:400 .6rem/1 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.case__head:hover ~ .case__peek{opacity:1;transform:translateY(-50%) scale(1)}

/* ============================================================
   V2 — ALWAYS-OPEN TEASER CARDS (reduced-line, alternating)
   ============================================================ */
.work--open .tcard{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding:clamp(2rem,5vw,4rem) var(--gut);
  border-bottom:1px solid var(--rule)}
.work--open .tcard:nth-child(even){grid-template-columns:.92fr 1.08fr}
.work--open .tcard:nth-child(even) .tcard__media{order:-1}
.tcard__no{font:700 .8rem/1 var(--f-mono);color:var(--blue);letter-spacing:.06em}
.tcard__title{font:800 clamp(1.6rem,3.4vw,2.8rem)/1.02 var(--f-disp);font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.01em;margin:.6rem 0 1rem}
.tcard__title a{transition:color .3s var(--ease)}
.tcard__title a:hover{color:var(--blue)}
.tcard__desc{color:var(--ink-soft);max-width:48ch}
.tcard__abc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.7rem}
.tcard__abc h5{font:700 .6rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.5rem}
.tcard__abc h5 i{font-style:normal;color:var(--blue);margin-right:.35rem}
.tcard__abc p{font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.tcard__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.3rem}
.tcard__tags li{font:400 .6rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule-soft);padding:.35rem .6rem}
.tcard__foot{display:flex;align-items:center;gap:1rem 1.8rem;flex-wrap:wrap;margin-top:1.8rem}
.tcard__open{display:inline-flex;align-items:center;gap:.7rem;
  font:700 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.95rem 1.15rem;position:relative;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.tcard__open::after{content:"";position:absolute;inset:0;background:var(--blue);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tcard__open i{font-style:normal;color:var(--blue);transition:color .35s var(--ease),transform .35s var(--ease-q)}
.tcard__open:hover{color:#fff;border-color:var(--blue)}
.tcard__open:hover::after{transform:scaleX(1)}
.tcard__open:hover i{color:#fff;transform:translateX(.4rem)}
.tcard__yr{font:400 .72rem/1 var(--f-mono);color:var(--ink-faint)}
.tcard__media{display:flex;justify-content:center;align-items:center;padding-block:clamp(1rem,2vw,2rem)}

/* ============================================================
   RESPONSIVE + MOTION SAFETY
   ============================================================ */
@media(max-width:1000px){ .case__peek{display:none} }   /* hover peek is desktop-only */
@media(max-width:820px){
  .work--open .tcard,
  .work--open .tcard:nth-child(even){grid-template-columns:1fr}
  .work--open .tcard__media,
  .work--open .tcard:nth-child(even) .tcard__media{order:0}
  .tcard__abc{grid-template-columns:1fr;gap:1rem}
  .device--phone{width:min(260px,70%)}
}
html.flat .device__screen img,
html.flat.shot .device__screen img{animation:none!important}
@media(prefers-reduced-motion:reduce){ .device__screen img{animation:none!important} }

/* screenshot helper: ?shot shrinks the dvh hero so full-page capture works */
html.shot .hero{min-height:560px}