/* MOTION v2 PILOT (2026-09-28) — see showcase-motion2.js and MOTION.md. Active only on html.m2 (?motion=2). */

/* liquid indicator: one pill behind the tabs replaces each tab's own active fill */
html.m2 #navTabs{position:relative}
html.m2 #navTabs .tab{position:relative;z-index:1}
html.m2[data-showcase-ui="glass"] #navTabs .tab.active,html.m2 #navTabs .tab.active{background:none;box-shadow:none}
html.m2 .m2-liquid{position:absolute;left:0;top:0;z-index:2;pointer-events:none;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),0),var(--accent) 30%,var(--accent) 70%,rgba(var(--accent-rgb),0));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.55);transition:opacity .25s ease}
/* the active door: icon lifted into the light, label warmed — no box */
html.m2 #hud #navTabs .tab i{transition:transform .45s cubic-bezier(.16,1,.3,1),color .25s,filter .35s}
html.m2 #hud #navTabs .tab span{transition:color .25s,transform .45s cubic-bezier(.16,1,.3,1),opacity .25s}
html.m2 #hud #navTabs .tab.active i{transform:translateY(-4px);filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55))}
html.m2 #hud #navTabs .tab.active span{color:var(--accent-soft,#eef2f6);transform:translateY(-2px)}
html.m2 #hud #navTabs .tab:not(.active):hover i{transform:translateY(-2px)}
/* arrival: the icon rises out of the dock and settles; the label follows a beat later */
html.m2 #hud #navTabs .tab.m2-arrive i{animation:m2Icon .6s cubic-bezier(.16,1,.3,1) both}
html.m2 #hud #navTabs .tab.m2-arrive span{animation:m2Label .6s cubic-bezier(.16,1,.3,1) .06s both}
@keyframes m2Icon{from{transform:translateY(5px) scale(.86);filter:drop-shadow(0 0 0 rgba(var(--accent-rgb),0))}60%{filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.8))}to{transform:translateY(-4px) scale(1);filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55))}}
@keyframes m2Label{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(-2px)}}
/* a press shows on pointer-down (MOTION.md §4) */
html.m2 #navTabs .tab{transition:transform .12s cubic-bezier(.16,1,.3,1)}
html.m2 #navTabs .tab:active{transform:scale(.96)}

/* the travelling glass shape (clip-path morph, never scaled → text stays sharp) */
.m2-shape{position:fixed;z-index:60;pointer-events:none;
  background:rgba(16,22,27,.72);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),inset 0 1px rgba(255,255,255,.18)}

/* the page renders unseen, then materialises: blur → 0, scale → 1, opacity → 1 */
html.m2 #viewport.m2-hold #console{opacity:0!important;transition:none!important}
html.m2 #viewport.m2-leave #console{animation:m2Leave .2s cubic-bezier(.7,0,.84,0) both}
@keyframes m2Leave{to{opacity:0;transform:scale(.9);filter:blur(6px)}}
html.m2 #viewport.m2-in #console{animation:m2Materialise .46s cubic-bezier(.16,1,.3,1) both}
@keyframes m2Materialise{from{opacity:0;transform:scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){
  html.m2 .m2-liquid{transition:none}
  html.m2 #hud #navTabs .tab.m2-arrive i,html.m2 #hud #navTabs .tab.m2-arrive span{animation:none}
  html.m2 #navTabs .tab:active{transform:none}
  html.m2 #viewport.m2-in #console,html.m2 #viewport.m2-leave #console{animation:none}
}

/* ═══ THE SIDE DOCK (2026-09-28) — the instrument column docked full-height on the right edge,
   like the shared-session panel; collapse at the top (–) or the middle edge tab. ═══ */
html.m2{--m2-side-w:340px}
html.m2 #sxrSide{position:fixed;top:0;right:0;bottom:0;width:var(--m2-side-w);z-index:40;display:flex;flex-direction:column;
  background:rgba(14,19,23,.9);border-left:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%);visibility:hidden;
  transition:transform .46s cubic-bezier(.7,0,.84,0),visibility 0s .46s}
html.m2 body.m2-side.m2-side-open #sxrSide{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.16,1,.3,1),visibility 0s}
html.m2 #sxrSide .sd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 16px;position:relative}
html.m2 #sxrSide .sd-head::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent 70%)}
html.m2 #sxrSide .sd-door{display:block;font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:6px}
html.m2 #sxrSide .sd-title{display:block;font:400 30px/1.05 'Bodoni 72',Didot,'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;color:#fff}
html.m2 #sxrSide .sd-min{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;font:400 16px/1 var(--sans);cursor:pointer;
  transition:border-color .2s,background .2s,transform .12s cubic-bezier(.16,1,.3,1)}
html.m2 #sxrSide .sd-min:hover{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.1)}
html.m2 #sxrSide .sd-min:active{transform:scale(.94)}
html.m2 #sxrSide .sd-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px 18px 30px;display:flex;flex-direction:column;gap:10px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
html.m2 #sxrSide .sd-body::-webkit-scrollbar{display:none}
/* the cards inside the dock sit on its glass — no second glass layer (never stack translucency) */
html.m2 #sxrSide .ci-card{background:rgba(255,255,255,.03);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(255,255,255,.1);border-radius:16px;flex:none}
/* the tab on the middle edge: rides the panel's edge when open, the screen edge when collapsed */
html.m2 #sxrSideTab{position:fixed;top:50%;right:0;z-index:41;display:none;flex-direction:column;align-items:center;gap:10px;
  padding:14px 8px;border:1px solid rgba(255,255,255,.2);border-right:0;border-radius:16px 0 0 16px;
  background:rgba(14,19,23,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;cursor:pointer;
  transform:translateY(-50%);transition:right .5s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
html.m2 body.m2-side #sxrSideTab{display:flex}
html.m2 body.m2-side.m2-side-open #sxrSideTab{right:var(--m2-side-w)}
html.m2 #sxrSideTab:hover{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.12)}
html.m2 #sxrSideTab i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.5);border-radius:50%;color:var(--accent);font-size:13px}
html.m2 #sxrSideTab span{writing-mode:vertical-rl;font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase}
/* the app gives up the panel's width in ONE frame (no tween on `right`) */
html.m2 body.m2-side.m2-side-open #app{right:var(--m2-side-w);transition:opacity .45s}
/* the page no longer reserves a column of its own */
html.m2 body.m2-side .m2-src{display:none!important}
html.m2 body.m2-side .story-page.console,html.m2 body.m2-side .story-page.console[data-page="Explore"]{grid-template-columns:minmax(0,1fr)!important}
html.m2 body.m2-side #conciergePage.console{grid-template-columns:minmax(0,1fr)!important;max-width:980px}
html.m2 body.m2-side .iv-stage.console .iv-canvas,html.m2[data-showcase-ui="glass"] body.m2-side #assetStage.iv-stage.console #ivCanvas,html.m2[data-showcase-ui="glass"] body.m2-side #assetStage.iv-interactive.console #ivCanvas{right:0!important}
html.m2 body.m2-side .iv-stage.console .iv-toolbar,html.m2 body.m2-side #assetStage.iv-stage.console .iv-toolbar{right:20px!important}
html.m2 body.m2-side .iv-stage.console .iv-rail,html.m2 body.m2-side #assetStage.iv-stage.console .iv-rail{left:50%!important}
/* a figure that just changed gets one soft champagne tick */
html.m2 .m2-tick{color:var(--accent)!important;transition:color .6s}

/* ═══ CONTENT FIRST (MOTION-AUDIT #7 · #12 · #18) — nothing a visitor came for waits past ~400 ms ═══ */
html.m2 #app{transition:opacity .45s,right 0s}
html.m2[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-w{animation-duration:.7s;animation-delay:calc(.08s + var(--i,0) * .07s)}
html.m2[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub{animation-duration:.55s;animation-delay:.25s}
html.m2[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .home-doors,html.m2[data-showcase-ui="glass"] #heroLayer .home-locs{animation-duration:.5s;animation-delay:.3s}
html.m2 .scn{animation:none}
html.m2 .scn-prev{animation-duration:.45s;animation-delay:0s}
html.m2 .scn-words small{animation:scnWord .45s .05s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .scn-w{animation-duration:.6s;animation-delay:calc(.1s + var(--i,0) * .07s)}
html.m2 .scn-words p{animation:scnWord .45s .22s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .scn-hi{animation:scnWord .45s .28s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .scn-acts{animation:scnWord .45s .32s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .scn-hop{animation:scnWord .45s .36s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .scn-plan{animation:scnWord .45s .4s cubic-bezier(.16,1,.3,1) forwards}
html.m2 .mo{transition-duration:.42s,.45s;transition-delay:calc(min(var(--mo-i,0),5) * 60ms)}

@media (prefers-reduced-motion:reduce){
  html.m2 #sxrSide,html.m2 body.m2-side.m2-side-open #sxrSide,html.m2 #sxrSideTab{transition:none}
}
/* a narrower app (side dock open) must not push the header readout under the action buttons */
@media (min-width:900px){
  html.m2[data-showcase-ui="glass"] body #brandbar.hdr-left{grid-template-columns:auto minmax(0,1fr) max-content max-content}
  /* wrap, never clip: the ILLUSTRATIVE DEMO marker is a truth marker and must stay readable */
  html.m2 #brandbar.hdr-left #hdrInfo .hi-ro{flex-wrap:wrap;row-gap:3px}
  html.m2 #brandbar.hdr-left #hdrInfo .hi-ro>*{flex:none;white-space:nowrap}
}

/* 3D/360 (Michael, 2026-09-28): every tour is a tab in the toolbar; the lone full-screen rail goes (the
   dock has full screen); an embedded tour sits framed between the header and the dock, so its own
   controls are never under ours */
html.m2 .m2-tabs{display:inline-flex;gap:4px;padding:4px;margin-left:6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(10,14,18,.6);pointer-events:auto}
html.m2 .m2-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.72);font:500 13px var(--sans);cursor:pointer;transition:background .2s,color .2s}
html.m2 .m2-tabs button small{font:600 8.5px var(--mono);letter-spacing:.14em;color:var(--accent)}
html.m2 .m2-tabs button[aria-pressed="true"]{background:rgba(var(--accent-rgb),.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}
html.m2 #assetStage.iv-interactive.iv-view-only .iv-rail{display:none}
@media (min-width:900px){
  html.m2[data-showcase-ui="glass"] body #assetStage.iv-interactive.iv-view-only #ivCanvas,
  html.m2[data-showcase-ui="glass"] body.m2-side #assetStage.iv-interactive.iv-view-only.console #ivCanvas{
    inset:calc(var(--sales-header-h,110px) + 60px) 20px var(--m2-dock,190px) 20px!important;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.45)}
}
/* the Media grid breathes below the header (Michael, 2026-09-28: "a bit crowded up there") */
html[data-showcase-ui="glass"] #mpBody .mg-explore{margin-top:60px}   /* the grid page starts under the header (console top 88 vs header 112) — this clears it by ~36px */

/* ROOM FOR THE LENS (2026-10-01, Michael: Explore "compresses content too much. Maybe too many panels, especially if
   Explore together on"). While a side panel takes the right edge — At a glance or the shared session — the Explore and
   Media hubs drop their right zone (this space's counts and plan) and the lens takes its width; closing the panel
   brings the zone back. Very wide screens keep all three. */
@media (min-width:1100px) and (max-width:1799px){
  html.m2 body:is(.m2-side-open,.sxr-docked,.sxr-rail) .ov-deck:is([data-page="Explore"],[data-page="Media"]) .ov-hub{grid-template-columns:minmax(250px,28%) minmax(0,1fr)}
  html.m2 body:is(.m2-side-open,.sxr-docked,.sxr-rail) .ov-deck:is([data-page="Explore"],[data-page="Media"]) .ov-hub>.ov-zr{display:none}
}