/* Triton Technical — service-card overlay modal
   Brand-aligned animated overlays opened by [data-tt-overlay-modal] triggers.
   Pattern documented in previews/STANDARD.md. Forked from support-modal.{js,css}. */

/* ============================================================================
   1. CARD TRIGGER STYLING
   Cards on the page become clickable; add cursor + subtle "click me" affordance.
   ========================================================================== */

.lighting-pillar[data-tt-overlay-modal]{
  cursor:pointer;
  position:relative;
}
.lighting-pillar[data-tt-overlay-modal]:focus-visible{
  outline:2px solid var(--tt-brass, #C9A663);
  outline-offset:2px;
}

/* ============================================================================
   2. MODAL CHROME (backdrop + card + slots)
   ========================================================================== */

.tt-ovly-backdrop{
  --ovly-blue:var(--tt-blue, #10427A);
  --ovly-brass:var(--tt-brass, #C9A663);
  --ovly-brass-bright:var(--tt-brass-bright, #E0BD78);
  --ovly-brass-soft:var(--tt-brass-soft, rgba(201,166,99,.14));
  --ovly-navy:var(--tt-navy, #0A1628);
  --ovly-navy-2:var(--tt-navy-2, #0F1F35);
  --ovly-ink:var(--tt-ink, #0F1A2A);
  --ovly-line:var(--tt-gray-line, rgba(105,101,102,.18));
  /* Max stage height — overridden in short-viewport breakpoints below.
     The subtracted value reserves space for the modal's chrome: head + title
     (2-line allowance) + stage margin + caption block + ribbon. Long titles
     (e.g. "Exceptional Cinema") can wrap to 2-3 lines; budget accordingly. */
  --ovly-stage-max-h: calc(100dvh - 28rem);

  position:fixed;inset:0;z-index:10003;
  display:none;align-items:center;justify-content:center;
  padding:1rem;
  background:rgba(5,10,20,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .25s ease;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.tt-ovly-backdrop.tt-ovly-visible{
  display:flex;opacity:1;
}
.tt-ovly-backdrop *,
.tt-ovly-backdrop *::before,
.tt-ovly-backdrop *::after{box-sizing:border-box}

.tt-ovly-card{
  position:relative;
  width:100%;
  max-width:1040px;
  max-height:calc(100dvh - 2rem);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c1a30 0%, var(--ovly-navy) 100%);
  border:1px solid rgba(201,166,99,.22);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(16px) scale(.985);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  color:#fff;
}
.tt-ovly-backdrop.tt-ovly-visible .tt-ovly-card{
  transform:translateY(0) scale(1);
}
.tt-ovly-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 0%, var(--ovly-brass) 50%, transparent 100%);
  opacity:.8;z-index:2;
}

.tt-ovly-close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(10,22,40,.65);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.78);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;padding:0;
  transition:all .2s ease;
  z-index:5;
}
.tt-ovly-close:hover,
.tt-ovly-close:focus-visible{
  border-color:var(--ovly-brass);color:var(--ovly-brass);
  background:var(--ovly-brass-soft);outline:none;
}

.tt-ovly-content{
  flex:1;min-height:0;
  overflow-y:auto;
}

/* Per-card slots injected from templates */
.tt-ovly-head{
  display:flex;justify-content:flex-start;align-items:center;
  padding:22px 28px 18px;
  padding-right:72px; /* leave room for the absolute-positioned close button */
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tt-ovly-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ovly-brass);
  display:inline-flex;align-items:center;gap:.6rem;
}
.tt-ovly-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ovly-brass);
  box-shadow:0 0 12px var(--ovly-brass);
}

.tt-ovly-title-wrap{padding:24px 28px 8px}
.tt-ovly-title{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.1;letter-spacing:-.018em;
  color:#fff;margin:0;
}
.tt-ovly-title .accent{color:var(--ovly-brass);font-style:italic;font-weight:400}

.tt-ovly-stage-wrap{position:relative;margin:8px 28px 0;display:flex;justify-content:center}
.tt-ovly-stage{
  position:relative;
  border-radius:8px;overflow:hidden;
  background:#02050a;
  aspect-ratio:16/9;
  width:100%;
  /* Cap BOTH height and width so the stage stays 16:9 on short viewports.
     Previously max-height alone clipped the box to a non-16:9 rectangle and
     the SVG's xMidYMid-slice mode would crop animation content top/bottom.
     Now the box stays 16:9; on tall viewports it's card-width × 9/16, on
     short viewports it shrinks proportionally and centers horizontally. */
  max-height:var(--ovly-stage-max-h);
  max-width:calc(var(--ovly-stage-max-h) * 16 / 9);
}
.tt-ovly-stage svg{display:block;width:100%;height:100%}

/* Video-mode stage: the <video> fills the rounded stage and the modal card
   widens to give the player real estate. The literary caption + ribbon fade
   in immediately instead of waiting for the SVG reveal's multi-second timing. */
.tt-ovly-stage--video video{
  display:block;width:100%;height:100%;
  object-fit:contain;background:#000;
  border-radius:8px;
}
.tt-ovly-stage--video video::-webkit-media-controls-panel{
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);
}
/* Video stage inherits the 16:9 clamp from .tt-ovly-stage above. For video,
   we also shrink the card itself so the modal hugs the video on short
   viewports (SVG stages keep the full card width, with the SVG centered
   inside via the flex wrap). */
.tt-ovly-card:has(.tt-ovly-stage--video){
  max-width:min(1200px, calc(var(--ovly-stage-max-h) * 16 / 9 + 56px));
}

/* Brand watermark — black circle in lower-right of the video stage, white logo
   inside. pointer-events:none keeps the native video controls fully clickable
   underneath. Scales down on short viewports. */
.tt-ovly-video-badge{
  position:absolute;
  bottom:14px;right:14px;
  width:144px;height:144px;
  border-radius:50%;
  background:var(--ovly-navy);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  z-index:3;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.tt-ovly-video-badge img{
  display:block;
  width:72%;height:auto;
}
@media (max-height:680px){
  .tt-ovly-video-badge{width:102px;height:102px;bottom:10px;right:10px}
}
.tt-ovly-card:has(.tt-ovly-stage--video) .tt-ovly-caption-block,
.tt-ovly-card:has(.tt-ovly-stage--video) .tt-ovly-ribbon{
  animation-delay:.15s;
}

.tt-ovly-replay{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;
  background:rgba(10,22,40,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(201,166,99,.3);border-radius:999px;
  color:var(--ovly-brass);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease;
  opacity:0;animation:tt-ovly-fadeIn .6s 5.4s forwards;
}
.tt-ovly-replay:hover,
.tt-ovly-replay:focus-visible{
  border-color:var(--ovly-brass-bright);color:var(--ovly-brass-bright);
  background:rgba(201,166,99,.1);outline:none;
}
.tt-ovly-replay svg{width:12px;height:12px}

.tt-ovly-caption-block{padding:22px 28px 0;text-align:center;opacity:0;animation:tt-ovly-fadeIn 1s 4.4s forwards}
.tt-ovly-caption-line{
  font-family:'Newsreader',Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.4;
  color:rgba(255,255,255,.88);letter-spacing:.005em;
}
.tt-ovly-caption-signoff{
  margin-top:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

.tt-ovly-ribbon{padding:0 28px 28px;text-align:center;opacity:0;animation:tt-ovly-fadeIn 1s 5.0s forwards}
.tt-ovly-ribbon-divider{
  width:64px;height:1px;
  margin:14px auto 16px;
  background:var(--ovly-brass);opacity:.5;
}
.tt-ovly-ribbon-text{
  max-width:520px;margin:0 auto;
  font-family:'Newsreader',Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(.85rem,1.25vw,1rem);line-height:1.5;letter-spacing:.005em;
  color:rgba(255,255,255,.55);
}

@media (max-width:640px){
  .tt-ovly-head,.tt-ovly-title-wrap,.tt-ovly-caption-block,.tt-ovly-ribbon{padding-left:18px;padding-right:18px}
  .tt-ovly-stage-wrap{margin-left:18px;margin-right:18px}
  .tt-ovly-head{padding-right:62px}
  .tt-ovly-close{top:14px;right:14px;width:32px;height:32px}
}

/* Short-viewport refinements: tighten vertical chrome so the modal fits typical
   laptop screens (700–900px tall) without triggering the card's internal scroll.
   --ovly-stage-max-h is updated here too so the video-stage width-clamp follows. */
@media (max-height:860px){
  .tt-ovly-backdrop{--ovly-stage-max-h:calc(100dvh - 23rem)}
  .tt-ovly-head{padding:14px 28px 12px;padding-right:64px}
  .tt-ovly-title-wrap{padding:14px 28px 6px}
  .tt-ovly-title{font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.12}
  .tt-ovly-stage-wrap{margin-top:6px}
  .tt-ovly-caption-block{padding:14px 28px 0}
  .tt-ovly-caption-line{font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.35}
  .tt-ovly-caption-signoff{margin-top:8px;font-size:9px;letter-spacing:.24em}
  .tt-ovly-ribbon{padding:0 28px 18px}
  .tt-ovly-ribbon-divider{margin:10px auto 10px}
  .tt-ovly-ribbon-text{font-size:clamp(.8rem,1.1vw,.95rem);line-height:1.45}
}
@media (max-height:680px){
  .tt-ovly-backdrop{--ovly-stage-max-h:calc(100dvh - 17rem)}
  .tt-ovly-head{padding:10px 28px 8px;padding-right:60px}
  .tt-ovly-title-wrap{padding:10px 28px 4px}
  .tt-ovly-title{font-size:clamp(1.1rem,2.2vw,1.4rem)}
  .tt-ovly-stage-wrap{margin-top:4px}
  .tt-ovly-caption-block{padding:10px 28px 0}
  .tt-ovly-caption-signoff{display:none}
  .tt-ovly-ribbon{padding:0 28px 12px}
  .tt-ovly-ribbon-divider{margin:8px auto 6px;width:48px}
  .tt-ovly-replay{padding:.4rem .7rem;font-size:9px}
}

/* ============================================================================
   3. KEYFRAMES (shared)
   ========================================================================== */

@keyframes tt-ovly-fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes tt-ovly-bloom{
  0%{opacity:0;transform:scale(.7);transform-origin:800px 380px}
  100%{opacity:1;transform:scale(1);transform-origin:800px 380px}
}
@keyframes tt-ovly-lightOn{
  0%{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center}
  55%{opacity:1;transform:scale(1.15);transform-box:fill-box;transform-origin:center}
  100%{opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center}
}
@keyframes tt-ovly-vignetteDeepen{0%{opacity:.3}100%{opacity:1}}
@keyframes tt-ovly-twinkle{0%{opacity:0}50%{opacity:.7}100%{opacity:.4}}
@keyframes tt-ovly-settle{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* ============================================================================
   4. CARD 1 — PRIVATE CINEMA animations
   ========================================================================== */

.tt-ovly-stage .room-lights{opacity:.78}
.tt-ovly-stage[data-play] .room-lights{animation:cin-dim 1.8s .4s cubic-bezier(.45,.05,.55,.95) forwards}
@keyframes cin-dim{0%{opacity:.78}100%{opacity:0}}

.tt-ovly-stage .screen-frame,.tt-ovly-stage .screen-content{opacity:0;transform-origin:800px 350px}
.tt-ovly-stage[data-play] .screen-frame{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}
.tt-ovly-stage[data-play] .screen-content{animation:cin-screenWake 1.4s 1.7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes cin-screenWake{
  0%{opacity:0;filter:brightness(0.2)}
  40%{opacity:.4;filter:brightness(0.6)}
  100%{opacity:1;filter:brightness(1)}
}
.tt-ovly-stage .screen-horizon,.tt-ovly-stage .screen-figure{opacity:0}
.tt-ovly-stage[data-play] .screen-horizon{animation:tt-ovly-fadeIn .8s 2.6s ease-out forwards}
.tt-ovly-stage[data-play] .screen-figure{animation:tt-ovly-fadeIn 1s 2.8s ease-out forwards}

.tt-ovly-stage .screen-halo{opacity:0}
.tt-ovly-stage[data-play] .screen-halo{animation:tt-ovly-bloom 1.5s 2.0s ease-out forwards}

.tt-ovly-stage .proj-cone{opacity:0}
.tt-ovly-stage[data-play] .proj-cone{animation:tt-ovly-fadeIn 1.4s 2.6s ease-out forwards}

.tt-ovly-stage .floor-reflect{opacity:0}
.tt-ovly-stage[data-play] .floor-reflect{animation:tt-ovly-fadeIn 1.2s 3.0s ease-out forwards}

.tt-ovly-stage .brass-light{opacity:0}
.tt-ovly-stage[data-play] .brass-light{animation:tt-ovly-lightOn 1.1s var(--d,3.2s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .seat-row{opacity:.4}
.tt-ovly-stage[data-play] .seat-row{animation:cin-seatSettle 1.8s .2s ease-out forwards}
@keyframes cin-seatSettle{0%{opacity:.4}100%{opacity:1}}

.tt-ovly-stage .letterbox-top{transform:translateY(-46px)}
.tt-ovly-stage .letterbox-bot{transform:translateY(46px)}
.tt-ovly-stage[data-play] .letterbox-top{animation:cin-slideDown 1s 3.6s cubic-bezier(.6,.05,.3,1) forwards}
.tt-ovly-stage[data-play] .letterbox-bot{animation:cin-slideUp 1s 3.6s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes cin-slideDown{to{transform:translateY(0)}}
@keyframes cin-slideUp{to{transform:translateY(0)}}

.tt-ovly-stage .vignette-layer{opacity:.3}
.tt-ovly-stage[data-play] .vignette-layer{animation:tt-ovly-vignetteDeepen 2s 3.4s ease-out forwards}

/* ============================================================================
   5. CARD 2 — WHOLE-YACHT AUDIO animations
   ========================================================================== */

.tt-ovly-stage .yacht-silhouette,.tt-ovly-stage .yacht-mast,.tt-ovly-stage .yacht-wake{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette{animation:tt-ovly-settle 1.4s 0.6s cubic-bezier(.2,.7,.2,1) forwards}
.tt-ovly-stage[data-play] .yacht-mast{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}
.tt-ovly-stage[data-play] .yacht-wake{animation:tt-ovly-fadeIn 1.2s 1.8s ease-out forwards}

.tt-ovly-stage .zone{opacity:0}
.tt-ovly-stage[data-play] .zone{animation:wya-zoneOn 1.1s var(--d,2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes wya-zoneOn{
  0%{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center}
  55%{opacity:1;transform:scale(1.15);transform-box:fill-box;transform-origin:center}
  100%{opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center}
}

.tt-ovly-stage .audio-arc{stroke-dasharray:900;stroke-dashoffset:900;opacity:0}
.tt-ovly-stage[data-play] .audio-arc{animation:wya-traceArc 1.6s 3.2s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes wya-traceArc{
  0%{stroke-dashoffset:900;opacity:0}
  20%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .sea-sparkle{opacity:0}
.tt-ovly-stage[data-play] .sea-sparkle{animation:tt-ovly-twinkle 2s var(--d,2.5s) ease-out forwards}

/* ============================================================================
   6. CARD 3 — VIDEO WALLS animations
   ========================================================================== */

.tt-ovly-stage .salon-floor,.tt-ovly-stage .salon-walls,.tt-ovly-stage .salon-ceiling{opacity:0}
.tt-ovly-stage[data-play] .salon-floor{animation:tt-ovly-fadeIn 1s 0.2s ease-out forwards}
.tt-ovly-stage[data-play] .salon-walls{animation:tt-ovly-fadeIn 1s 0.5s ease-out forwards}
.tt-ovly-stage[data-play] .salon-ceiling{animation:tt-ovly-fadeIn 1s 0.5s ease-out forwards}

.tt-ovly-stage .sofa-row,.tt-ovly-stage .guest{opacity:0}
.tt-ovly-stage[data-play] .sofa-row{animation:tt-ovly-fadeIn 1.2s 1.2s ease-out forwards}
.tt-ovly-stage[data-play] .guest{animation:tt-ovly-settle 1.4s var(--d,1.6s) cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .wall-frame{opacity:0}
.tt-ovly-stage[data-play] .wall-frame{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .wall-content{opacity:0}
.tt-ovly-stage[data-play] .wall-content{animation:vw-wallWake 1.6s 2.0s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes vw-wallWake{
  0%{opacity:0;filter:brightness(0.3)}
  40%{opacity:.5;filter:brightness(0.7)}
  100%{opacity:1;filter:brightness(1)}
}

.tt-ovly-stage .wall-halo{opacity:0}
.tt-ovly-stage[data-play] .wall-halo{animation:tt-ovly-bloom 1.6s 2.4s ease-out forwards}

.tt-ovly-stage .room-wash{opacity:0}
.tt-ovly-stage[data-play] .room-wash{animation:tt-ovly-fadeIn 1.6s 2.8s ease-out forwards}

.tt-ovly-stage .accent-light{opacity:0}
.tt-ovly-stage[data-play] .accent-light{animation:tt-ovly-lightOn 1s var(--d,3.6s) ease-out forwards}

/* ============================================================================
   7. CARD 4 — OUTDOOR / SUN-DECK animations
   ========================================================================== */

.tt-ovly-stage .sky-grad{opacity:0}
.tt-ovly-stage[data-play] .sky-grad{animation:tt-ovly-fadeIn 1.2s 0.2s ease-out forwards}

.tt-ovly-stage .sun-orb,.tt-ovly-stage .sun-reflect{opacity:0}
.tt-ovly-stage[data-play] .sun-orb{animation:out-sunBloom 1.6s 0.6s cubic-bezier(.3,.6,.3,1) forwards}
.tt-ovly-stage[data-play] .sun-reflect{animation:tt-ovly-fadeIn 1.4s 1.0s ease-out forwards}
@keyframes out-sunBloom{
  0%{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center}
  100%{opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center}
}

.tt-ovly-stage .horizon-line,.tt-ovly-stage .sea-grad{opacity:0}
.tt-ovly-stage[data-play] .horizon-line{animation:tt-ovly-fadeIn 1s 0.4s ease-out forwards}
.tt-ovly-stage[data-play] .sea-grad{animation:tt-ovly-fadeIn 1.2s 0.6s ease-out forwards}

.tt-ovly-stage .deck-floor,.tt-ovly-stage .deck-rail,.tt-ovly-stage .rail-post{opacity:0}
.tt-ovly-stage[data-play] .deck-floor{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}
.tt-ovly-stage[data-play] .deck-rail{animation:tt-ovly-fadeIn 1s 1.6s ease-out forwards}
.tt-ovly-stage[data-play] .rail-post{animation:tt-ovly-fadeIn 1s 1.7s ease-out forwards}

.tt-ovly-stage .lounger,.tt-ovly-stage .deck-table{opacity:0}
.tt-ovly-stage[data-play] .lounger{animation:tt-ovly-settle 1.4s var(--d,2s) cubic-bezier(.2,.7,.2,1) forwards}
.tt-ovly-stage[data-play] .deck-table{animation:tt-ovly-fadeIn 1.2s 2.2s ease-out forwards}

.tt-ovly-stage .speaker-light{opacity:0}
.tt-ovly-stage[data-play] .speaker-light{animation:tt-ovly-lightOn 1s var(--d,2.8s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .display-pillar,.tt-ovly-stage .display-frame,.tt-ovly-stage .display-content{opacity:0}
.tt-ovly-stage[data-play] .display-pillar{animation:tt-ovly-fadeIn 1s 2.4s ease-out forwards}
.tt-ovly-stage[data-play] .display-frame{animation:tt-ovly-fadeIn 1s 2.8s ease-out forwards}
.tt-ovly-stage[data-play] .display-content{animation:out-displayWake 1.4s 3.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes out-displayWake{
  0%{opacity:0;filter:brightness(0.3)}
  100%{opacity:1;filter:brightness(1)}
}

/* Outdoor uses a custom vignette range (more atmospheric) */
.tt-ovly-stage[data-play="outdoor"] .vignette-layer{
  animation:out-vignetteDeepen 2s 3.6s ease-out forwards;
}
@keyframes out-vignetteDeepen{0%{opacity:.2}100%{opacity:.9}}

/* ============================================================================
   8. CARD 5 — STREAMING / CONTROL animations
   ========================================================================== */

.tt-ovly-stage .src-chip{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .src-chip{
  animation:
    str-chipAppear .8s var(--appear,0.8s) ease-out forwards,
    str-chipDriftIn 1.4s var(--drift,2.0s) cubic-bezier(.4,.0,.6,1) forwards;
}
@keyframes str-chipAppear{
  0%{opacity:0;transform:scale(.8)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes str-chipDriftIn{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  60%{opacity:.5}
  100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.4)}
}

.tt-ovly-stage .control-surface{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .control-surface{animation:str-surfaceWake 1.4s 2.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes str-surfaceWake{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .control-glow{opacity:0}
.tt-ovly-stage[data-play] .control-glow{animation:tt-ovly-fadeIn 1.4s 2.8s ease-out forwards}

.tt-ovly-stage .tap-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .tap-pulse{animation:str-tapPulse 2s 3.6s ease-out forwards}
@keyframes str-tapPulse{
  0%{opacity:0;transform:scale(.6)}
  40%{opacity:.6;transform:scale(1.15)}
  100%{opacity:.45;transform:scale(1)}
}

.tt-ovly-stage .ui-bits{opacity:0}
.tt-ovly-stage[data-play] .ui-bits{animation:tt-ovly-fadeIn 1s 3.2s ease-out forwards}

/* ============================================================================
   9. CARD 6 — ACOUSTIC DESIGN animations
   ========================================================================== */

.tt-ovly-stage .room-outline{stroke-dasharray:3200;stroke-dashoffset:3200;opacity:0}
.tt-ovly-stage[data-play] .room-outline{animation:aco-drawRoom 1.8s 0.5s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes aco-drawRoom{
  0%{stroke-dashoffset:3200;opacity:0}
  15%{opacity:.7}
  100%{stroke-dashoffset:0;opacity:.7}
}

.tt-ovly-stage .wall-mark{opacity:0}
.tt-ovly-stage[data-play] .wall-mark{animation:tt-ovly-fadeIn 1s 1.8s ease-out forwards}

.tt-ovly-stage .source-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .source-dot{animation:aco-sourceAppear .8s 2.0s ease-out forwards}
@keyframes aco-sourceAppear{
  0%{opacity:0;transform:scale(.5)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .source-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .source-pulse{animation:aco-sourcePulse 1.2s 2.3s ease-out forwards}
@keyframes aco-sourcePulse{
  0%{opacity:.7;transform:scale(.4)}
  100%{opacity:0;transform:scale(2.4)}
}

.tt-ovly-stage .seat{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .seat{animation:aco-seatSettle 1.2s var(--d,1.6s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes aco-seatSettle{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .seat-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .seat-halo{animation:aco-haloBloom 1.4s var(--d,3.0s) cubic-bezier(.25,.65,.3,1) forwards}
@keyframes aco-haloBloom{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:1;transform:scale(1.05)}
  100%{opacity:.85;transform:scale(1)}
}

.tt-ovly-stage .room-fill{opacity:0}
.tt-ovly-stage[data-play] .room-fill{animation:tt-ovly-fadeIn 1.6s 3.6s ease-out forwards}

.tt-ovly-stage .dim-mark{opacity:0}
.tt-ovly-stage[data-play] .dim-mark{animation:tt-ovly-fadeIn 1s 4.0s ease-out forwards}

/* ============================================================================
   11. CARD 7 — NETWORK ARCHITECTURE (IT, docs mode)
   ========================================================================== */

.tt-ovly-stage .blueprint-grid{opacity:0}
.tt-ovly-stage[data-play] .blueprint-grid{animation:tt-ovly-fadeIn 1.4s 0.2s ease-out forwards}

.tt-ovly-stage .deck-line{opacity:0}
.tt-ovly-stage[data-play] .deck-line{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .idf-marker{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .idf-marker{animation:tt-ovly-lightOn 1s var(--d,1.8s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .spine-line{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.tt-ovly-stage[data-play] .spine-line{animation:it-draw-spine 1.6s 2.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes it-draw-spine{
  0%{stroke-dashoffset:1200;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .spine-packet{opacity:0;offset-rotate:0deg}
.tt-ovly-stage[data-play] .spine-packet{animation:it-packet-flight 2.2s 3.6s linear forwards}
@keyframes it-packet-flight{
  0%{opacity:0;offset-distance:0%}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:.6;offset-distance:100%}
}

.tt-ovly-stage .idf-label{opacity:0}
.tt-ovly-stage[data-play] .idf-label{animation:tt-ovly-fadeIn 1s var(--d,3.8s) ease-out forwards}

/* ============================================================================
   12. CARD 8 — YACHT WI-FI COVERAGE (IT, hybrid heatmap)
   ========================================================================== */

.tt-ovly-stage .yacht-hull-outline{stroke-dasharray:3400;stroke-dashoffset:3400;opacity:0}
.tt-ovly-stage[data-play] .yacht-hull-outline{animation:it-draw-hull 1.8s 0.5s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes it-draw-hull{
  0%{stroke-dashoffset:3400;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .zone-divider{opacity:0}
.tt-ovly-stage[data-play] .zone-divider{animation:tt-ovly-fadeIn 1s 1.8s ease-out forwards}

.tt-ovly-stage .ap-marker{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ap-marker{animation:tt-ovly-lightOn 1s var(--d,2.2s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .ap-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ap-halo{animation:it-halo-bloom 1.4s var(--d,2.8s) cubic-bezier(.25,.65,.3,1) forwards}
@keyframes it-halo-bloom{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:.95;transform:scale(1.05)}
  100%{opacity:.7;transform:scale(1)}
}

.tt-ovly-stage .zone-label{opacity:0}
.tt-ovly-stage[data-play] .zone-label{animation:tt-ovly-fadeIn 1s var(--d,3.8s) ease-out forwards}

/* ============================================================================
   13. CARD 9 — VLANs & SEGMENTATION (IT, docs mode)
   ========================================================================== */

.tt-ovly-stage .vlan-lane{opacity:0;transform-box:fill-box;transform-origin:left center}
.tt-ovly-stage[data-play] .vlan-lane{animation:it-lane-in 1s var(--d,1.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes it-lane-in{
  0%{opacity:0;transform:scaleX(.05)}
  100%{opacity:1;transform:scaleX(1)}
}

.tt-ovly-stage .vlan-label{opacity:0}
.tt-ovly-stage[data-play] .vlan-label{animation:tt-ovly-fadeIn 1s var(--d,2.0s) ease-out forwards}

.tt-ovly-stage .vlan-packet{opacity:0}
.tt-ovly-stage[data-play] .vlan-packet{animation:it-packet-run 2.4s var(--d,2.8s) cubic-bezier(.4,.2,.6,.9) forwards}
@keyframes it-packet-run{
  0%{opacity:0;transform:translateX(0)}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:.5;transform:translateX(820px)}
}

.tt-ovly-stage .vlan-divider{opacity:0}
.tt-ovly-stage[data-play] .vlan-divider{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

/* ============================================================================
   14. CARD 10 — CYBERSECURITY (IT, hybrid perimeter)
   ========================================================================== */

.tt-ovly-stage .perimeter-ring{stroke-dasharray:2400;stroke-dashoffset:2400;opacity:0}
.tt-ovly-stage[data-play] .perimeter-ring{animation:it-draw-perimeter 1.8s 1.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes it-draw-perimeter{
  0%{stroke-dashoffset:2400;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .interior-glow{opacity:0}
.tt-ovly-stage[data-play] .interior-glow{animation:tt-ovly-fadeIn 1.4s 2.6s ease-out forwards}

.tt-ovly-stage .lock-icon{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .lock-icon{animation:tt-ovly-lightOn 1s 3.0s cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .threat-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .threat-dot{animation:it-threat-run 2.6s var(--d,3.0s) cubic-bezier(.4,.0,.6,1) forwards}
@keyframes it-threat-run{
  0%{opacity:0;transform:translate(0,0)}
  20%{opacity:.7}
  78%{opacity:.55;transform:translate(var(--tx,0),var(--ty,0))}
  100%{opacity:0;transform:translate(calc(var(--tx,0) * 1.05), calc(var(--ty,0) * 1.05))}
}

.tt-ovly-stage .perim-flash{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .perim-flash{animation:it-perim-flash 0.6s var(--d,4.0s) ease-out forwards}
@keyframes it-perim-flash{
  0%{opacity:0;transform:scale(.5)}
  50%{opacity:.7;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1)}
}

.tt-ovly-stage .system-label{opacity:0}
.tt-ovly-stage[data-play] .system-label{animation:tt-ovly-fadeIn 1s var(--d,3.6s) ease-out forwards}

/* ============================================================================
   15. CARD 11 — SERVERS & STORAGE (IT, docs mode)
   ========================================================================== */

.tt-ovly-stage .rack-frame{stroke-dasharray:2400;stroke-dashoffset:2400;opacity:0}
.tt-ovly-stage[data-play] .rack-frame{animation:it-draw-perimeter 1.8s 0.6s cubic-bezier(.4,.2,.2,1) forwards}

.tt-ovly-stage .rack-cap{opacity:0}
.tt-ovly-stage[data-play] .rack-cap{animation:tt-ovly-fadeIn 1s 1.8s ease-out forwards}

.tt-ovly-stage .rack-slot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .rack-slot{animation:it-slot-in 1s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes it-slot-in{
  0%{opacity:0;transform:scale(.97)}
  100%{opacity:.95;transform:scale(1)}
}

.tt-ovly-stage .rack-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .rack-led{animation:tt-ovly-lightOn 1s var(--d,3.6s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .rack-label{opacity:0}
.tt-ovly-stage[data-play] .rack-label{animation:tt-ovly-fadeIn 1s 4.0s ease-out forwards}

/* ============================================================================
   16. CARD 12 — MONITORING & SUPPORT (IT, experience mode)
   ========================================================================== */

.tt-ovly-stage .ops-floor,.tt-ovly-stage .ops-desk,.tt-ovly-stage .ops-figure{opacity:0}
.tt-ovly-stage[data-play] .ops-floor{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}
.tt-ovly-stage[data-play] .ops-desk{animation:tt-ovly-fadeIn 1s 1.6s ease-out forwards}
.tt-ovly-stage[data-play] .ops-figure{animation:tt-ovly-fadeIn 1.4s var(--d,2.0s) ease-out forwards}

.tt-ovly-stage .ops-monitor{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ops-monitor{animation:it-mon-wake 1.4s var(--d,2.4s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes it-mon-wake{
  0%{opacity:0;transform:scale(.94);filter:brightness(0.4)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}

.tt-ovly-stage .ops-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ops-led{animation:tt-ovly-lightOn 1s var(--d,3.0s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .support-arc{stroke-dasharray:1300;stroke-dashoffset:1300;opacity:0}
.tt-ovly-stage[data-play] .support-arc{animation:it-draw-arc 1.6s 2.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes it-draw-arc{
  0%{stroke-dashoffset:1300;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .support-packet{opacity:0;offset-rotate:0deg}
.tt-ovly-stage[data-play] .support-packet{animation:it-packet-flight 2.2s 3.8s linear forwards}

/* ============================================================================
   17. CARD 13 — STARLINK MARITIME (SatCom, hybrid)
   ========================================================================== */

.tt-ovly-stage .sat-dish{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .sat-dish{animation:tt-ovly-lightOn 1s 1.8s cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .sat-beam{stroke-dasharray:600;stroke-dashoffset:600;opacity:0}
.tt-ovly-stage[data-play] .sat-beam{animation:sc-draw-beam 1.4s 2.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-beam{
  0%{stroke-dashoffset:600;opacity:0}
  20%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .leo-dot{opacity:0}
.tt-ovly-stage[data-play] .leo-dot{animation:sc-leo-drift 4.5s var(--d,2.8s) linear forwards}
@keyframes sc-leo-drift{
  0%{opacity:0;transform:translateX(-80px)}
  15%{opacity:.85}
  85%{opacity:.85}
  100%{opacity:0;transform:translateX(140px)}
}

.tt-ovly-stage .leo-orbit-line{opacity:0}
.tt-ovly-stage[data-play] .leo-orbit-line{animation:tt-ovly-fadeIn 1.2s 2.6s ease-out forwards}

.tt-ovly-stage .rules-badge{opacity:0;transform-box:fill-box;transform-origin:right center}
.tt-ovly-stage[data-play] .rules-badge{animation:sc-badge-in 1s 3.6s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sc-badge-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

/* ============================================================================
   18. CARD 14 — VSAT & MANAGED SERVICE (SatCom, docs)
   ========================================================================== */

.tt-ovly-stage .earth-arc{stroke-dasharray:1800;stroke-dashoffset:1800;opacity:0}
.tt-ovly-stage[data-play] .earth-arc{animation:sc-draw-earth-arc 1.8s 0.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-earth-arc{
  0%{stroke-dashoffset:1800;opacity:0}
  15%{opacity:.7}
  100%{stroke-dashoffset:0;opacity:.7}
}

.tt-ovly-stage .geo-orbit-line{opacity:0}
.tt-ovly-stage[data-play] .geo-orbit-line{animation:tt-ovly-fadeIn 1s 0.8s ease-out forwards}

.tt-ovly-stage .vsat-sat{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .vsat-sat{animation:tt-ovly-lightOn 1.2s 1.8s cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .beam-cone{opacity:0;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .beam-cone{animation:sc-beam-fan 1.4s 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sc-beam-fan{
  0%{opacity:0;transform:scaleY(.2)}
  100%{opacity:.4;transform:scaleY(1)}
}

.tt-ovly-stage .footprint-ellipse{opacity:0}
.tt-ovly-stage[data-play] .footprint-ellipse{animation:tt-ovly-fadeIn 1.2s 3.0s ease-out forwards}

.tt-ovly-stage .yacht-mini{opacity:0}
.tt-ovly-stage[data-play] .yacht-mini{animation:tt-ovly-settle 1s var(--d,3.0s) cubic-bezier(.2,.7,.2,1) forwards}

/* ============================================================================
   19. CARD 15 — LEO, CELLULAR & COASTAL (SatCom, hybrid)
   ========================================================================== */

.tt-ovly-stage .coverage-ring{stroke-dasharray:3000;stroke-dashoffset:3000;opacity:0}
.tt-ovly-stage[data-play] .coverage-ring{animation:sc-draw-ring 1.4s var(--d,1.4s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-ring{
  0%{stroke-dashoffset:3000;opacity:0}
  15%{opacity:.7}
  100%{stroke-dashoffset:0;opacity:.7}
}

.tt-ovly-stage .coverage-fill{opacity:0}
.tt-ovly-stage[data-play] .coverage-fill{animation:tt-ovly-fadeIn 1.4s var(--d,1.8s) ease-out forwards}

.tt-ovly-stage .transit-line{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.tt-ovly-stage[data-play] .transit-line{animation:it-draw-spine 1.8s 2.6s cubic-bezier(.4,.2,.2,1) forwards}

.tt-ovly-stage .transit-arrow{opacity:0}
.tt-ovly-stage[data-play] .transit-arrow{animation:tt-ovly-fadeIn 1s 4.0s ease-out forwards}

.tt-ovly-stage .ring-label{opacity:0}
.tt-ovly-stage[data-play] .ring-label{animation:tt-ovly-fadeIn 1s var(--d,3.2s) ease-out forwards}

/* ============================================================================
   20. CARD 16 — BACKUP COMMUNICATIONS (SatCom, docs)
   ========================================================================== */

.tt-ovly-stage .shelf-line{opacity:0}
.tt-ovly-stage[data-play] .shelf-line{animation:tt-ovly-fadeIn 1s 0.8s ease-out forwards}

.tt-ovly-stage .terminal{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .terminal{animation:sc-terminal-in 1s var(--d,1.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sc-terminal-in{
  0%{opacity:0;transform:scale(.95) translateY(6px)}
  100%{opacity:.95;transform:scale(1) translateY(0)}
}

.tt-ovly-stage .terminal-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .terminal-led{animation:tt-ovly-lightOn 1s var(--d,2.6s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .terminal-label{opacity:0}
.tt-ovly-stage[data-play] .terminal-label{animation:tt-ovly-fadeIn 1s var(--d,3.0s) ease-out forwards}

.tt-ovly-stage .ready-band{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ready-band{animation:sc-band-in 1s 3.4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sc-band-in{
  0%{opacity:0;transform:scaleX(.4)}
  100%{opacity:1;transform:scaleX(1)}
}

/* ============================================================================
   21. CARD 17 — MULTI-WAN ROUTING & FAILOVER (SatCom, docs)
   ========================================================================== */

.tt-ovly-stage .router-box{stroke-dasharray:600;stroke-dashoffset:600;opacity:0}
.tt-ovly-stage[data-play] .router-box{animation:sc-draw-box 1.2s 1.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-box{
  0%{stroke-dashoffset:600;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .router-fill{opacity:0}
.tt-ovly-stage[data-play] .router-fill{animation:tt-ovly-fadeIn 1s 1.6s ease-out forwards}

.tt-ovly-stage .router-label{opacity:0}
.tt-ovly-stage[data-play] .router-label{animation:tt-ovly-fadeIn 1s 2.0s ease-out forwards}

.tt-ovly-stage .wan-path{stroke-dasharray:620;stroke-dashoffset:620;opacity:0}
.tt-ovly-stage[data-play] .wan-path{animation:sc-draw-wan-path 1s var(--d,2.0s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-wan-path{
  0%{stroke-dashoffset:620;opacity:0}
  15%{opacity:.75}
  100%{stroke-dashoffset:0;opacity:.75}
}

.tt-ovly-stage .wan-path.active{opacity:0}
.tt-ovly-stage[data-play] .wan-path.active{animation:sc-draw-wan-path-active 1s 2.0s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-wan-path-active{
  0%{stroke-dashoffset:620;opacity:0}
  15%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

.tt-ovly-stage .wan-trunk{stroke-dasharray:540;stroke-dashoffset:540;opacity:0}
.tt-ovly-stage[data-play] .wan-trunk{animation:sc-draw-trunk 1.2s 2.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-trunk{
  0%{stroke-dashoffset:540;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .wan-label{opacity:0}
.tt-ovly-stage[data-play] .wan-label{animation:tt-ovly-fadeIn 1s var(--d,3.4s) ease-out forwards}

.tt-ovly-stage .wan-packet{opacity:0}
.tt-ovly-stage[data-play] .wan-packet{animation:sc-packet-flow 2.6s var(--d,3.6s) linear forwards}
@keyframes sc-packet-flow{
  0%{opacity:0;transform:translateX(0)}
  8%{opacity:1}
  92%{opacity:1}
  100%{opacity:.4;transform:translateX(var(--dx,1100px))}
}

.tt-ovly-stage .priority-stack{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .priority-stack{animation:sc-stack-in 1s 3.6s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sc-stack-in{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}

/* ============================================================================
   22. CARD 18 — MONITORING & SUPPORT (SatCom, experience — link-watching)
   ========================================================================== */

.tt-ovly-stage .destination{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .destination{animation:tt-ovly-lightOn 1s var(--d,1.6s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .link-beam{stroke-dasharray:800;stroke-dashoffset:800;opacity:0}
.tt-ovly-stage[data-play] .link-beam{animation:sc-draw-link-beam 1.4s var(--d,2.2s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sc-draw-link-beam{
  0%{stroke-dashoffset:800;opacity:0}
  20%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .health-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .health-dot{animation:tt-ovly-lightOn 1s var(--d,3.4s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .health-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .health-halo{animation:tt-ovly-fadeIn 1.4s var(--d,3.5s) ease-out forwards}

.tt-ovly-stage .ops-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ops-badge{animation:sc-badge-in 1s 3.8s cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .ops-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .ops-pulse{animation:sc-ops-pulse 2s 4.0s ease-out forwards}
@keyframes sc-ops-pulse{
  0%{opacity:0;transform:scale(.5)}
  40%{opacity:.6;transform:scale(1.3)}
  100%{opacity:.4;transform:scale(1)}
}

/* ============================================================================
   23. CARD 19 — ARCHITECTURAL LIGHTING (Lighting, experience)
   ========================================================================== */

.tt-ovly-stage .room-walls,
.tt-ovly-stage .room-floor,
.tt-ovly-stage .room-ceiling{opacity:0}
.tt-ovly-stage[data-play] .room-walls{animation:tt-ovly-fadeIn 1s 0.5s ease-out forwards}
.tt-ovly-stage[data-play] .room-floor{animation:tt-ovly-fadeIn 1s 0.3s ease-out forwards}
.tt-ovly-stage[data-play] .room-ceiling{animation:tt-ovly-fadeIn 1s 0.5s ease-out forwards}

.tt-ovly-stage .cove-light{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .cove-light{animation:lt-cove-bloom 1.6s 1.0s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-cove-bloom{
  0%{opacity:0;transform:scaleY(.3)}
  100%{opacity:1;transform:scaleY(1)}
}

.tt-ovly-stage .downlight-cone{opacity:0;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .downlight-cone{animation:lt-cone-on 1.2s var(--d,1.8s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-cone-on{
  0%{opacity:0;transform:scaleY(.2)}
  100%{opacity:.85;transform:scaleY(1)}
}

.tt-ovly-stage .light-pool{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .light-pool{animation:lt-pool-in 1s var(--d,2.0s) ease-out forwards}
@keyframes lt-pool-in{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:.85;transform:scale(1)}
}

.tt-ovly-stage .sofa-silhouette,
.tt-ovly-stage .side-table,
.tt-ovly-stage .art-frame{opacity:0}
.tt-ovly-stage[data-play] .sofa-silhouette{animation:tt-ovly-fadeIn 1.2s 1.4s ease-out forwards}
.tt-ovly-stage[data-play] .side-table{animation:tt-ovly-fadeIn 1.2s 1.6s ease-out forwards}
.tt-ovly-stage[data-play] .art-frame{animation:tt-ovly-fadeIn 1s 2.6s ease-out forwards}

.tt-ovly-stage .accent-cone{opacity:0;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .accent-cone{animation:lt-cone-on 1.2s 3.0s cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .art-canvas{opacity:0}
.tt-ovly-stage[data-play] .art-canvas{animation:lt-art-wake 1.4s 3.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-art-wake{
  0%{opacity:0;filter:brightness(0.3)}
  100%{opacity:1;filter:brightness(1)}
}

/* ============================================================================
   24. CARD 20 — DECORATIVE FIXTURES (Lighting, experience — chandelier hero)
   ========================================================================== */

.tt-ovly-stage .ceiling-mount{opacity:0}
.tt-ovly-stage[data-play] .ceiling-mount{animation:tt-ovly-fadeIn 1s 0.6s ease-out forwards}

.tt-ovly-stage .chandelier-frame{opacity:0;transform-box:fill-box;transform-origin:top center}
.tt-ovly-stage[data-play] .chandelier-frame{animation:lt-chandelier-descend 1.4s 0.8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-chandelier-descend{
  0%{opacity:0;transform:translateY(-16px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.tt-ovly-stage .chandelier-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .chandelier-glow{animation:lt-glow-bloom 1.6s 1.6s ease-out forwards}
@keyframes lt-glow-bloom{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .chandelier-bulb{opacity:0}
.tt-ovly-stage[data-play] .chandelier-bulb{animation:tt-ovly-fadeIn 1.4s 1.8s ease-out forwards}

.tt-ovly-stage .crystal-sparkle{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .crystal-sparkle{animation:lt-sparkle-in 1.4s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-sparkle-in{
  0%{opacity:0;transform:scale(.3)}
  55%{opacity:1;transform:scale(1.4)}
  100%{opacity:.85;transform:scale(1)}
}

.tt-ovly-stage .table-silhouette,
.tt-ovly-stage .dining-chair{opacity:0}
.tt-ovly-stage[data-play] .table-silhouette{animation:tt-ovly-fadeIn 1.2s 3.0s ease-out forwards}
.tt-ovly-stage[data-play] .dining-chair{animation:tt-ovly-fadeIn 1.2s var(--d,3.2s) ease-out forwards}

.tt-ovly-stage .table-glint{opacity:0}
.tt-ovly-stage[data-play] .table-glint{animation:tt-ovly-fadeIn 1.4s 3.6s ease-out forwards}

/* ============================================================================
   25. CARD 21 — EXTERIOR DECK LIGHTING (Lighting, experience — constellation)
   ========================================================================== */

.tt-ovly-stage .star{opacity:0}
.tt-ovly-stage[data-play] .star{animation:tt-ovly-fadeIn 1.4s var(--d,0.6s) ease-out forwards}

.tt-ovly-stage .rail-light{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .rail-light{animation:tt-ovly-lightOn 1s var(--d,1.6s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .rail-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .rail-halo{animation:tt-ovly-fadeIn 1.2s var(--d,1.8s) ease-out forwards}

.tt-ovly-stage .mast-light{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .mast-light{animation:tt-ovly-lightOn 1.2s 2.4s cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .mast-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .mast-glow{animation:tt-ovly-fadeIn 1.4s 2.6s ease-out forwards}

.tt-ovly-stage .beachclub-wash{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .beachclub-wash{animation:lt-wash-in 1.6s 2.8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-wash-in{
  0%{opacity:0;transform:scaleY(.3)}
  100%{opacity:.85;transform:scaleY(1)}
}

.tt-ovly-stage .window-glint{opacity:0}
.tt-ovly-stage[data-play] .window-glint{animation:tt-ovly-fadeIn 1.2s var(--d,3.0s) ease-out forwards}

.tt-ovly-stage .sea-reflection{opacity:0}
.tt-ovly-stage[data-play] .sea-reflection{animation:tt-ovly-fadeIn 1.4s 3.4s ease-out forwards}

/* ============================================================================
   26. CARD 22 — DYNAMIC SCENES & EFFECTS (Lighting, experience — scene strip)
   ========================================================================== */

.tt-ovly-stage .room-shell{opacity:0}
.tt-ovly-stage[data-play] .room-shell{animation:tt-ovly-fadeIn 1s 0.5s ease-out forwards}

.tt-ovly-stage .room-furniture{opacity:0}
.tt-ovly-stage[data-play] .room-furniture{animation:tt-ovly-fadeIn 1.2s 1.0s ease-out forwards}

.tt-ovly-stage .pendant-fixture{opacity:0}
.tt-ovly-stage[data-play] .pendant-fixture{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .welcome-wash{opacity:0}
.tt-ovly-stage[data-play] .welcome-wash{animation:lt-welcome-play 2.4s 1.8s ease-out forwards}
@keyframes lt-welcome-play{
  0%{opacity:0}
  25%{opacity:.7}
  100%{opacity:0}
}

.tt-ovly-stage .dining-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .dining-glow{animation:lt-dining-settle 1.8s 3.0s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-dining-settle{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .pendant-bulb{opacity:0}
.tt-ovly-stage[data-play] .pendant-bulb{animation:tt-ovly-fadeIn 1.4s 3.2s ease-out forwards}

.tt-ovly-stage .scene-panel{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .scene-panel{animation:lt-panel-in 1s var(--d,2.2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-panel-in{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}

.tt-ovly-stage .scene-active-indicator{opacity:0}
.tt-ovly-stage[data-play] .scene-active-indicator{animation:lt-indicator-slide 1s 3.4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-indicator-slide{
  0%{opacity:0;transform:translateX(-220px)}
  50%{opacity:.8;transform:translateX(-110px)}
  100%{opacity:1;transform:translateX(0)}
}

.tt-ovly-stage .scene-label{opacity:0}
.tt-ovly-stage[data-play] .scene-label{animation:tt-ovly-fadeIn 1s var(--d,2.4s) ease-out forwards}

.tt-ovly-stage .waveform-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .waveform-dot{animation:lt-wave-pulse 1.4s var(--d,3.8s) ease-out forwards}
@keyframes lt-wave-pulse{
  0%{opacity:0;transform:scaleY(.5)}
  50%{opacity:.7;transform:scaleY(1.4)}
  100%{opacity:.5;transform:scaleY(1)}
}

/* ============================================================================
   27. CARD 23 — DIMMING & COLOR TEMPERATURE (Lighting, hybrid)
   ========================================================================== */

.tt-ovly-stage .gradient-bar{opacity:0}
.tt-ovly-stage[data-play] .gradient-bar{animation:tt-ovly-fadeIn 1.2s 0.6s ease-out forwards}

.tt-ovly-stage .temp-label{opacity:0}
.tt-ovly-stage[data-play] .temp-label{animation:tt-ovly-fadeIn 1s var(--d,1.4s) ease-out forwards}

.tt-ovly-stage .color-slider{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .color-slider{animation:lt-slider-journey 3.8s 1.8s cubic-bezier(.3,.4,.5,1) forwards}
@keyframes lt-slider-journey{
  0%  {opacity:0;transform:translateX(440px)}
  8%  {opacity:1}
  25% {transform:translateX(440px)}
  50% {transform:translateX(140px)}
  100%{opacity:1;transform:translateX(-220px)}
}

.tt-ovly-stage .cool-tint{opacity:0}
.tt-ovly-stage[data-play] .cool-tint{animation:lt-cool-play 2s 2.0s ease-out forwards}
@keyframes lt-cool-play{
  0%{opacity:0}
  20%{opacity:.5}
  100%{opacity:0}
}

.tt-ovly-stage .warm-tint{opacity:0}
.tt-ovly-stage[data-play] .warm-tint{animation:tt-ovly-fadeIn 2s 3.4s ease-out forwards}

.tt-ovly-stage .room-lamp-bulb{opacity:0}
.tt-ovly-stage[data-play] .room-lamp-bulb{animation:tt-ovly-fadeIn 1.2s 3.4s ease-out forwards}

/* ============================================================================
   28. CARD 24 — LIGHTING CONTROL (Lighting, hybrid — keypad + room response)
   ========================================================================== */

.tt-ovly-stage .keypad-frame{stroke-dasharray:1600;stroke-dashoffset:1600;opacity:0}
.tt-ovly-stage[data-play] .keypad-frame{animation:lt-draw-keypad 1.6s 0.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes lt-draw-keypad{
  0%{stroke-dashoffset:1600;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .keypad-face{opacity:0}
.tt-ovly-stage[data-play] .keypad-face{animation:tt-ovly-fadeIn 1s 1.6s ease-out forwards}

.tt-ovly-stage .scene-button{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .scene-button{animation:lt-button-in 1s var(--d,2.2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-button-in{
  0%{opacity:0;transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .scene-button-label{opacity:0}
.tt-ovly-stage[data-play] .scene-button-label{animation:tt-ovly-fadeIn 1s var(--d,2.5s) ease-out forwards}

.tt-ovly-stage .finger-shadow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .finger-shadow{animation:lt-finger-tap 1.8s 2.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-finger-tap{
  0%{opacity:0;transform:translate(80px,80px) scale(1.1)}
  40%{opacity:.85;transform:translate(20px,20px) scale(1.02)}
  60%{opacity:.85;transform:translate(0,0) scale(.95)}
  100%{opacity:.7;transform:translate(0,0) scale(1)}
}

.tt-ovly-stage .active-scene{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .active-scene{animation:lt-active-on 1.2s 3.4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes lt-active-on{
  0%{opacity:0;transform:scale(.95)}
  55%{opacity:1;transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .room-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .room-glow{animation:lt-room-bloom 1.8s 3.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-room-bloom{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .room-hint{opacity:0}
.tt-ovly-stage[data-play] .room-hint{animation:tt-ovly-fadeIn 1.4s 3.8s ease-out forwards}

/* ============================================================================
   29. CARD 25 — TOUCHPANELS, REMOTES & KEYPADS (Automation, hybrid)
   ========================================================================== */

.tt-ovly-stage .tablet-frame{stroke-dasharray:2400;stroke-dashoffset:2400;opacity:0}
.tt-ovly-stage[data-play] .tablet-frame{animation:am-draw-tablet 1.6s 0.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-tablet{
  0%{stroke-dashoffset:2400;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .tablet-face{opacity:0}
.tt-ovly-stage[data-play] .tablet-face{animation:tt-ovly-fadeIn 1.2s 1.6s ease-out forwards}

.tt-ovly-stage .home-icon{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .home-icon{animation:am-icon-in 1s var(--d,2.2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-icon-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .home-icon-label{opacity:0}
.tt-ovly-stage[data-play] .home-icon-label{animation:tt-ovly-fadeIn 1s var(--d,2.5s) ease-out forwards}

.tt-ovly-stage .side-surface{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .side-surface{animation:am-surface-in 1.2s var(--d,3.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-surface-in{
  0%{opacity:0;transform:translateY(8px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.tt-ovly-stage .surface-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .surface-led{animation:tt-ovly-lightOn 1s var(--d,3.6s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .surface-label{opacity:0}
.tt-ovly-stage[data-play] .surface-label{animation:tt-ovly-fadeIn 1s var(--d,3.8s) ease-out forwards}

/* ============================================================================
   30. CARD 26 — AV & SOURCE CONTROL (Automation, experience — one-press)
   ========================================================================== */

.tt-ovly-stage .third-frame{opacity:0}
.tt-ovly-stage[data-play] .third-frame{animation:tt-ovly-fadeIn 1.2s 0.5s ease-out forwards}

.tt-ovly-stage .third-label{opacity:0}
.tt-ovly-stage[data-play] .third-label{animation:tt-ovly-fadeIn 1s var(--d,1.0s) ease-out forwards}

.tt-ovly-stage .av-movie-button{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .av-movie-button{animation:am-btn-appear 1.2s 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes am-btn-appear{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .av-movie-button-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .av-movie-button-glow{animation:tt-ovly-fadeIn 1.4s 2.0s ease-out forwards}

.tt-ovly-stage .press-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .press-pulse{animation:am-press-pulse 1.4s 2.4s ease-out forwards}
@keyframes am-press-pulse{
  0%{opacity:0;transform:scale(.4)}
  40%{opacity:.7;transform:scale(1.3)}
  100%{opacity:0;transform:scale(2.2)}
}

.tt-ovly-stage .room-lamp,.tt-ovly-stage .room-lamp-cone{opacity:0}
.tt-ovly-stage[data-play] .room-lamp{animation:tt-ovly-fadeIn 1s 3.0s ease-out forwards}
.tt-ovly-stage[data-play] .room-lamp-cone{animation:am-cone-dim 1.4s 3.0s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes am-cone-dim{
  0%{opacity:0;transform:scaleY(.2);transform-box:fill-box;transform-origin:top}
  100%{opacity:.4;transform:scaleY(1);transform-box:fill-box;transform-origin:top}
}

.tt-ovly-stage .room-screen-frame{opacity:0}
.tt-ovly-stage[data-play] .room-screen-frame{animation:tt-ovly-fadeIn 1s 3.0s ease-out forwards}

.tt-ovly-stage .room-screen-content{opacity:0}
.tt-ovly-stage[data-play] .room-screen-content{animation:am-screen-wake 1.4s 3.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes am-screen-wake{
  0%{opacity:0;filter:brightness(0.2)}
  100%{opacity:1;filter:brightness(1)}
}

.tt-ovly-stage .room-window-frame{opacity:0}
.tt-ovly-stage[data-play] .room-window-frame{animation:tt-ovly-fadeIn 1s 3.0s ease-out forwards}

.tt-ovly-stage .room-shade{opacity:0;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .room-shade{animation:am-shade-drop 1.4s 3.2s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-shade-drop{
  0%{opacity:0;transform:scaleY(.05)}
  20%{opacity:1}
  100%{opacity:1;transform:scaleY(1)}
}

.tt-ovly-stage .now-playing-ticker{opacity:0}
.tt-ovly-stage[data-play] .now-playing-ticker{animation:tt-ovly-fadeIn 1.2s 4.0s ease-out forwards}

/* ============================================================================
   31. CARD 27 — LIGHTING SCENES & SHADES (Automation, experience — morning)
   ========================================================================== */

.tt-ovly-stage .window-frame{opacity:0}
.tt-ovly-stage[data-play] .window-frame{animation:tt-ovly-fadeIn 1.2s 1.0s ease-out forwards}

.tt-ovly-stage .dawn-light{opacity:0}
.tt-ovly-stage[data-play] .dawn-light{animation:am-dawn-rise 2.4s 1.2s ease-out forwards}
@keyframes am-dawn-rise{
  0%{opacity:0}
  35%{opacity:.35}
  100%{opacity:1}
}

.tt-ovly-stage .shade{opacity:1;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .shade{animation:am-shade-rise 2s 1.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-shade-rise{
  0%{transform:scaleY(1)}
  100%{transform:scaleY(.04)}
}

.tt-ovly-stage .room-fixture{opacity:0}
.tt-ovly-stage[data-play] .room-fixture{animation:tt-ovly-fadeIn 1s 0.8s ease-out forwards}

.tt-ovly-stage .morning-cone{opacity:0;transform-box:fill-box;transform-origin:top}
.tt-ovly-stage[data-play] .morning-cone{animation:am-cone-on-soft 1.4s var(--d,2.6s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes am-cone-on-soft{
  0%{opacity:0;transform:scaleY(.2)}
  100%{opacity:.55;transform:scaleY(1)}
}

.tt-ovly-stage .morning-pool{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .morning-pool{animation:am-pool-soft 1s var(--d,3.0s) ease-out forwards}
@keyframes am-pool-soft{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:.65;transform:scale(1)}
}

.tt-ovly-stage .morning-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .morning-badge{animation:am-badge-in 1s 3.6s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-badge-in{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .clock-needle{opacity:0;transform-box:fill-box;transform-origin:bottom}
.tt-ovly-stage[data-play] .clock-needle{animation:am-needle-rotate 1.4s 3.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-needle-rotate{
  0%{opacity:0;transform:rotate(-180deg)}
  100%{opacity:1;transform:rotate(0deg)}
}

/* ============================================================================
   32. CARD 28 — CLIMATE & COMFORT (Automation, experience)
   ========================================================================== */

.tt-ovly-stage .thermo-dial-outer{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.tt-ovly-stage[data-play] .thermo-dial-outer{animation:am-draw-dial 1.6s 0.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-dial{
  0%{stroke-dashoffset:1200;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .thermo-tick{opacity:0}
.tt-ovly-stage[data-play] .thermo-tick{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .thermo-readout{opacity:0}
.tt-ovly-stage[data-play] .thermo-readout{animation:tt-ovly-fadeIn 1.2s 1.8s ease-out forwards}

.tt-ovly-stage .thermo-needle{opacity:0;transform-box:fill-box;transform-origin:right center}
.tt-ovly-stage[data-play] .thermo-needle{animation:am-needle-rotate-thermo 1.6s 2.4s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes am-needle-rotate-thermo{
  0%{opacity:0;transform:rotate(-90deg)}
  20%{opacity:1}
  100%{opacity:1;transform:rotate(0deg)}
}

.tt-ovly-stage .thermo-arc{stroke-dasharray:400;stroke-dashoffset:400;opacity:0}
.tt-ovly-stage[data-play] .thermo-arc{animation:am-draw-thermo-arc 1.4s 1.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-thermo-arc{
  0%{stroke-dashoffset:400;opacity:0}
  15%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

.tt-ovly-stage .room-shell-climate{opacity:0}
.tt-ovly-stage[data-play] .room-shell-climate{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .hvac-vent{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .hvac-vent{animation:am-vent-in 1s var(--d,2.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-vent-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .airflow-arrow{stroke-dasharray:200;stroke-dashoffset:200;opacity:0}
.tt-ovly-stage[data-play] .airflow-arrow{animation:am-draw-airflow 1.4s var(--d,2.8s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-airflow{
  0%{stroke-dashoffset:200;opacity:0}
  15%{opacity:.65}
  100%{stroke-dashoffset:0;opacity:.65}
}

.tt-ovly-stage .airflow-head{opacity:0}
.tt-ovly-stage[data-play] .airflow-head{animation:tt-ovly-fadeIn 1s var(--d,3.4s) ease-out forwards}

.tt-ovly-stage .room-furniture-clim{opacity:0}
.tt-ovly-stage[data-play] .room-furniture-clim{animation:tt-ovly-fadeIn 1.2s 1.8s ease-out forwards}

.tt-ovly-stage .comfort-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .comfort-badge{animation:am-badge-in 1s 3.8s cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   33. CARD 29 — SECURITY & VESSEL SYSTEMS (Automation, hybrid — dashboard)
   ========================================================================== */

.tt-ovly-stage .sec-tablet-frame{stroke-dasharray:3000;stroke-dashoffset:3000;opacity:0}
.tt-ovly-stage[data-play] .sec-tablet-frame{animation:am-draw-sec-tablet 1.6s 0.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-sec-tablet{
  0%{stroke-dashoffset:3000;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .sec-tablet-face{opacity:0}
.tt-ovly-stage[data-play] .sec-tablet-face{animation:tt-ovly-fadeIn 1s 1.4s ease-out forwards}

.tt-ovly-stage .sec-header{opacity:0}
.tt-ovly-stage[data-play] .sec-header{animation:tt-ovly-fadeIn 1.2s 2.0s ease-out forwards}

.tt-ovly-stage .cctv-panel{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .cctv-panel{animation:am-panel-in 1s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-panel-in{
  0%{opacity:0;transform:scale(.96)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .cctv-label{opacity:0}
.tt-ovly-stage[data-play] .cctv-label{animation:tt-ovly-fadeIn 1s var(--d,2.8s) ease-out forwards}

.tt-ovly-stage .live-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .live-dot{animation:tt-ovly-lightOn 1s var(--d,2.8s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .status-strip-bg{opacity:0}
.tt-ovly-stage[data-play] .status-strip-bg{animation:tt-ovly-fadeIn 1s 3.2s ease-out forwards}

.tt-ovly-stage .status-icon{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .status-icon{animation:am-panel-in 1s var(--d,3.4s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .status-label{opacity:0}
.tt-ovly-stage[data-play] .status-label{animation:tt-ovly-fadeIn 1s var(--d,3.6s) ease-out forwards}

.tt-ovly-stage .status-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .status-led{animation:tt-ovly-lightOn 1s var(--d,3.8s) cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   34. CARD 30 — PROGRAMMING & COMMISSIONING (Automation, docs)
   ========================================================================== */

.tt-ovly-stage .processor-frame{stroke-dasharray:2800;stroke-dashoffset:2800;opacity:0}
.tt-ovly-stage[data-play] .processor-frame{animation:am-draw-proc 1.8s 1.0s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-proc{
  0%{stroke-dashoffset:2800;opacity:0}
  15%{opacity:.92}
  100%{stroke-dashoffset:0;opacity:.92}
}

.tt-ovly-stage .processor-face{opacity:0}
.tt-ovly-stage[data-play] .processor-face{animation:tt-ovly-fadeIn 1s 1.8s ease-out forwards}

.tt-ovly-stage .processor-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .processor-led{animation:tt-ovly-lightOn 1s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .stage-checkbox{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .stage-checkbox{animation:am-check-in 1s var(--d,3.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes am-check-in{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .stage-check-mark{stroke-dasharray:30;stroke-dashoffset:30;opacity:0}
.tt-ovly-stage[data-play] .stage-check-mark{animation:am-draw-check 0.6s var(--d,3.4s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-check{
  0%{stroke-dashoffset:30;opacity:0}
  20%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

.tt-ovly-stage .stage-label{opacity:0}
.tt-ovly-stage[data-play] .stage-label{animation:tt-ovly-fadeIn 1s var(--d,3.2s) ease-out forwards}

.tt-ovly-stage .stage-connector{stroke-dasharray:120;stroke-dashoffset:120;opacity:0}
.tt-ovly-stage[data-play] .stage-connector{animation:am-draw-conn 0.8s var(--d,3.5s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes am-draw-conn{
  0%{stroke-dashoffset:120;opacity:0}
  20%{opacity:.5}
  100%{stroke-dashoffset:0;opacity:.5}
}

.tt-ovly-stage .on-call-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .on-call-badge{animation:am-badge-in 1s 3.8s cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   35. CARD 31 — CCTV & IP CAMERAS (Surveillance, docs)
   ========================================================================== */

.tt-ovly-stage .camera-marker{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .camera-marker{animation:sv-camera-in 1s var(--d,1.8s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-camera-in{
  0%{opacity:0;transform:scale(.4)}
  55%{opacity:1;transform:scale(1.2)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .fov-cone{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .fov-cone{animation:sv-fov-fan 1.2s var(--d,2.6s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sv-fov-fan{
  0%{opacity:0;transform:scale(.5)}
  100%{opacity:.35;transform:scale(1)}
}

/* ============================================================================
   36. CARD 32 — THERMAL & LOW-LIGHT (Surveillance, hybrid)
   ========================================================================== */

.tt-ovly-stage .heat-signature{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .heat-signature{animation:sv-heat-bloom 1.6s var(--d,1.6s) ease-out forwards}
@keyframes sv-heat-bloom{
  0%{opacity:0;transform:scale(.4)}
  55%{opacity:.85;transform:scale(1.15)}
  100%{opacity:.7;transform:scale(1)}
}

.tt-ovly-stage .heat-source{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .heat-source{animation:tt-ovly-lightOn 1s var(--d,1.8s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .thermal-perimeter{stroke-dasharray:2200;stroke-dashoffset:2200;opacity:0}
.tt-ovly-stage[data-play] .thermal-perimeter{animation:sv-draw-perim 1.8s 2.0s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-perim{
  0%{stroke-dashoffset:2200;opacity:0}
  15%{opacity:.45}
  100%{stroke-dashoffset:0;opacity:.45}
}

.tt-ovly-stage .thermal-sweep{opacity:0;transform-box:fill-box;transform-origin:790px 290px}
.tt-ovly-stage[data-play] .thermal-sweep{animation:sv-thermal-rotate 2s 2.6s cubic-bezier(.3,.5,.5,.9) forwards}
@keyframes sv-thermal-rotate{
  0%{opacity:0;transform:rotate(-100deg)}
  15%{opacity:.5}
  100%{opacity:.5;transform:rotate(80deg)}
}

.tt-ovly-stage .heat-label{opacity:0}
.tt-ovly-stage[data-play] .heat-label{animation:tt-ovly-fadeIn 1s var(--d,3.6s) ease-out forwards}

/* ============================================================================
   37. CARD 33 — ACCESS CONTROL (Surveillance, docs)
   ========================================================================== */

.tt-ovly-stage .yacht-hull-outline-ac{stroke-dasharray:3000;stroke-dashoffset:3000;opacity:0}
.tt-ovly-stage[data-play] .yacht-hull-outline-ac{animation:sv-draw-hull-ac 1.6s 0.5s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-hull-ac{
  0%{stroke-dashoffset:3000;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .door-icon{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .door-icon{animation:sv-door-in 1s var(--d,1.8s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-door-in{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .lock-status{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .lock-status{animation:tt-ovly-lightOn 1s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .door-label{opacity:0}
.tt-ovly-stage[data-play] .door-label{animation:tt-ovly-fadeIn 1s var(--d,2.8s) ease-out forwards}

.tt-ovly-stage .matrix-header{opacity:0}
.tt-ovly-stage[data-play] .matrix-header{animation:tt-ovly-fadeIn 1s 2.8s ease-out forwards}

.tt-ovly-stage .role-badge{opacity:0;transform-box:fill-box;transform-origin:left center}
.tt-ovly-stage[data-play] .role-badge{animation:sv-role-in 1s var(--d,3.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-role-in{
  0%{opacity:0;transform:translateX(-8px) scale(.95)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}

.tt-ovly-stage .permission-check{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .permission-check{animation:sv-check-in 0.8s var(--d,3.2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-check-in{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:1;transform:scale(1)}
}

/* ============================================================================
   38. CARD 34 — INTRUSION DETECTION & ALERTS (Surveillance, docs)
   ========================================================================== */

.tt-ovly-stage .yacht-silhouette-int{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette-int{animation:tt-ovly-settle 1.4s 0.8s cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .sensor-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .sensor-dot{animation:tt-ovly-lightOn 1s var(--d,1.8s) cubic-bezier(.3,.7,.4,1) forwards}

.tt-ovly-stage .sensor-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .sensor-pulse{animation:sv-sensor-pulse 1.6s 2.6s ease-out forwards}
@keyframes sv-sensor-pulse{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:.85;transform:scale(1.4)}
  60%{opacity:.4;transform:scale(2)}
  100%{opacity:.3;transform:scale(2.6)}
}

.tt-ovly-stage .alert-path{stroke-dasharray:800;stroke-dashoffset:800;opacity:0}
.tt-ovly-stage[data-play] .alert-path{animation:sv-draw-alert 1.6s 3.0s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-alert{
  0%{stroke-dashoffset:800;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .alert-packet{opacity:0;offset-rotate:0deg}
.tt-ovly-stage[data-play] .alert-packet{animation:it-packet-flight 1.6s 3.4s linear forwards}

.tt-ovly-stage .crew-tablet-frame{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.tt-ovly-stage[data-play] .crew-tablet-frame{animation:sv-draw-crew-tablet 1.4s 3.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-crew-tablet{
  0%{stroke-dashoffset:1200;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .crew-tablet-face{opacity:0}
.tt-ovly-stage[data-play] .crew-tablet-face{animation:tt-ovly-fadeIn 1s 3.6s ease-out forwards}

.tt-ovly-stage .alert-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .alert-badge{animation:sv-badge-in 1s 4.0s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-badge-in{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .quiet-indicator{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .quiet-indicator{animation:sv-badge-in 1s 4.2s cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   39. CARD 35 — RECORDING, STORAGE & REVIEW (Surveillance, docs)
   ========================================================================== */

.tt-ovly-stage .timeline-track{stroke-dasharray:1300;stroke-dashoffset:1300;opacity:0}
.tt-ovly-stage[data-play] .timeline-track{animation:sv-draw-timeline 1.4s 0.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-timeline{
  0%{stroke-dashoffset:1300;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .time-marker{opacity:0}
.tt-ovly-stage[data-play] .time-marker{animation:tt-ovly-fadeIn 1s var(--d,1.6s) ease-out forwards}

.tt-ovly-stage .timeline-playhead{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .timeline-playhead{animation:sv-playhead-slide 2s 2.0s cubic-bezier(.3,.5,.5,1) forwards}
@keyframes sv-playhead-slide{
  0%{opacity:0;transform:translateX(-340px)}
  15%{opacity:1}
  100%{opacity:1;transform:translateX(0)}
}

.tt-ovly-stage .cam-thumb{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .cam-thumb{animation:sv-thumb-in 1s var(--d,2.6s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-thumb-in{
  0%{opacity:0;transform:scale(.96)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .cam-thumb-label{opacity:0}
.tt-ovly-stage[data-play] .cam-thumb-label{animation:tt-ovly-fadeIn 1s var(--d,2.9s) ease-out forwards}

.tt-ovly-stage .storage-drive{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .storage-drive{animation:sv-drive-in 1s var(--d,3.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-drive-in{
  0%{opacity:0;transform:translateX(-12px)}
  100%{opacity:1;transform:translateX(0)}
}

.tt-ovly-stage .storage-label{opacity:0}
.tt-ovly-stage[data-play] .storage-label{animation:tt-ovly-fadeIn 1s var(--d,3.6s) ease-out forwards}

.tt-ovly-stage .storage-led{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .storage-led{animation:tt-ovly-lightOn 1s var(--d,3.8s) cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   40. CARD 36 — MONITORING & SUPPORT (Surveillance, experience — watching-eye)
   ========================================================================== */

.tt-ovly-stage .yacht-silhouette-mon{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette-mon{animation:tt-ovly-settle 1.4s 0.8s cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .watching-badge-frame{stroke-dasharray:1100;stroke-dashoffset:1100;opacity:0}
.tt-ovly-stage[data-play] .watching-badge-frame{animation:sv-draw-watching 1.6s 1.6s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-watching{
  0%{stroke-dashoffset:1100;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .watching-badge-face{opacity:0}
.tt-ovly-stage[data-play] .watching-badge-face{animation:tt-ovly-fadeIn 1s 2.0s ease-out forwards}

.tt-ovly-stage .eye-motif-outer{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .eye-motif-outer{animation:sv-eye-in 1.2s 2.4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-eye-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .eye-motif-pupil{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .eye-motif-pupil{animation:sv-eye-pupil 1.2s 2.8s ease-out forwards}
@keyframes sv-eye-pupil{
  0%{opacity:0;transform:scale(.4)}
  55%{opacity:1;transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .watching-arc{stroke-dasharray:900;stroke-dashoffset:900;opacity:0}
.tt-ovly-stage[data-play] .watching-arc{animation:sv-draw-watching-arc 1.6s 2.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes sv-draw-watching-arc{
  0%{stroke-dashoffset:900;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .arc-packet{opacity:0;offset-rotate:0deg}
.tt-ovly-stage[data-play] .arc-packet{animation:it-packet-flight 2s 3.4s linear forwards}

.tt-ovly-stage .watching-label{opacity:0}
.tt-ovly-stage[data-play] .watching-label{animation:tt-ovly-fadeIn 1s var(--d,3.0s) ease-out forwards}

.tt-ovly-stage .status-item{opacity:0}
.tt-ovly-stage[data-play] .status-item{animation:sv-status-in 1s var(--d,3.6s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sv-status-in{
  0%{opacity:0;transform:translateX(-6px)}
  100%{opacity:1;transform:translateX(0)}
}

/* ============================================================================
   41. CARD 37 — NEW BUILD TECHNOLOGY PACKAGES (NB&R, docs)
   ========================================================================== */

.tt-ovly-stage .scaffolding{stroke-dasharray:1800;stroke-dashoffset:1800;opacity:0}
.tt-ovly-stage[data-play] .scaffolding{animation:nb-draw-scaff 1.6s 0.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-scaff{
  0%{stroke-dashoffset:1800;opacity:0}
  15%{opacity:.55}
  100%{stroke-dashoffset:0;opacity:.55}
}

.tt-ovly-stage .drydock-keel{opacity:0}
.tt-ovly-stage[data-play] .drydock-keel{animation:tt-ovly-fadeIn 1s 1.0s ease-out forwards}

.tt-ovly-stage .yacht-silhouette-nb{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette-nb{animation:tt-ovly-settle 1.4s 1.4s cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .stack-icon{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .stack-icon{animation:nb-stack-drop 1.2s var(--d,2.2s) cubic-bezier(.4,.2,.4,1) forwards}
@keyframes nb-stack-drop{
  0%{opacity:0;transform:translateY(-30px)}
  60%{opacity:1;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

.tt-ovly-stage .stack-arrow{opacity:0}
.tt-ovly-stage[data-play] .stack-arrow{animation:tt-ovly-fadeIn 1s var(--d,2.6s) ease-out forwards}

.tt-ovly-stage .stack-label{opacity:0}
.tt-ovly-stage[data-play] .stack-label{animation:tt-ovly-fadeIn 1s var(--d,2.9s) ease-out forwards}

.tt-ovly-stage .phase-bar{stroke-dasharray:1100;stroke-dashoffset:1100;opacity:0}
.tt-ovly-stage[data-play] .phase-bar{animation:nb-draw-phase-bar 1.4s 3.2s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-phase-bar{
  0%{stroke-dashoffset:1100;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .phase-label{opacity:0}
.tt-ovly-stage[data-play] .phase-label{animation:tt-ovly-fadeIn 1s var(--d,3.6s) ease-out forwards}

.tt-ovly-stage .phase-indicator{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .phase-indicator{animation:nb-indicator-in 1.2s 3.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-indicator-in{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}

/* ============================================================================
   42. CARD 38 — MAJOR REFIT INTEGRATION (NB&R, docs)
   ========================================================================== */

.tt-ovly-stage .yacht-silhouette-refit{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette-refit{animation:tt-ovly-settle 1.4s 0.6s cubic-bezier(.2,.7,.2,1) forwards}

.tt-ovly-stage .scope-marker{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .scope-marker{animation:nb-scope-in 1s var(--d,1.6s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-scope-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .scope-check{stroke-dasharray:30;stroke-dashoffset:30;opacity:0}
.tt-ovly-stage[data-play] .scope-check{animation:nb-draw-check 0.6s var(--d,2.0s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-check{
  0%{stroke-dashoffset:30;opacity:0}
  20%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

.tt-ovly-stage .scope-label{opacity:0}
.tt-ovly-stage[data-play] .scope-label{animation:tt-ovly-fadeIn 1s var(--d,2.4s) ease-out forwards}

.tt-ovly-stage .yard-window-bar{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.tt-ovly-stage[data-play] .yard-window-bar{animation:nb-draw-window 1.6s 2.8s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-window{
  0%{stroke-dashoffset:1200;opacity:0}
  15%{opacity:.85}
  100%{stroke-dashoffset:0;opacity:.85}
}

.tt-ovly-stage .phase-tick{opacity:0}
.tt-ovly-stage[data-play] .phase-tick{animation:tt-ovly-fadeIn 1s var(--d,3.2s) ease-out forwards}

.tt-ovly-stage .yard-window-indicator{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .yard-window-indicator{animation:nb-indicator-in 1.2s 3.8s cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   43. CARD 39 — TARGETED ONBOARD UPGRADES (NB&R, docs)
   ========================================================================== */

.tt-ovly-stage .yacht-silhouette-up{opacity:0}
.tt-ovly-stage[data-play] .yacht-silhouette-up{animation:nb-settle-dim 1.4s 0.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes nb-settle-dim{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:.55;transform:translateY(0)}
}

.tt-ovly-stage .upgrade-spotlight{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .upgrade-spotlight{animation:nb-spotlight-bloom 1.6s 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes nb-spotlight-bloom{
  0%{opacity:0;transform:scale(.5)}
  55%{opacity:.9;transform:scale(1.1)}
  100%{opacity:.7;transform:scale(1)}
}

.tt-ovly-stage .yacht-highlight{opacity:0}
.tt-ovly-stage[data-play] .yacht-highlight{animation:tt-ovly-fadeIn 1.2s 2.0s ease-out forwards}

.tt-ovly-stage .upgrade-ticket{stroke-dasharray:1400;stroke-dashoffset:1400;opacity:0}
.tt-ovly-stage[data-play] .upgrade-ticket{animation:nb-draw-ticket 1.6s 2.4s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-ticket{
  0%{stroke-dashoffset:1400;opacity:0}
  15%{opacity:.95}
  100%{stroke-dashoffset:0;opacity:.95}
}

.tt-ovly-stage .upgrade-ticket-face{opacity:0}
.tt-ovly-stage[data-play] .upgrade-ticket-face{animation:tt-ovly-fadeIn 1s 2.8s ease-out forwards}

.tt-ovly-stage .ticket-line{opacity:0}
.tt-ovly-stage[data-play] .ticket-line{animation:nb-line-in 1s var(--d,3.2s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-line-in{
  0%{opacity:0;transform:translateY(4px)}
  100%{opacity:1;transform:translateY(0)}
}

.tt-ovly-stage .underway-indicator{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .underway-indicator{animation:nb-underway-in 1s 3.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-underway-in{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}

/* ============================================================================
   44. CARD 40 — ENGINEERING & DOCUMENTATION (NB&R, docs)
   ========================================================================== */

.tt-ovly-stage .doc-tile{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .doc-tile{animation:nb-tile-in 1.2s var(--d,1.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-tile-in{
  0%{opacity:0;transform:translateY(20px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.tt-ovly-stage .doc-tile-content{opacity:0}
.tt-ovly-stage[data-play] .doc-tile-content{animation:tt-ovly-fadeIn 1s var(--d,1.6s) ease-out forwards}

.tt-ovly-stage .doc-tile-label{opacity:0}
.tt-ovly-stage[data-play] .doc-tile-label{animation:tt-ovly-fadeIn 1s var(--d,2.0s) ease-out forwards}

/* ============================================================================
   45. CARD 41 — SHIPYARD & TRADE COORDINATION (NB&R, hybrid — hub & spokes)
   ========================================================================== */

.tt-ovly-stage .hub-node{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .hub-node{animation:nb-hub-in 1.2s 0.8s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-hub-in{
  0%{opacity:0;transform:scale(.6)}
  55%{opacity:1;transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .spoke-line{stroke-dasharray:340;stroke-dashoffset:340;opacity:0}
.tt-ovly-stage[data-play] .spoke-line{animation:nb-draw-spoke 1.2s var(--d,1.6s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-spoke{
  0%{stroke-dashoffset:340;opacity:0}
  15%{opacity:.7}
  100%{stroke-dashoffset:0;opacity:.7}
}

.tt-ovly-stage .role-badge-spoke{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .role-badge-spoke{animation:nb-role-in 1s var(--d,2.4s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-role-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .spoke-packet{opacity:0;offset-rotate:0deg}
.tt-ovly-stage[data-play] .spoke-packet{animation:nb-packet-pulse 2s var(--d,3.2s) ease-in-out forwards}
@keyframes nb-packet-pulse{
  0%{opacity:0;offset-distance:50%}
  20%{opacity:1;offset-distance:0%}
  50%{opacity:1;offset-distance:100%}
  100%{opacity:.5;offset-distance:50%}
}

/* ============================================================================
   46. CARD 42 — COMMISSIONING & 24/7 SUPPORT (NB&R, docs — phase stack)
   ========================================================================== */

.tt-ovly-stage .phase-row{opacity:0;transform-box:fill-box;transform-origin:left center}
.tt-ovly-stage[data-play] .phase-row{animation:nb-phase-row-in 1s var(--d,1.0s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-phase-row-in{
  0%{opacity:0;transform:translateX(-16px)}
  100%{opacity:1;transform:translateX(0)}
}

.tt-ovly-stage .phase-row-label{opacity:0}
.tt-ovly-stage[data-play] .phase-row-label{animation:tt-ovly-fadeIn 1s var(--d,1.3s) ease-out forwards}

.tt-ovly-stage .phase-check-bg{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .phase-check-bg{animation:nb-check-bg-in 1s var(--d,1.6s) cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-check-bg-in{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .phase-check-mark{stroke-dasharray:30;stroke-dashoffset:30;opacity:0}
.tt-ovly-stage[data-play] .phase-check-mark{animation:nb-draw-phase-check 0.6s var(--d,2.0s) cubic-bezier(.4,.2,.2,1) forwards}
@keyframes nb-draw-phase-check{
  0%{stroke-dashoffset:30;opacity:0}
  20%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

.tt-ovly-stage .phase-status-label{opacity:0}
.tt-ovly-stage[data-play] .phase-status-label{animation:tt-ovly-fadeIn 1s var(--d,2.4s) ease-out forwards}

.tt-ovly-stage .nbr-on-call-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .nbr-on-call-badge{animation:nb-on-call-in 1.2s 3.4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes nb-on-call-in{
  0%{opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.tt-ovly-stage .on-call-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .on-call-pulse{animation:nb-on-call-pulse 2.4s 3.8s ease-out infinite}
@keyframes nb-on-call-pulse{
  0%{opacity:.85;transform:scale(.6)}
  60%{opacity:0;transform:scale(2.2)}
  100%{opacity:0;transform:scale(2.6)}
}

.tt-ovly-stage .on-call-dot{opacity:0;transform-box:fill-box;transform-origin:center}
.tt-ovly-stage[data-play] .on-call-dot{animation:tt-ovly-lightOn 1s 3.8s cubic-bezier(.3,.7,.4,1) forwards}

/* ============================================================================
   10. REDUCED-MOTION FALLBACK
   Collapse all animations to final-state snapshot.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .tt-ovly-backdrop,.tt-ovly-card{transition:none}
  .tt-ovly-stage[data-play] *{animation-duration:.01ms !important;animation-delay:0ms !important}

  /* Final states */
  .tt-ovly-stage .room-lights{opacity:0 !important}
  .tt-ovly-stage .screen-frame,
  .tt-ovly-stage .screen-content,
  .tt-ovly-stage .screen-halo,
  .tt-ovly-stage .proj-cone,
  .tt-ovly-stage .floor-reflect,
  .tt-ovly-stage .brass-light,
  .tt-ovly-stage .screen-horizon,
  .tt-ovly-stage .screen-figure,
  .tt-ovly-stage .yacht-silhouette,
  .tt-ovly-stage .yacht-mast,
  .tt-ovly-stage .yacht-wake,
  .tt-ovly-stage .zone,
  .tt-ovly-stage .sea-sparkle,
  .tt-ovly-stage .salon-floor,
  .tt-ovly-stage .salon-walls,
  .tt-ovly-stage .salon-ceiling,
  .tt-ovly-stage .sofa-row,
  .tt-ovly-stage .guest,
  .tt-ovly-stage .wall-frame,
  .tt-ovly-stage .wall-content,
  .tt-ovly-stage .wall-halo,
  .tt-ovly-stage .room-wash,
  .tt-ovly-stage .accent-light,
  .tt-ovly-stage .sky-grad,
  .tt-ovly-stage .sun-orb,
  .tt-ovly-stage .sun-reflect,
  .tt-ovly-stage .horizon-line,
  .tt-ovly-stage .sea-grad,
  .tt-ovly-stage .deck-floor,
  .tt-ovly-stage .deck-rail,
  .tt-ovly-stage .rail-post,
  .tt-ovly-stage .lounger,
  .tt-ovly-stage .deck-table,
  .tt-ovly-stage .speaker-light,
  .tt-ovly-stage .display-pillar,
  .tt-ovly-stage .display-frame,
  .tt-ovly-stage .display-content,
  .tt-ovly-stage .control-surface,
  .tt-ovly-stage .control-glow,
  .tt-ovly-stage .ui-bits,
  .tt-ovly-stage .room-outline,
  .tt-ovly-stage .wall-mark,
  .tt-ovly-stage .source-dot,
  .tt-ovly-stage .seat,
  .tt-ovly-stage .room-fill,
  .tt-ovly-stage .dim-mark{opacity:1 !important;transform:none !important}

  .tt-ovly-stage .seat-halo{opacity:.85 !important;transform:scale(1) !important}
  .tt-ovly-stage .tap-pulse{opacity:.45 !important;transform:scale(1) !important}
  .tt-ovly-stage .src-chip,.tt-ovly-stage .source-pulse{opacity:0 !important}
  .tt-ovly-stage .audio-arc{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .room-outline{stroke-dashoffset:0 !important;opacity:.7 !important}
  .tt-ovly-stage .seat-row{opacity:1 !important}
  .tt-ovly-stage .letterbox-top,.tt-ovly-stage .letterbox-bot{transform:translateY(0) !important}
  .tt-ovly-stage .vignette-layer{opacity:1 !important}

  .tt-ovly-caption-block,.tt-ovly-ribbon,.tt-ovly-replay{opacity:1 !important;animation:none !important}

  /* IT family final states */
  .tt-ovly-stage .blueprint-grid,
  .tt-ovly-stage .deck-line,
  .tt-ovly-stage .idf-marker,
  .tt-ovly-stage .idf-label,
  .tt-ovly-stage .zone-divider,
  .tt-ovly-stage .zone-label,
  .tt-ovly-stage .ap-marker,
  .tt-ovly-stage .vlan-lane,
  .tt-ovly-stage .vlan-label,
  .tt-ovly-stage .vlan-divider,
  .tt-ovly-stage .interior-glow,
  .tt-ovly-stage .lock-icon,
  .tt-ovly-stage .system-label,
  .tt-ovly-stage .rack-cap,
  .tt-ovly-stage .rack-label,
  .tt-ovly-stage .rack-led,
  .tt-ovly-stage .ops-floor,
  .tt-ovly-stage .ops-desk,
  .tt-ovly-stage .ops-figure,
  .tt-ovly-stage .ops-monitor,
  .tt-ovly-stage .ops-led{opacity:1 !important;transform:none !important;filter:none !important}

  .tt-ovly-stage .ap-halo{opacity:.7 !important;transform:scale(1) !important}
  .tt-ovly-stage .rack-slot{opacity:.95 !important;transform:scale(1) !important}
  .tt-ovly-stage .threat-dot,.tt-ovly-stage .perim-flash{opacity:0 !important}
  .tt-ovly-stage .vlan-packet{opacity:.5 !important;transform:translateX(820px) !important}
  .tt-ovly-stage .spine-line,
  .tt-ovly-stage .yacht-hull-outline,
  .tt-ovly-stage .perimeter-ring,
  .tt-ovly-stage .rack-frame,
  .tt-ovly-stage .support-arc{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .spine-packet,.tt-ovly-stage .support-packet{opacity:.6 !important;offset-distance:100% !important}

  /* SatCom family final states */
  .tt-ovly-stage .sat-dish,
  .tt-ovly-stage .leo-orbit-line,
  .tt-ovly-stage .rules-badge,
  .tt-ovly-stage .geo-orbit-line,
  .tt-ovly-stage .vsat-sat,
  .tt-ovly-stage .footprint-ellipse,
  .tt-ovly-stage .yacht-mini,
  .tt-ovly-stage .coverage-fill,
  .tt-ovly-stage .transit-arrow,
  .tt-ovly-stage .ring-label,
  .tt-ovly-stage .shelf-line,
  .tt-ovly-stage .terminal-led,
  .tt-ovly-stage .terminal-label,
  .tt-ovly-stage .router-fill,
  .tt-ovly-stage .router-label,
  .tt-ovly-stage .wan-label,
  .tt-ovly-stage .priority-stack,
  .tt-ovly-stage .destination,
  .tt-ovly-stage .health-dot,
  .tt-ovly-stage .health-halo,
  .tt-ovly-stage .ops-badge{opacity:1 !important;transform:none !important}

  .tt-ovly-stage .terminal{opacity:.95 !important;transform:none !important}
  .tt-ovly-stage .ready-band{opacity:1 !important;transform:scaleX(1) !important}
  .tt-ovly-stage .beam-cone{opacity:.4 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .leo-dot,.tt-ovly-stage .wan-packet{opacity:0 !important}
  .tt-ovly-stage .ops-pulse{opacity:.4 !important;transform:scale(1) !important}
  .tt-ovly-stage .sat-beam,
  .tt-ovly-stage .earth-arc,
  .tt-ovly-stage .coverage-ring,
  .tt-ovly-stage .transit-line,
  .tt-ovly-stage .router-box,
  .tt-ovly-stage .wan-path,
  .tt-ovly-stage .wan-trunk,
  .tt-ovly-stage .link-beam{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .wan-path.active{opacity:1 !important;stroke-dashoffset:0 !important}
  .tt-ovly-stage .earth-arc{opacity:.7 !important}
  .tt-ovly-stage .coverage-ring{opacity:.7 !important}

  /* Lighting family final states */
  .tt-ovly-stage .room-walls,
  .tt-ovly-stage .room-floor,
  .tt-ovly-stage .room-ceiling,
  .tt-ovly-stage .sofa-silhouette,
  .tt-ovly-stage .side-table,
  .tt-ovly-stage .art-frame,
  .tt-ovly-stage .art-canvas,
  .tt-ovly-stage .ceiling-mount,
  .tt-ovly-stage .chandelier-bulb,
  .tt-ovly-stage .table-silhouette,
  .tt-ovly-stage .dining-chair,
  .tt-ovly-stage .table-glint,
  .tt-ovly-stage .star,
  .tt-ovly-stage .rail-light,
  .tt-ovly-stage .rail-halo,
  .tt-ovly-stage .mast-light,
  .tt-ovly-stage .mast-glow,
  .tt-ovly-stage .window-glint,
  .tt-ovly-stage .sea-reflection,
  .tt-ovly-stage .room-shell,
  .tt-ovly-stage .room-furniture,
  .tt-ovly-stage .pendant-fixture,
  .tt-ovly-stage .pendant-bulb,
  .tt-ovly-stage .scene-label,
  .tt-ovly-stage .gradient-bar,
  .tt-ovly-stage .temp-label,
  .tt-ovly-stage .warm-tint,
  .tt-ovly-stage .room-lamp-bulb,
  .tt-ovly-stage .keypad-face,
  .tt-ovly-stage .scene-button-label,
  .tt-ovly-stage .room-hint{opacity:1 !important;transform:none !important;filter:none !important}

  .tt-ovly-stage .cove-light{opacity:1 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .downlight-cone,.tt-ovly-stage .accent-cone{opacity:.85 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .light-pool{opacity:.85 !important;transform:scale(1) !important}
  .tt-ovly-stage .chandelier-frame{opacity:1 !important;transform:none !important}
  .tt-ovly-stage .chandelier-glow,
  .tt-ovly-stage .dining-glow,
  .tt-ovly-stage .room-glow{opacity:1 !important;transform:scale(1) !important}
  .tt-ovly-stage .crystal-sparkle{opacity:.85 !important;transform:scale(1) !important}
  .tt-ovly-stage .beachclub-wash{opacity:.85 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .welcome-wash,.tt-ovly-stage .cool-tint{opacity:0 !important}
  .tt-ovly-stage .scene-panel{opacity:1 !important;transform:none !important}
  .tt-ovly-stage .scene-active-indicator{opacity:1 !important;transform:translateX(0) !important}
  .tt-ovly-stage .waveform-dot{opacity:.5 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .color-slider{opacity:1 !important;transform:translateX(-220px) !important}
  .tt-ovly-stage .keypad-frame{stroke-dashoffset:0 !important;opacity:.95 !important}
  .tt-ovly-stage .scene-button,.tt-ovly-stage .active-scene{opacity:1 !important;transform:scale(1) !important}
  .tt-ovly-stage .finger-shadow{opacity:.7 !important;transform:translate(0,0) scale(1) !important}

  /* Automation family final states */
  .tt-ovly-stage .tablet-face,
  .tt-ovly-stage .home-icon-label,
  .tt-ovly-stage .surface-label,
  .tt-ovly-stage .third-frame,
  .tt-ovly-stage .third-label,
  .tt-ovly-stage .av-movie-button-glow,
  .tt-ovly-stage .room-lamp,
  .tt-ovly-stage .room-screen-frame,
  .tt-ovly-stage .room-window-frame,
  .tt-ovly-stage .now-playing-ticker,
  .tt-ovly-stage .window-frame,
  .tt-ovly-stage .dawn-light,
  .tt-ovly-stage .room-fixture,
  .tt-ovly-stage .thermo-tick,
  .tt-ovly-stage .thermo-readout,
  .tt-ovly-stage .room-shell-climate,
  .tt-ovly-stage .airflow-head,
  .tt-ovly-stage .room-furniture-clim,
  .tt-ovly-stage .sec-tablet-face,
  .tt-ovly-stage .sec-header,
  .tt-ovly-stage .cctv-label,
  .tt-ovly-stage .status-strip-bg,
  .tt-ovly-stage .status-label,
  .tt-ovly-stage .processor-face,
  .tt-ovly-stage .stage-label{opacity:1 !important;transform:none !important;filter:none !important}

  .tt-ovly-stage .home-icon,
  .tt-ovly-stage .side-surface,
  .tt-ovly-stage .surface-led,
  .tt-ovly-stage .av-movie-button,
  .tt-ovly-stage .hvac-vent,
  .tt-ovly-stage .comfort-badge,
  .tt-ovly-stage .cctv-panel,
  .tt-ovly-stage .live-dot,
  .tt-ovly-stage .status-icon,
  .tt-ovly-stage .status-led,
  .tt-ovly-stage .processor-led,
  .tt-ovly-stage .stage-checkbox,
  .tt-ovly-stage .on-call-badge,
  .tt-ovly-stage .morning-badge,
  .tt-ovly-stage .clock-needle,
  .tt-ovly-stage .thermo-needle{opacity:1 !important;transform:scale(1) !important}

  .tt-ovly-stage .tablet-frame,
  .tt-ovly-stage .sec-tablet-frame,
  .tt-ovly-stage .thermo-dial-outer,
  .tt-ovly-stage .processor-frame,
  .tt-ovly-stage .crew-tablet-frame,
  .tt-ovly-stage .watching-badge-frame{stroke-dashoffset:0 !important;opacity:.92 !important}

  /* Surveillance family final states */
  .tt-ovly-stage .camera-marker,
  .tt-ovly-stage .heat-source,
  .tt-ovly-stage .heat-label,
  .tt-ovly-stage .yacht-hull-outline-ac,
  .tt-ovly-stage .door-icon,
  .tt-ovly-stage .lock-status,
  .tt-ovly-stage .door-label,
  .tt-ovly-stage .matrix-header,
  .tt-ovly-stage .role-badge,
  .tt-ovly-stage .permission-check,
  .tt-ovly-stage .yacht-silhouette-int,
  .tt-ovly-stage .sensor-dot,
  .tt-ovly-stage .crew-tablet-face,
  .tt-ovly-stage .alert-badge,
  .tt-ovly-stage .quiet-indicator,
  .tt-ovly-stage .time-marker,
  .tt-ovly-stage .timeline-playhead,
  .tt-ovly-stage .cam-thumb,
  .tt-ovly-stage .cam-thumb-label,
  .tt-ovly-stage .storage-drive,
  .tt-ovly-stage .storage-label,
  .tt-ovly-stage .storage-led,
  .tt-ovly-stage .yacht-silhouette-mon,
  .tt-ovly-stage .watching-badge-face,
  .tt-ovly-stage .eye-motif-outer,
  .tt-ovly-stage .eye-motif-pupil,
  .tt-ovly-stage .watching-label,
  .tt-ovly-stage .status-item{opacity:1 !important;transform:none !important}

  .tt-ovly-stage .fov-cone{opacity:.35 !important;transform:scale(1) !important}
  .tt-ovly-stage .heat-signature{opacity:.7 !important;transform:scale(1) !important}
  .tt-ovly-stage .thermal-perimeter{stroke-dashoffset:0 !important;opacity:.45 !important}
  .tt-ovly-stage .thermal-sweep{opacity:.5 !important;transform:rotate(80deg) !important}
  .tt-ovly-stage .sensor-pulse{opacity:0 !important}
  .tt-ovly-stage .alert-path,
  .tt-ovly-stage .timeline-track,
  .tt-ovly-stage .watching-arc{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .alert-packet,.tt-ovly-stage .arc-packet{opacity:0 !important}
  .tt-ovly-stage .yacht-hull-outline-ac{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .thermo-arc{stroke-dashoffset:0 !important;opacity:1 !important}
  .tt-ovly-stage .airflow-arrow{stroke-dashoffset:0 !important;opacity:.65 !important}
  .tt-ovly-stage .stage-check-mark{stroke-dashoffset:0 !important;opacity:1 !important}
  .tt-ovly-stage .stage-connector{stroke-dashoffset:0 !important;opacity:.5 !important}

  .tt-ovly-stage .press-pulse{opacity:0 !important}
  .tt-ovly-stage .room-lamp-cone{opacity:.4 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .room-screen-content{opacity:1 !important;filter:none !important}
  .tt-ovly-stage .room-shade{opacity:1 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .shade{transform:scaleY(.04) !important}
  .tt-ovly-stage .morning-cone{opacity:.55 !important;transform:scaleY(1) !important}
  .tt-ovly-stage .morning-pool{opacity:.65 !important;transform:scale(1) !important}

  /* New Builds & Refits family final states */
  .tt-ovly-stage .drydock-keel,
  .tt-ovly-stage .stack-arrow,
  .tt-ovly-stage .stack-label,
  .tt-ovly-stage .phase-label,
  .tt-ovly-stage .scope-label,
  .tt-ovly-stage .phase-tick,
  .tt-ovly-stage .yacht-highlight,
  .tt-ovly-stage .upgrade-ticket-face,
  .tt-ovly-stage .ticket-line,
  .tt-ovly-stage .doc-tile-content,
  .tt-ovly-stage .doc-tile-label,
  .tt-ovly-stage .phase-row-label,
  .tt-ovly-stage .phase-status-label{opacity:1 !important}

  .tt-ovly-stage .yacht-silhouette-nb,
  .tt-ovly-stage .yacht-silhouette-refit{opacity:.92 !important;transform:none !important}
  .tt-ovly-stage .yacht-silhouette-up{opacity:.55 !important;transform:none !important}

  .tt-ovly-stage .stack-icon,
  .tt-ovly-stage .scope-marker,
  .tt-ovly-stage .phase-indicator,
  .tt-ovly-stage .yard-window-indicator,
  .tt-ovly-stage .underway-indicator,
  .tt-ovly-stage .doc-tile,
  .tt-ovly-stage .hub-node,
  .tt-ovly-stage .role-badge-spoke,
  .tt-ovly-stage .phase-row,
  .tt-ovly-stage .phase-check-bg,
  .tt-ovly-stage .nbr-on-call-badge,
  .tt-ovly-stage .on-call-dot{opacity:1 !important;transform:none !important}

  .tt-ovly-stage .upgrade-spotlight{opacity:.7 !important;transform:scale(1) !important}

  .tt-ovly-stage .scaffolding{stroke-dashoffset:0 !important;opacity:.55 !important}
  .tt-ovly-stage .phase-bar,
  .tt-ovly-stage .yard-window-bar{stroke-dashoffset:0 !important;opacity:.85 !important}
  .tt-ovly-stage .upgrade-ticket{stroke-dashoffset:0 !important;opacity:.95 !important}
  .tt-ovly-stage .spoke-line{stroke-dashoffset:0 !important;opacity:.7 !important}
  .tt-ovly-stage .scope-check,
  .tt-ovly-stage .phase-check-mark{stroke-dashoffset:0 !important;opacity:1 !important}

  .tt-ovly-stage .spoke-packet,
  .tt-ovly-stage .on-call-pulse{opacity:0 !important}
}