/* MyProject global: no focus rings or tap highlights on anything, ever.
   Buttons stay focusable (keyboard nav works); only the visual ring dies. */
*:focus,
*:focus-visible,
*:focus-within { outline: 0 !important; }
button::-moz-focus-inner,
[role="button"]::-moz-focus-inner { border: 0 !important; }
* { -webkit-tap-highlight-color: transparent !important; }

/* MyProject Loader v2.3.0 — background video + centered mark */

:root {
  --mp-loader-bg: #090909;
  /* The control group's grey and its hover gold are the site header's media
     buttons (MediaControls.tsx: text-[#929497] hover:text-[#d8b878]), so the
     loader hands over to a page whose controls are already this colour. */
  --mp-loader-grey: #929497;
  --mp-loader-grey-rgb: 146, 148, 151;
  --mp-loader-hover: #d8b878;
  /* The mark keeps its own gold — only the controls were asked to change. */
  --mp-loader-mark: #a5803f;
  --mp-progress: 0;
}

html.mp-loader-active,
body.mp-loader-active {
  overflow: hidden !important;
}

.mp-loader,
.mp-loader * {
  box-sizing: border-box;
}

/* Every child (background, logo, control stack) is absolutely positioned against
   this box, so no layout mode is needed here. */
.mp-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: block;
  overflow: hidden;
  background: var(--mp-loader-bg);
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity 620ms cubic-bezier(.5, 0, .2, 1), visibility 620ms;
}

.mp-loader[hidden],
.mp-loader.is-hidden {
  display: none;
}

.mp-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
}

/* ---------- background video ---------- */

.mp-loader__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mp-loader__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: mp-bg-in 1400ms 120ms ease-out both;
}


/* ---------- center stack ---------- */

.mp-loader__center {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(78vw, 620px);
  display: grid;
  justify-items: center;
  gap: clamp(22px, 3.6vw, 38px);
}

/* Mirrors the site header's logo box, so the mark does not move when the loader
   hands over to the page. The header is Tailwind
   `absolute top-6 left-6 h-48 sm:top-10 sm:left-10 sm:h-64` on an `h-full w-auto`
   image: 24px/192px below the 640px breakpoint, 40px/256px at or above it.
   Height drives the size and width follows the mark's ratio — the same as the
   header — so a fixed width is deliberately not set. */
.mp-loader__logo-stage {
  position: absolute;
  top: 40px;
  left: 40px;
  height: 256px;
  width: auto;
}

.mp-loader__logo {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 0 26px rgba(165, 128, 63, .28));
  animation: mp-logo-in 1500ms 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.mp-loader__logo .mp-logo-mark {
  fill: var(--mp-loader-mark);
}

/* ---------- progress + label ---------- */

.mp-loader__status {
  width: min(72%, 320px);
  display: grid;
  gap: 12px;
}

.mp-loader__progress-track {
  position: relative;
  height: 1px;
  overflow: visible;
  background: rgba(var(--mp-loader-grey-rgb), .14);
}

.mp-loader__progress-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--mp-loader-grey-rgb), .38), var(--mp-loader-grey));
  box-shadow: 0 0 9px rgba(var(--mp-loader-grey-rgb), .38);
  transform-origin: left center;
  transform: scaleX(var(--mp-progress));
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.mp-loader__label {
  color: rgba(var(--mp-loader-grey-rgb), .58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: mp-label-in 600ms 900ms ease-out both;
}

/* ---------- play button (variant A) ---------- */

.mp-loader__play {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--mp-loader-grey-rgb), .34);
  border-radius: 50%;
  background: rgba(9, 9, 9, .42);
  color: var(--mp-loader-grey);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
  transition:
    opacity 480ms ease-out,
    transform 480ms cubic-bezier(.16, 1, .3, 1),
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mp-loader__play[disabled] {
  color: rgba(var(--mp-loader-grey-rgb), .26);
  border-color: rgba(var(--mp-loader-grey-rgb), .08);
  cursor: not-allowed;
}

.mp-loader__play:not([disabled]) {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  animation: mp-play-pulse 2100ms 420ms ease-in-out infinite;
}

.mp-loader__play:not([disabled]):hover {
  border-color: var(--mp-loader-hover);
  background: rgba(var(--mp-loader-grey-rgb), .08);
  box-shadow: 0 0 24px rgba(var(--mp-loader-grey-rgb), .18);
}

.mp-loader__play:not([disabled]):active {
  transform: scale(.94);
}

.mp-loader__play-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

/* ---------- complete/exiting states ---------- */

.mp-loader.is-complete .mp-loader__progress-track::before {
  box-shadow: 0 0 16px 1px rgba(var(--mp-loader-grey-rgb), .62);
}

.mp-loader.is-complete .mp-loader__logo {
  animation: mp-logo-complete 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.mp-loader.is-unbuilding .mp-loader__status,
.mp-loader.is-unbuilding .mp-loader__play {
  animation: mp-interface-out 380ms ease-in both;
}

.mp-loader.is-unbuilding .mp-loader__logo {
  animation: mp-logo-out 680ms cubic-bezier(.55, 0, .8, .28) both;
}

.mp-loader.is-unbuilding .mp-loader__bg-video {
  animation: mp-bg-out 720ms ease-in both;
}

/* ---------- keyframes ---------- */

@keyframes mp-bg-in {
  from { opacity: 0; filter: blur(12px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes mp-bg-out {
  to { opacity: 0; filter: blur(8px); }
}

/* These three no longer animate `filter` (they used to blur the logo in/out
   and pulse the drop-shadow's spread on completion). A `filter` that changes
   every animation frame forces the browser to re-rasterize the SVG's alpha
   mask on every single frame, for the whole time the animation runs — WebKit
   on iOS has to do that same re-rasterization work again on every pinch-zoom
   step regardless, and the two together are a plausible contributor to the
   renderer crashes reported on iOS Chrome (WebKit under the hood) while
   pinching zoom during the loader. The static glow itself (.mp-loader__logo's
   own `filter: drop-shadow(...)`, unchanged) stays visible throughout since
   it is not part of these keyframes — only its brief blur-in, blur-out, and
   completion brightening are gone. */
@keyframes mp-logo-in {
  0% { opacity: 0; transform: scale(.88) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mp-logo-complete {
  0% { transform: scale(1); }
  48% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes mp-logo-out {
  to { opacity: 0; transform: scale(.84); }
}

@keyframes mp-label-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mp-interface-out {
  to { opacity: 0; transform: translateY(7px) scaleX(.92); }
}

@keyframes mp-play-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(var(--mp-loader-grey-rgb), .12); }
  50% { box-shadow: 0 0 22px rgba(var(--mp-loader-grey-rgb), .28); }
}

/* ---------- responsive ---------- */

/* 639.98px, not 640px: Tailwind's `sm:` prefix takes effect at min-width 640px,
   so a max-width of 640px would apply both this block and the desktop values on
   a viewport exactly 640px wide and the logo would disagree with the header by
   one step. */
@media (max-width: 639.98px) {
  .mp-loader__center {
    width: min(84vw, 540px);
    gap: 20px;
    bottom: 24px;
  }

  /* Matches the header's `top-6 left-6 h-48`. */
  .mp-loader__logo-stage {
    top: 24px;
    left: 24px;
    height: 192px;
  }

  .mp-loader__status {
    width: min(78%, 280px);
  }

  .mp-loader__label {
    font-size: 8px;
    letter-spacing: .17em;
  }

  .mp-loader__play {
    width: 64px;
    height: 64px;
  }

  .mp-loader__play-icon {
    width: 24px;
    height: 24px;
  }
}

/* ---------- mobile & tablet orientation ----------
   Pointer-type media features were tried here before (`any-pointer: coarse`)
   to gate this on "has a touchscreen", but that conflates input device with
   screen size: a touchscreen laptop at a normal desktop-sized viewport
   (e.g. a 2880x1800 panel at 200% OS scaling, which reports a ~1440x900 CSS
   viewport) still carries a coarse pointer and would incorrectly fall into
   this block. Physical resolution and user-agent sniffing were ruled out for
   the same reason plus their own fragility (OS scaling, spoofable UA). The
   fix below uses only CSS layout dimensions — width, height, orientation,
   aspect ratio — so it answers "is there room for the desktop layout",
   never "what kind of device is this".

   PORTRAIT is straightforward: a laptop screen is never portrait-shaped in
   normal use, so there is no desktop case to avoid here. `max-width: 1024px`
   is the short edge of the largest current tablet (iPad Pro 12.9":
   1024x1366), so this alone catches every phone and tablet in portrait.

   LANDSCAPE is where the real conflict lives, because a laptop viewport and
   a tablet viewport can land on the exact same height: 1920x1080 at 150% OS
   scaling is a required-desktop case at a 1280x720 CSS viewport, but the
   smallest tablet's landscape height (iPad, 1024x768) is *taller* than
   that — so no single max-height threshold can accept 720 while rejecting
   768. Aspect ratio is the second signal that actually separates them:
   every laptop panel in the test matrix is 16:9 or 16:10 (ratio 1.6-1.78),
   while tablets stay close to 4:3/3:2 even rotated to landscape (ratio
   1.33-1.43) — so `max-aspect-ratio: 14/9` (~1.556, between the two groups)
   excludes every required-desktop case while keeping every tablet. That
   alone would miss phones, though: many are wider than 14:9 in landscape
   (e.g. iPhone Pro Max at ~2.16), so a `max-width: 960px` branch
   (comfortably above the widest current phone, 926px on iPhone Pro Max,
   and nowhere near the narrowest required-desktop width, 1280px) catches
   those regardless of ratio. A landscape viewport matches this block if
   either branch does.

   Known trade-off: a legacy-style squarish desktop monitor (5:4 or 4:3,
   e.g. 1280x1024) would match the aspect-ratio branch and get the
   tablet/phone layout. None of the required desktop cases are that shape;
   accepted as out of scope rather than solved with a pointer check. */

/* Portrait: only the logo's horizontal position changes — center it in the
   viewport. Its top inset is left exactly as set by the rules above (40px,
   or 24px under the 639.98px breakpoint) since only the axis is different,
   not the distance. */
@media (max-width: 1024px) and (orientation: portrait) {
  .mp-loader__logo-stage {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Landscape: logo pinned left, and the play button + progress bar + status
   text pinned right as ONE group, both halves centered on the same axis
   (50% of the visible viewport height). The viewport height comes from
   .mp-loader itself (position: fixed; inset: 0, set further up), which
   already tracks the visual viewport rather than a static 100vh — so no
   vh/dvh workaround is needed for that part.

   Earlier this repositioned .mp-loader__play and .mp-loader__status as two
   independently-absolute children (via .mp-loader__center switching to
   `display: contents`) — each centered on its own, not as a group, so the
   progress bar and status text stayed lower/center while only the button
   moved. .mp-loader__center is itself the play+progress+status container
   (see the unqualified rule above: `display: grid; justify-items: center;
   gap: ...` already stacks and centers them as one block) — so the fix is
   to move THAT container to the right and center it vertically, and leave
   its children on their normal in-flow layout.

   Two separate rules, not one with a boolean "or" combinator: older Safari
   on iPad (still in real use) does not parse `(A) or (B)` inside a media
   query, and this needs to be reliable on exactly the tablets it targets.
   Both blocks carry the identical body, so either one matching applies the
   same layout — see the comment above this section for why both checks
   (aspect ratio, then width) are needed and what values they use. */
@media (max-aspect-ratio: 14/9) and (orientation: landscape) {
  .mp-loader__logo-stage {
    top: 50%;
    left: max(20px, env(safe-area-inset-left));
    height: clamp(90px, 30vh, 180px);
    transform: translateY(-50%);
  }

  .mp-loader__center {
    top: 50%;
    left: auto;
    right: max(20px, env(safe-area-inset-right));
    bottom: auto;
    transform: translateY(-50%);
    width: min(46vw, 260px);
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  .mp-loader__logo-stage {
    top: 50%;
    left: max(20px, env(safe-area-inset-left));
    height: clamp(90px, 30vh, 180px);
    transform: translateY(-50%);
  }

  .mp-loader__center {
    top: 50%;
    left: auto;
    right: max(20px, env(safe-area-inset-right));
    bottom: auto;
    transform: translateY(-50%);
    width: min(46vw, 260px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-loader__bg-video,
  .mp-loader__logo,
  .mp-loader__label,
  .mp-loader__play {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .mp-loader__play:not([disabled]) {
    animation: none !important;
  }
}