/* -------------------------------------------------------
   MG00 Opening — Aperture Wipe
   Minimal / Clean / White-forward

   Notes:
   - Keep markup compatible with the legacy snippet.
   - Hide old blueprint elements (micro/rail/slices/hint).
------------------------------------------------------- */

:root{
  --mg00-bg: #ffffff;
  --mg00-ink: rgba(0,0,0,0.86);
  --mg00-ink-soft: rgba(0,0,0,0.18);
  --mg00-ink-faint: rgba(0,0,0,0.08);

  --mg00-size: clamp(56px, 10.5vw, 176px);
  --mg00-gap: .34em; /* animated in JS */
}

html.is-opening,
html.is-opening body{
  height: 100%;
  overflow: hidden;
}

html.is-opening body{
  overscroll-behavior: none;
}

.mg00-opening{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 760px at 50% 40%, rgba(0,0,0,0.030), transparent 70%),
    #fff;
  color: var(--mg00-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.mg00-opening::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 48px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.04) 0px,
      rgba(0,0,0,0.04) 1px,
      transparent 1px,
      transparent 48px);
  opacity: 0.050;
  -webkit-mask-image: radial-gradient(900px 620px at 50% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(900px 620px at 50% 42%, #000 0%, transparent 72%);
  pointer-events: none;
}

.mg00-opening::after{
  /* subtle vignette edge — almost invisible */
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(closest-side at 50% 45%,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.03) 80%,
    rgba(0,0,0,0.05) 100%);
  opacity: 0.65;
  pointer-events: none;
}

.mg00-opening__micro,
.mg00-rail,
.mg00-slices,
.mg00-hint{
  display: none !important;
}

.mg00-marks{
  position: absolute;
  inset: 24px;
  opacity: 0.0;
  pointer-events: none;
}

.mg00-mark{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0,0,0,0.10);
}

.mg00-mark::before,
.mg00-mark::after{
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.10);
}

.mg00-mark::before{ /* horizontal */
  left: -1px;
  right: 50%;
  top: -1px;
  height: 1px;
}

.mg00-mark::after{ /* vertical */
  top: -1px;
  bottom: 50%;
  left: -1px;
  width: 1px;
}

.mk-tl{ left: 0; top: 0; border-right: none; border-bottom: none; }
.mk-tr{ right: 0; top: 0; border-left: none; border-bottom: none; }
.mk-bl{ left: 0; bottom: 0; border-right: none; border-top: none; }
.mk-br{ right: 0; bottom: 0; border-left: none; border-top: none; }

.mg00-sheen{
  position: absolute;
  inset: -35%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 52% at 42% 44%, rgba(0,0,0,0.035) 0%, transparent 62%),
    radial-gradient(46% 54% at 58% 50%, rgba(0,0,0,0.022) 0%, transparent 64%);
  filter: blur(0.2px);
  will-change: transform, opacity;
}

.mg00-word{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 10px 14px 18px;
}

.mg00-wordOutline{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--mg00-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 0.92;
  color: rgba(0,0,0,0.075);
  opacity: 0;
  user-select: none;
}

.mg00-wordFill{
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: var(--mg00-gap);
  align-items: baseline;
  justify-content: center;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--mg00-size);
  font-weight: 600;
  line-height: 0.92;
  color: var(--mg00-ink);

  user-select: none;
  will-change: transform, opacity, filter;
}

.mg00-letter{
  display: inline-block;
  will-change: transform, opacity, filter;
}

.mg00-rule{
  width: min(560px, 70vw);
  height: 1px;
  background: rgba(0,0,0,0.14);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.mg00-tagline{
  margin-top: 2px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.52);
  opacity: 0;
  user-select: none;
}

@media (max-width: 520px){
  /* Mobile: keep the word fully inside the viewport.
     The opening uses per-letter gaps, so the total width grows fast.
     Slightly smaller type keeps “MOVEMENT” from clipping on iPhone widths. */
  :root{ --mg00-size: clamp(36px, 11vw, 76px); }
  .mg00-rule{ width: min(320px, 78vw); }
  .mg00-marks{ inset: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .mg00-opening *{
    transition: none !important;
    animation: none !important;
  }
}


/* Optical scan highlight (only shows over dark letters) */
.mg00-optic{
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-55%, 0, 0) rotate(12deg);
  will-change: transform, opacity;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.86) 50%,
    rgba(255,255,255,0) 62%,
    transparent 100%
  );
  filter: blur(0.75px);
  mix-blend-mode: screen;
}


/* Aperture reveal (clip-path) */
.mg00-wordFill{
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  will-change: clip-path, -webkit-clip-path;
}