/* Prova S1 · Inside, v4: the cover lifts off, the record comes in on glass. */
.ix{position:relative;height:400vh;background:#000;color:#f5f7fa}
.ix-pin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 58%,rgba(124,77,255,.13),transparent 70%),radial-gradient(30% 22% at 50% 66%,rgba(139,123,255,.06),transparent 70%)}
.ix-pin{position:sticky;top:var(--lnav-h,52px);height:calc(100svh - var(--lnav-h,52px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;
  padding:clamp(18px,4vh,52px) 24px clamp(14px,2.6vh,28px);overflow:hidden;--k:0}

/* head */
.ix-head{position:relative;z-index:4;text-align:center;max-width:980px}
.ix-eyebrow{margin:0 0 12px;font-size:15px;font-weight:500;letter-spacing:.01em;color:#b8a8ff}
.ix-h{font-size:clamp(40px,5.2vw,80px);letter-spacing:-.022em;line-height:1.02}
/* desktop: one fixed layout size; the scroll compaction is transform only (s1-v7.js), never font-size */
@media (min-width:981px){
  .ix-head{max-width:1160px}
  .ix-h{font-size:clamp(40px,4.2vw,64px)}
  .ix-eyebrow,.ix-h,.ix-sub{transform-origin:50% 0;backface-visibility:hidden}
  .ix-head.anim .ix-eyebrow,.ix-head.anim .ix-h,.ix-head.anim .ix-sub{will-change:transform}
}
.ix-h .grad{display:inline-block;padding-bottom:.06em}
.ix-sub{position:relative;height:3.2em;margin:14px auto 0;max-width:34em;font-size:clamp(15px,1.25vw,19px);line-height:1.45}
.ix-sub p{position:absolute;inset:0;margin:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ix-cue{font-size:14px;color:#b8a8ff}
.ix-cue::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-3px) rotate(45deg);animation:ixcue 1.8s infinite}
@keyframes ixcue{50%{transform:translateY(1px) rotate(45deg)}}
.ix-lead{color:#a1a1a6}
.ix-cue.off{opacity:0;transform:translateY(-6px)}

/* stage */
.ix-stage{position:relative;width:min(1280px,100%);height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  margin-top:clamp(6px,1.6vh,18px)}
.ix-imgs{position:relative;z-index:1;height:100%;aspect-ratio:.6;min-height:0}
.ix-layer{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:3/2;height:100%;transform:translateX(-50%) scale(var(--zoom,1));transform-origin:51.1% 39.2%;will-change:transform}
.ix-frame{-webkit-mask-image:linear-gradient(#000 74%,transparent 98%);mask-image:linear-gradient(#000 74%,transparent 98%)}
.ix-top{pointer-events:none}
.ix-layer>picture,.ix-layer>img,.ix-layer picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ix-lid,.ix-shadow{transform-origin:50.31% 42.06%;will-change:transform,opacity,filter}
.ix-lid{position:absolute;inset:0}
.ix-lid picture,.ix-lid img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ix-shadow{opacity:0}
.ix-closed{transition:none}
.ix-parts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ix-parts g{opacity:0;transition:opacity .6s var(--ease)}
.ix-parts g.on{opacity:1}
.ix-parts .dot{fill:#fff}
.ix-parts .ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.2;transform-box:fill-box;transform-origin:center}
.ix-parts g.live .ring{animation:ixring 2.4s var(--ease) infinite}
@keyframes ixring{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}

/* columns */
.ix-col{position:relative;z-index:3;display:grid;gap:14px;align-content:center;width:100%;max-width:316px}
.ix-l{justify-self:end;margin-right:-12px}
.ix-r{justify-self:start;margin-left:-12px}

/* Liquid Glass */
.gl{--r:26px;position:relative;border-radius:var(--r);padding:15px 18px 14px;color:#f5f7fa;text-align:left;isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.105),rgba(255,255,255,.045) 38%,rgba(255,255,255,.025) 70%,rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(1.08);backdrop-filter:blur(22px) saturate(1.7) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.30),0 30px 60px -28px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px) scale(.985);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.gl::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.14) 20%,rgba(255,255,255,.035) 46%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.gl::after{content:"";position:absolute;inset:1px;border-radius:calc(var(--r) - 1px);pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 14% -24%,rgba(255,255,255,.17),transparent 56%),radial-gradient(90% 60% at 112% 124%,rgba(176,140,255,.12),transparent 62%)}
.gl.in{opacity:1;transform:none}
.gl.hot::before{background:linear-gradient(155deg,rgba(255,255,255,.8),rgba(228,222,255,.28) 20%,rgba(255,255,255,.05) 46%,rgba(196,184,255,.14) 70%,rgba(255,255,255,.42))}
.gl.alert::before{background:linear-gradient(155deg,rgba(255,226,180,.85),rgba(255,181,71,.3) 22%,rgba(255,255,255,.04) 50%,rgba(255,181,71,.25))}

.gl-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gl-k{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#d2d2d7;letter-spacing:.005em}
.gl-k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.gl-tag{font-size:11.5px;font-weight:500;color:#a1a1a6;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);white-space:nowrap}
.gl-tag.good{color:#f5f7fa}
.gl-tag.good::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#fff;vertical-align:1px}
.gl-tag.warn{color:#ffd28a;background:rgba(255,181,71,.12);box-shadow:inset 0 0 0 .5px rgba(255,181,71,.35)}
.gl-t{margin:9px 0 0;font-size:15px;line-height:1.3;font-weight:500;color:#f5f7fa;letter-spacing:-.005em}
.gl-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin:8px 0 0;line-height:1}
.gl-v b{font-size:38px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.gl-v em{font-style:normal;font-size:17px;color:#d2d2d7;margin-left:-2px}
.gl-v small{flex-basis:100%;margin-top:6px;font-size:12px;color:#86868b;letter-spacing:.01em}
.gl-v small span{color:#d2d2d7;font-variant-numeric:tabular-nums}
.gl-f{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0;font-size:11.5px;color:#86868b;letter-spacing:.01em}
.gl-f.warn{color:#ffd28a}

/* temperature chart */
.gl-chart{display:block;width:100%;height:86px;margin-top:12px;overflow:visible}
.gl-chart .grid path{stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.gl-chart .band{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.gl-chart .area{fill:url(#ixArea)}
.gl-chart path.p1,.gl-chart path.p2,.gl-chart path.p3{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.gl-chart .p1{stroke:url(#ixHeat);stroke-width:2}
.gl-chart .p2,.gl-chart .p3{stroke:rgba(255,255,255,.22);stroke-width:1}
.gl-chart .now{fill:#fff}
.gl-chart .halo{fill:rgba(154,140,255,.22)}
.gl-ax span:nth-child(2){color:#d2d2d7}

/* time track */
.gl-track{display:flex;gap:3px;height:8px;margin-top:14px}
.gl-track i{position:relative;height:100%;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.gl-track i b{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:rgba(255,255,255,.55)}
.gl-track i.on b{background:linear-gradient(90deg,#c9bcff,#a092ff)}
.gl-track i.done b{width:100%}

/* motion bars */
.gl-bars{display:block;width:100%;height:46px;margin-top:12px}
.gl-bars rect{fill:rgba(255,255,255,.3)}
.gl-bars rect.hi{fill:#fff}
.gl-bars rect.drop{fill:#ffb547}
.gl-bars line{stroke:rgba(255,255,255,.1);stroke-width:1;vector-effect:non-scaling-stroke}

/* record ledger */
.gl-ledger{list-style:none;margin:12px 0 0;padding:0}
.gl-ledger li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;color:#d2d2d7;border-top:.5px solid rgba(255,255,255,.1)}
.gl-ledger li:first-child{border-top:0}
.gl-ledger time{font-variant-numeric:tabular-nums;color:#86868b}
.gl-ledger b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-ledger i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);position:relative}
.gl-ledger i::after{content:"";position:absolute;left:4.5px;top:3px;width:3px;height:6px;border:solid #fff;border-width:0 1.4px 1.4px 0;transform:rotate(40deg)}
.gl-ledger li.amb b{color:#ffd28a}.gl-ledger li.amb i{background:rgba(255,181,71,.2)}
.gl-ledger li.new{animation:ixled .6s var(--ease)}
@keyframes ixled{from{opacity:0;transform:translateY(-6px)}}
.gl-sig span:last-child{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* hairline leaders */
.ix-leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ix-leads path{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1;stroke-linejoin:round}
.ix-leads circle{fill:rgba(255,255,255,.85)}

/* foot */
.ix-foot{position:relative;z-index:4;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ix-foot.in{opacity:1;transform:none}
.ix-close{margin:0 0 6px;font-size:clamp(17px,1.45vw,22px);font-weight:500;letter-spacing:-.01em;color:#a1a1a6}
.ix-close span{color:#f5f7fa}

@media (max-height:780px) and (min-width:981px){.ix-col{max-width:276px}.ix-l{margin-right:4px}.ix-r{margin-left:4px}.gl-t{display:none}.gl-v b{font-size:32px}.gl-chart{height:62px}.gl-ledger li{padding:5px 0}.ix-sub{height:2.9em}}
@media (max-height:680px) and (min-width:981px){.gl-v small,.gl-f{display:none}.gl{padding:12px 15px}}
@media (max-width:1180px) and (min-width:981px){.ix-col{max-width:272px}.gl-v b{font-size:32px}}

/* tablet and phone: no pin, cards below the reveal */
@media (max-width:980px){
  .ix{height:auto;padding-bottom:60px}
  .ix-pin{position:relative;top:0;height:auto;display:block;padding:72px 16px 0}
  .ix-sub{height:auto}.ix-sub p{position:relative}.ix-cue{display:none}.ix-lead{opacity:1;transform:none}
  .ix-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto;margin-top:18px}
  .ix-imgs{grid-column:1/-1;order:-1;height:auto;width:100%;aspect-ratio:1.05;margin:0 auto}
  .ix-frame{height:100%}
  .ix-col{max-width:none;margin:0;align-content:start}
  .ix-leads{display:none}
  .gl{opacity:1;transform:none}
  .ix-foot{opacity:1;transform:none;margin-top:22px}
}
@media (max-width:620px){.ix-stage{grid-template-columns:1fr}.ix-imgs{aspect-ratio:.92}}
@media (prefers-reduced-motion:reduce){
  .ix{height:auto}.ix-pin{position:relative;height:auto;min-height:100svh}
  .ix-lid,.ix-closed,.ix-shadow{display:none}.gl,.ix-foot{opacity:1;transform:none}.ix-parts g{opacity:1}
  .ix-lead{opacity:1;transform:none}.ix-cue{display:none}
}
@media (max-width:980px){.ix-col{display:contents}.ix-imgs{order:0}.gl[data-k="temp"]{order:1}.gl[data-k="time"]{order:2}.gl[data-k="motion"]{order:3}.gl[data-k="record"]{order:4}.ix-foot{order:5}}

/* v12: the parts' pulse rings also rest with reduced motion */
@media (prefers-reduced-motion:reduce){.ix-parts g.live .ring{animation:none}}

/* v12: phones and tablets get the cards' reveal too (as each card scrolls into view), staggered across the two columns */
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  .ix.ix-mrev .gl:not(.in){opacity:0;transform:translateY(14px) scale(.985)}
  .ix.ix-mrev .gl:nth-child(even),.ix.ix-mrev .gl[data-k="time"]{transition-delay:.08s}
}