/* ===== Watch the tour =====
   The Watch button sits under the helmet like a video's play control. It is out of flow on
   purpose: the hero animation seeds from the helmet's position, so nothing added to the
   hero may affect its layout. On stacked layouts it rests on the helmet's lower edge. */
.hero-visual { position: relative; }
.btn-watch {
  position: absolute; left: 0; right: 0; top: 100%; width: fit-content; margin: 8px auto 0; min-height: 40px; padding: .4rem .95rem .4rem .55rem;
  background: rgba(12, 10, 8, .55); color: var(--text); border: 1px solid rgba(255, 174, 66, .34); box-shadow: none; text-shadow: none;
  font-size: .9rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-watch[hidden] { display: none; }
.btn-watch svg { width: 24px; height: 24px; flex: none; color: #ffae42; }
.btn-watch:hover { background: rgba(255, 122, 24, .16); border-color: #ffae42; transform: translateY(-1px); }
@media (max-width: 900px) { .btn-watch { top: auto; bottom: 4px; margin: 0 auto; background: rgba(12, 10, 8, .78); } }

/* ===== The room dims ===== */
.watching .site-header { background: #0c0a08; box-shadow: 0 1px 0 rgba(255, 122, 24, .14); }
.watching .site-header .nav { opacity: .4; transition: opacity .4s; }
.watching .site-header:hover .nav, .watching .site-header:focus-within .nav { opacity: 1; }
.watching .review-bar { display: none; }
.watching .flow section, .watching .site-footer { transition: opacity .7s ease; }
.watching .flow section:not(.scene-on), .watching .site-footer { opacity: .22; }

/* A line of light traces under the heading being discussed */
.watching .scene-on h2 { position: relative; }
.watching .scene-on h2::after {
  content: ""; position: absolute; left: 0; bottom: -.32em; width: min(190px, 46%); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ffe08a, #ff7a18 60%, rgba(255, 122, 24, 0));
  transform-origin: left; animation: m-trace 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.watching .scene-on .head-center h2::after { right: 0; margin: 0 auto; transform-origin: center; }
@keyframes m-trace { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* The item being named, with its neighbors stepping back */
/* !important: an item still mid scroll-reveal must not outrank the spotlight */
.watching .m-peer { opacity: .38 !important; transition: opacity .5s ease; }
.watching .m-hit { opacity: 1 !important; filter: brightness(1.14); transition: opacity .5s ease, filter .5s ease, box-shadow .5s ease; }
.d-daybreak.watching .m-hit, .d-daybreak-2.watching .m-hit { filter: none; } /* brightening washes out white cards */
.watching :is(.card, .tile, .cell, .col, .bento-tile, .form).m-hit { box-shadow: inset 0 0 0 1px rgba(255, 174, 66, .75), 0 0 34px rgba(255, 122, 24, .24); }
.watching .m-num { color: #ffd591; text-shadow: 0 0 18px rgba(255, 174, 66, .75); transition: color .4s, text-shadow .4s; }
.watching .paper .m-num { color: var(--accent); }
.watching .grad-text.m-hit { filter: brightness(1.22) drop-shadow(0 0 16px rgba(255, 122, 24, .5)); }

/* ===== Theater chrome ===== */
.m-theater[hidden] { display: none; }
.m-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; background: rgba(255, 255, 255, .1); }
.m-progress i { display: block; height: 100%; background: linear-gradient(90deg, #ffe08a, #ff7a18); transform: scaleX(0); transform-origin: left; }

.m-caption {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 66; transform: translateX(-50%);
  width: max-content; max-width: min(780px, calc(100vw - 32px)); margin: 0; padding: .55rem .95rem; border-radius: 12px;
  background: rgba(10, 8, 6, .93); color: #fff; font: 500 18px/1.42 var(--font); text-align: center; text-wrap: balance;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transition: opacity .18s;
}
.m-caption.m-show { opacity: 1; visibility: visible; }

.m-bar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 67; transform: translateX(-50%);
  display: flex; align-items: center; gap: .3rem; width: min(680px, calc(100vw - 24px)); padding: .3rem .45rem; border-radius: 999px;
  background: rgba(16, 13, 11, .92); border: 1px solid rgba(255, 255, 255, .14); color: #f6f1ea;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  font: 500 13px/1 var(--font); font-variant-numeric: tabular-nums;
}
.m-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .15s, color .15s; }
.m-btn:hover { background: rgba(255, 255, 255, .12); }
.m-btn svg { width: 22px; height: 22px; display: block; }
.m-btn[aria-pressed="false"].m-cc { color: #8d837a; }
.m-btn[aria-pressed="true"].m-mute { color: #ffae42; }
.m-btn:focus-visible, .m-scrub:focus-visible { outline: 2px solid #ffae42; outline-offset: 2px; }
.m-play { background: rgba(255, 255, 255, .1); }
.m-time { flex: none; min-width: 2.4em; text-align: center; color: #cfc6bc; }
.m-resume { display: none; flex: none; color: #ffae42; font-weight: 600; padding-right: .3rem; }
.m-paused-by-visitor .m-resume { display: inline; }
.m-scrub { flex: 1; min-width: 40px; height: 24px; margin: 0; accent-color: #ff7a18; cursor: pointer; background: transparent; }
.m-loading .m-play { animation: m-wait 1.2s ease-in-out infinite; }
@keyframes m-wait { 50% { opacity: .45; } }

@media (max-width: 640px) {
  .m-bar .m-time, .m-bar .m-cc, .m-bar .m-mute { display: none; }
  .m-bar { width: min(420px, calc(100vw - 24px)); }
  .m-btn { width: 44px; height: 44px; }
  .m-caption { font-size: 15px; bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .watching .scene-on h2::after { animation: none; }
  .m-loading .m-play { animation: none; }
  .watching .flow section, .watching .site-footer, .watching .m-peer, .watching .m-hit, .watching .m-num { transition: none; }
}