/* Hero tablet (v2, chosen Sep 25, 2026). Loads after main.css and refines the tablet there:
   thinner bezel, space-black polished rim, glass reflection that slides with the tilt, screen that wakes when flat,
   a cue under the device once the demo is clickable, the alert born from the watched KPI, and a first-time guide.
   Animated properties stay transform / opacity only. */

/* ---------- device: space black, polished chamfer, 14 px bezel; radii stay concentric (44 / 41.5 / 27.5) ---------- */
.device{padding:2.5px;border-radius:44px;
  background:linear-gradient(150deg,#67646c 0%,#2c2a2f 14%,#1a191d 46%,#222025 72%,#57535c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.30),0 1px 0 rgba(255,255,255,.06)}
.device::before,.device::after{background:linear-gradient(180deg,#56525c,#1f1d22)}
.bezel{padding:14px;border-radius:41.5px;background:#050406;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 0 2px #000}
.cam{top:3.5px;width:6px;height:6px;margin-left:-3px}
.screen{border-radius:27.5px}
.screen::after{background:linear-gradient(0deg,rgba(0,0,0,.10),rgba(0,0,0,0) 30%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}

/* the screen is a touch dim while tilted and wakes up once the tablet is flat */
.screen .wake{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:#0b090c;opacity:.24;transition:opacity .7s var(--ease-expo)}
.is-awake .screen .wake{opacity:0}
/* glass reflection: a soft diagonal band; JS slides it across (translate) and fades it (opacity) with the tilt */
.screen .glare{position:absolute;z-index:5;left:-60%;top:-60%;width:220%;height:220%;pointer-events:none;will-change:transform,opacity;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.075) 46%,rgba(255,255,255,.025) 53%,rgba(255,255,255,0) 60%)}

/* shadow follows the tilt: wide and faint when leaning back, tight and dark when flat */
.device-shadow{will-change:transform,opacity;transform-origin:50% 50%}

/* ---------- light behind the tablet's top edge (owner's values from lab/hero-light, Oct 5, 2026) ----------
   One layer behind the copy and the tablet (after .hero-bg). render() in js/main.js moves .bl-halo to the tablet's projected
   top edge and sets its opacity (transform + opacity only); .backlight takes the stage's translate during the scene.
   Two stacked gradients: a tight core and a wide soft one. .bl-rim is a thin lit line on the top edge, fading down the sides. */
.backlight{position:absolute;left:0;top:0;z-index:0;pointer-events:none;animation:bl-in 1.4s var(--ease-expo) .5s both}
@keyframes bl-in{from{opacity:0}to{opacity:1}}
.bl-halo{position:absolute;left:0;top:0;width:1000px;height:310px;margin-top:-155px;opacity:0;will-change:transform,opacity;
  background:radial-gradient(34% 16% at 50% 50%,rgba(86,16,41,.75),rgba(86,16,41,0) 100%),radial-gradient(50% 50% at 50% 50%,rgba(86,16,41,.5),rgba(86,16,41,.16) 45%,rgba(86,16,41,0) 100%)}
.bl-rim{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;border:1.5px solid rgb(86,16,41);opacity:0;will-change:opacity;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 7%,rgba(0,0,0,0) 26%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 7%,rgba(0,0,0,0) 26%)}
@media (max-width: 719px){ .backlight,.bl-rim{display:none} }

/* cue under the device */
.demo-cue{position:absolute;left:50%;bottom:-58px;margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap;
  height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line-dark);background:rgba(28,22,30,.72);color:var(--text-inv-2);font-size:14px;font-weight:500;
  opacity:0;transform:translate(-50%,8px);transition:opacity .24s var(--ease-expo),transform .48s var(--ease-expo);pointer-events:none}
.demo-cue .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--cream)}
.demo-cue b{color:var(--cream);font-weight:600}
/* the dot pings three times when the cue appears, so the demo reads as something to try (transform + opacity only) */
.demo-cue .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--cream);opacity:0}
.demo-cue.is-visible .dot::after{animation:cue-ping 1.6s var(--ease-expo) .3s 3}
@keyframes cue-ping{from{transform:scale(.4);opacity:.7}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.demo-cue.is-visible .dot::after{animation:none}}
.demo-cue.is-visible{opacity:1;transform:translate(-50%,0)}

/* nav: solid once the page has moved (main.css). The 72 % see-through fill let the tablet's top bar and the 03 headlines
   show through it without a blur (backdrop-filter is not allowed), which read as two bars stacked (team feedback E2). */

/* ---------- first-time guide: cat asks, sidebar glints once, tip points at Alerts (cream like the alert card; no red) ---------- */
.sidebar{position:relative;z-index:3}
.side-item[data-view="alerts"]{position:relative}
.coach,.cat-bubble{position:absolute;pointer-events:none;white-space:nowrap;border-radius:10px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:600;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.6);opacity:0;transition:opacity .3s var(--ease-expo),transform .5s var(--ease-expo)}
.coach{left:calc(100% + 14px);top:50%;padding:8px 12px;transform:translate(-8px,-50%)}
.coach::before{content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;background:var(--cream);border-radius:2px;transform:translateY(-50%) rotate(45deg)}
.coach-3 .coach{opacity:1;transform:translate(0,-50%);animation:coach-nudge 1.4s var(--ease-inout-sine) .6s 3}
@keyframes coach-nudge{0%,100%{transform:translate(0,-50%)}50%{transform:translate(-5px,-50%)}}
/* the cat peeks from the empty middle of the red row; its bubble sits above it, clear of the header text */
.cat-bubble{z-index:2;right:27px;top:-80px;padding:7px 11px;transform:translateY(4px)}
.cat-bubble::after{content:"";position:absolute;right:90px;bottom:-4px;width:9px;height:9px;background:var(--cream);border-radius:2px;transform:rotate(45deg)}
.coach-1 .cat-bubble{opacity:1;transform:none}
.coach-2 .side-item:not(.is-active){animation:side-glint .9s var(--ease-inout-sine)}
.coach-2 .side-item:nth-child(2){animation-delay:.07s}.coach-2 .side-item:nth-child(3){animation-delay:.14s}
.coach-2 .side-item:nth-child(4){animation-delay:.21s}.coach-2 .side-item:nth-child(5){animation-delay:.28s}.coach-2 .side-item:nth-child(6){animation-delay:.35s}
@keyframes side-glint{0%,100%{background:rgba(251,247,242,0)}40%{background:rgba(251,247,242,.10)}}
.coach-done .coach,.coach-done .cat-bubble{opacity:0;animation:none;transition-duration:.2s}

/* ---------- the alert grows out of the watched KPI that broke (timing scaled by --gt, set by JS) ----------
   1. the list stays; its Brand CPC row turns red (+28%) and the header says 1 of 48 is outside its range (0.6 s x gt)
   2. the alert card opens just below that row, so the red row stays in view above its explanation (1.6 s x gt);
      the card is 12 px tighter to fit the column (402 px - 107 px row bottom = 295 px)
   3. the cat peeks over the card (2.1 s x gt) */
.device .chart .jump{transition:stroke-dashoffset calc(.7s * var(--gt,1)) var(--ease)}
.device .chart .end-dot{transition:opacity .2s var(--ease) calc(.5s * var(--gt,1))}
.device .chart .dot,.device .chart .halo{transition:transform .28s var(--ease) calc(.6s * var(--gt,1))}
.device.is-alert .chart .halo{animation:halo 1s var(--ease) calc(.9s * var(--gt,1)) 2}
.device .badge{transition:transform .24s var(--ease) calc(.7s * var(--gt,1)),opacity .24s var(--ease) calc(.7s * var(--gt,1))}
.device .watch{transition:opacity .22s var(--ease) calc(.9s * var(--gt,1)),transform .22s var(--ease) calc(.9s * var(--gt,1))}
.device.is-alert .watch{opacity:1;transform:none}
.wh,.w-hot .st{display:grid}
.wh>span,.w-hot .st>span{grid-area:1/1;transition:opacity .25s var(--ease) calc(.6s * var(--gt,1))}
.wh .hot,.w-hot .st .hot{opacity:0}
.device.is-alert .wh .calm,.device.is-alert .w-hot .st .calm{opacity:0}
.device.is-alert .wh .hot,.device.is-alert .w-hot .st .hot{opacity:1}
.device.is-alert .wh .hot{color:var(--red-on-dark)}
.w-hot .st{padding:0;background:none;justify-items:end}
.w-hot .st>span{height:22px;padding:0 9px;border-radius:999px;display:flex;align-items:center}
.w-hot .st .calm{background:rgba(251,247,242,.07);color:#C9C1C7}
.w-hot .st .hot{background:rgba(232,96,108,.16);color:var(--red-on-tint)}
.w-hot{position:relative}
.w-hot::before{content:"";position:absolute;inset:0 -16px;background:rgba(179,32,46,.10);box-shadow:inset 2px 0 0 var(--red);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease) calc(.6s * var(--gt,1))}
.device.is-alert .w-hot::before{opacity:1}
.device .alert-wrap{margin-top:107px;transform-origin:50% 0;transform:translateY(8px) scale(.985);
  transition:opacity .42s var(--ease) calc(1.6s * var(--gt,1)),transform .6s var(--ease-expo) calc(1.6s * var(--gt,1))}
.device.is-alert .alert-wrap{transform:none}
.device .alert{padding:14px;gap:10px}
.device .alert-wrap .cat-slot{right:90px}
.device.is-alert .cat{animation:peek .6s var(--ease) calc(2.1s * var(--gt,1)) both}

@media (prefers-reduced-motion: reduce){ .screen .wake{opacity:0!important} .screen .glare{opacity:.3} }