/* HSG-1 17 Oct 2026: 03 / The Glass = glass that clears. Glass dashboard lifts in and un-frosts early; the 3 cards fan out of one stack into a row. */
.ox #glass{position:relative;isolation:isolate;overflow:clip}
.ox #glass::before{content:"";position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;background:radial-gradient(40% 30% at 15% 20%,rgba(46,154,107,.14),transparent 70%),radial-gradient(35% 28% at 88% 62%,rgba(224,122,47,.12),transparent 70%)}
.ox #glass .ox-gpv{border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#12264a 0%,#0b1830 55%,#08121f 100%);box-shadow:0 60px 110px -60px rgba(7,17,32,.7),inset 0 1px 0 rgba(255,255,255,.14);transform-origin:50% 100%}
.ox #glass .ox-gpv::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 49%,rgba(255,255,255,.02) 53%,transparent 60%) -120% 0/60% 100% no-repeat}
.ox #glass .ox-gpv__warn{border-radius:10px}
.ox #glass .ox-gpv__spec .ox-tag{border-radius:6px}
.ox #glass .ox-gpv__grid{gap:12px;background:none}
.ox #glass .ox-gpv__grid li{overflow:clip;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.ox #glass .ox-gpv__grid li:hover{background-color:rgba(79,208,143,.08);border-color:rgba(79,208,143,.45)}
.ox #glass .ox-gpv__grid li:last-child{border-color:rgba(79,208,143,.5);box-shadow:0 0 40px -12px rgba(79,208,143,.6)}
.ox #glass .ox-gpv__grid li:last-child b{text-shadow:0 0 28px rgba(79,208,143,.75)}
.ox #glass .ox-gpv__chips span:not(.ox-kick){border-radius:999px;background:rgba(255,255,255,.04)}
.ox #glass .ox-card{border-radius:18px;overflow:clip;background:#fff;border:1px solid rgba(11,23,41,.1);box-shadow:0 30px 60px -36px rgba(11,23,41,.45);transition:box-shadow .4s,translate .4s var(--ease)}
.ox #glass .ox-card:hover{box-shadow:0 40px 80px -36px rgba(11,23,41,.55)}
.ox #glass .ox-card__top .ox-tag{border-radius:0 0 8px 0}
.ox #glass .ox-card__ghost{font-size:clamp(64px,5.6vw,92px);top:.1em;right:10px;color:rgba(255,255,255,.14)}
.ox #glass .ox-card__box{border-radius:12px;border-bottom-width:3px;box-shadow:0 18px 36px -20px rgba(11,23,41,.6)}
.ox #glass .ox-card>p{padding:16px 22px 24px}
@media (min-width:900px){
  .ox #glass .ox-cards{grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto;gap:28px;padding-bottom:0}
  .ox #glass .ox-card{position:relative;top:auto;display:flex;flex-direction:column}
  .ox #glass .ox-card__top{grid-row:auto;height:clamp(170px,14vw,210px);min-height:0}
  .ox #glass .ox-card__box{margin:-60px 22px 0;align-self:stretch}
  .ox #glass .ox-card>p{font-size:17px;padding:16px 22px 26px}
}
@media (min-width:1100px){.ox #glass .ox-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}
@media (prefers-reduced-motion:no-preference){
  .ox #glass .ox-gpv::before{animation:hsg-sheen 7s ease-in-out infinite}
  @keyframes hsg-sheen{0%,55%{background-position:-120% 0}100%{background-position:240% 0}}
  .ox #glass .ox-gpv__grid li:last-child b{animation:hsg-glow 2.6s ease-in-out infinite}
  @keyframes hsg-glow{50%{text-shadow:0 0 8px rgba(79,208,143,.35)}}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #glass .ox-gpv{animation:hsg-tilt linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  @keyframes hsg-tilt{from{transform:perspective(1400px) rotateX(18deg) scale(.92);opacity:.35}to{transform:none;opacity:1}}
  .ox-mo #glass .ox-gpv__grid li:nth-child(1){animation-range:cover 16% cover 26%}
  .ox-mo #glass .ox-gpv__grid li:nth-child(2){animation-range:cover 19% cover 29%}
  .ox-mo #glass .ox-gpv__grid li:nth-child(3){animation-range:cover 22% cover 32%}
  .ox-mo #glass .ox-gpv__grid li:nth-child(4){animation-range:cover 25% cover 35%}
  .ox-mo #glass .ox-gpv::after{animation-range:cover 10% cover 40%}
  @media (min-width:1100px){
    .ox-mo #glass .ox-card.ox-sx,.ox-mo #glass .ox-card:nth-child(3).ox-sx{translate:none;filter:none;animation:hsg-fan linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
    .ox-mo #glass .ox-card:nth-child(1){--fx:104%;--fr:-7deg}
    .ox-mo #glass .ox-card:nth-child(2){--fx:0%;--fr:0deg;z-index:2}
    .ox-mo #glass .ox-card:nth-child(3){--fx:-104%;--fr:7deg}
    @keyframes hsg-fan{from{transform:translate(var(--fx),70px) rotate(var(--fr)) scale(.9)}to{transform:none}}
  }
  @media (max-width:1099px){
    .ox-mo #glass .ox-card.ox-sx{translate:none;filter:none;animation:hsg-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes hsg-rise{from{transform:translateY(60px) scale(.95);opacity:.3}to{transform:none;opacity:1}}
  }
}}
/* HSG-1 pass 2: graphics sit in the open band above the title box */
.ox #glass .ox-card__top{height:clamp(200px,15.5vw,228px)}
.ox #glass .ox-gl{top:46px;bottom:auto;left:22px;width:min(46%,220px)}
.ox #glass .ox-card__box{margin-top:-38px}
@media (max-width:899px){.ox #glass .ox-card__top{height:200px}.ox #glass .ox-gl{width:min(50%,200px)}}
/* HSG-1 pass 3: squeegee wipe, cursor glare, card tilt, ghost words fill, drifting glass orbs */
.ox #glass::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:520px;left:62%;top:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(170,215,235,.18) 45%,transparent 70%);filter:blur(30px);opacity:.55}
.ox #glass .ox-gpv::before{background:radial-gradient(420px 300px at var(--gx,70%) var(--gy,0%),rgba(255,255,255,.1),transparent 70%),linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 49%,rgba(255,255,255,.02) 53%,transparent 60%) -120% 0/60% 100% no-repeat}
.ox #glass .ox-gpv__grid{position:relative;container-type:inline-size}
.ox #glass .ox-gpv__grid::after{content:"";position:absolute;inset:-6px;z-index:4;pointer-events:none;border-radius:18px;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);background:linear-gradient(160deg,rgba(210,228,245,.2),rgba(210,228,245,.07));clip-path:inset(0 0 0 100%)}
.ox #glass .ox-gpv__grid::before{content:"";position:absolute;top:-10px;bottom:-10px;left:0;width:3px;z-index:5;pointer-events:none;border-radius:3px;background:linear-gradient(transparent,#fff 20%,#fff 80%,transparent);box-shadow:0 0 22px 6px rgba(255,255,255,.55);opacity:0}
.ox #glass .ox-card__top{transition:transform .35s var(--ease);transform-style:preserve-3d}
.ox #glass .ox-card__top::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(280px 200px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.26),transparent 65%);opacity:0;transition:opacity .35s}
.ox #glass .ox-card:hover .ox-card__top::after{opacity:1}
.ox #glass .ox-card__ghost{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.42);background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.26)) 0 0/100% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
@media (prefers-reduced-motion:no-preference){
  .ox #glass::after{animation:hsg-orb 22s ease-in-out infinite alternate}
  @keyframes hsg-orb{0%{translate:0 0;scale:1}50%{translate:-38vw 260px;scale:.7}100%{translate:-12vw 620px;scale:1.15}}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #glass .ox-gpv__grid li,.ox-mo #glass .ox-gpv__grid li:nth-child(n){animation:none;filter:none;opacity:1}
  .ox-mo #glass .ox-gpv__grid::after{animation:hsg-wipe linear both;animation-timeline:view();animation-range:cover 12% cover 34%}
  @keyframes hsg-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
  .ox-mo #glass .ox-gpv__grid::before{animation:hsg-blade linear both;animation-timeline:view();animation-range:cover 12% cover 34%}
  @keyframes hsg-blade{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
  .ox-mo #glass .ox-card__ghost{animation:hsg-fill linear both;animation-timeline:view();animation-range:cover 26% cover 52%}
  @keyframes hsg-fill{from{background-size:0% 100%}to{background-size:100% 100%}}
}}
/* HSG-1 pass 4: record ring on the 0 tile, warning strip types itself in, standard chips pop in, chip refraction sheen, spinning light border on card hover */
@property --hp{syntax:"<percentage>";inherits:false;initial-value:100%}
@property --ga{syntax:"<angle>";inherits:false;initial-value:0deg}
.ox #glass .ox-gpv__grid li:last-child::before{content:"";position:absolute;right:18px;top:18px;width:58px;height:58px;border-radius:50%;pointer-events:none;background:conic-gradient(#4fd08f var(--hp),rgba(255,255,255,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));filter:drop-shadow(0 0 8px rgba(79,208,143,.6))}
.ox #glass h2 .ox-chip{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%),linear-gradient(var(--green),var(--green));background-size:250% .89em,100% .89em;background-position:-150% 64%,0 64%;background-repeat:no-repeat}
.ox #glass .ox-card{position:relative}
.ox #glass .ox-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ga),transparent 0 62%,#4fd08f 78%,#e07a2f 90%,transparent 100%);-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 exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s}
.ox #glass .ox-card:hover::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .ox #glass h2 .ox-chip{animation:hsg-ref 5s ease-in-out 1.2s infinite}
  @keyframes hsg-ref{0%,60%{background-position:-150% 64%,0 64%}100%{background-position:250% 64%,0 64%}}
  .ox #glass .ox-card:hover::before{animation:hsg-spin 2.4s linear infinite}
  @keyframes hsg-spin{to{--ga:360deg}}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #glass .ox-gpv__grid li:last-child::before{animation:hsg-ring linear both;animation-timeline:view();animation-range:cover 30% cover 48%}
  @keyframes hsg-ring{from{--hp:0%}to{--hp:100%}}
  .ox-mo #glass .ox-gpv__warn{animation:hsg-type linear both;animation-timeline:view();animation-range:entry 60% cover 30%}
  @keyframes hsg-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .ox-mo #glass .ox-gpv__chips>span{animation:hsg-pop linear both;animation-timeline:view();animation-range:entry 30% entry 90%}
  .ox-mo #glass .ox-gpv__chips>span:nth-child(3){animation-range:entry 40% entry 100%}
  .ox-mo #glass .ox-gpv__chips>span:nth-child(4){animation-range:entry 50% cover 30%}
  @keyframes hsg-pop{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
}}