/* GATE: first-visit intro (2026-07-13). Planet MC walk-in, ported from the approved
   typo-v7 prototype. Everything namespaced mcgate. The stage ships display:none inline
   and only gate.js turns it on, so these styles cost returning visitors nothing.
   The live theme styles bare tags; every rule here is explicit so nothing leaks in. */

#mcgateStage {
  /* sentinel: gate.js checks this custom property to prove the stylesheet loaded */
  --mcgate-css: 1;
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* phones: track the real visible height as the browser bar collapses */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #05030a;
  z-index: 100000; /* live nav is fixed at z-index 1000; the gate sits above everything */
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
}

/* arrival overlay state: gate.js adds this class after the pin is released so the
   final full-bleed frame holds over the real page while it crossfades away */
#mcgateStage.mcgate-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
}

/* the arrival clone: the real page's nav and hero, painted by the live stylesheet,
   settling in over the full-bleed video across the final approach. gate.js builds it
   at activation, drives its opacity and settle from the scrub, and marks it inert.
   Its transform also serves as the containing block for the cloned fixed nav, which
   pins the nav to the top of the stage exactly where the real one sits. */
#mcgateArrival {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  z-index: 3; /* above the camera scene (0) and the monument (2) */
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
#mcgateArrival * { pointer-events: none !important; }

/* one camera. the exterior and the forge inside it move as one world. */
#mcgateCamera {
  position: absolute;
  margin: 0;
  padding: 0;
  will-change: transform;
}
#mcgateBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none; /* the theme caps img widths; the backdrop must cover-fit its box */
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* the doorway: the site's real hero video lives behind the rock wall */
#mcgateWin {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: polygon(0% 100%, 0% 15.2%, 8.8% 8.1%, 18.8% 4.4%, 28.7% 1.7%, 38.7% 0.4%, 47.5% 0%, 57.5% 0.4%, 67.4% 1.5%, 77.3% 3.3%, 87.3% 6.1%, 95% 9.8%, 100% 14%, 100% 100%);
  -webkit-clip-path: polygon(0% 100%, 0% 15.2%, 8.8% 8.1%, 18.8% 4.4%, 28.7% 1.7%, 38.7% 0.4%, 47.5% 0%, 57.5% 0.4%, 67.4% 1.5%, 77.3% 3.3%, 87.3% 6.1%, 95% 9.8%, 100% 14%, 100% 100%);
  background: #0a0603;
}
#mcgateVidWrap {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
  will-change: transform;
}
#mcgateVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
#mcgateFeather {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  box-shadow: inset 0 0 12px 4px rgba(6, 3, 2, 0.6);
  pointer-events: none;
}

/* ---------- THE MONUMENT: gate copy living in the world ---------- */
#mcgateMonument {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 96vw;
  margin: 0;
  padding: 0;
  text-align: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 2;
}
#mcgateGlow {
  position: absolute;
  inset: -55% -35%;
  margin: 0;
  padding: 0;
  z-index: -1;
  background: radial-gradient(50% 46% at 50% 72%, rgba(228, 83, 27, 0.22), rgba(179, 51, 0, 0.10) 46%, transparent 72%);
}
.mcgate-mask {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.mcgate-rise {
  display: block;
  margin: 0;
  padding: 0;
}
.mcgate-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.52em;
  padding: 0 0 0 0.52em;
  margin: 0 0 2.4vh 0;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(245, 240, 232, 0.72);
  text-shadow: 0 1px 10px rgba(5, 3, 2, 0.7);
}
.mcgate-main {
  position: relative;
  /* the live theme registers Chimera-Heavy.woff2 as family 'Chimera' at weights 700/800 */
  font-family: 'Chimera', 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 10.8vw, 168px);
  line-height: 0.94;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: #F5F0E8;
  /* one tight contact shadow for legibility; the fire light lives in the glow layer,
     never in stacked glyph glows */
  text-shadow: 0 3px 12px rgba(5, 3, 2, 0.45);
}
.mcgate-word {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}
/* the fire catches the bottom edge of the letters: feathered mask, no hard clip line */
.mcgate-hot {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  color: #ff9a5a;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 16%, transparent 46%);
  mask-image: linear-gradient(to top, black 0%, black 16%, transparent 46%);
  opacity: 0.4;
}
.mcgate-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.46em;
  padding: 0 0 0 0.46em;
  margin: 2.8vh 0 0 0;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(245, 240, 232, 0.88);
  text-shadow: 0 1px 10px rgba(5, 3, 2, 0.7), 0 8px 40px rgba(228, 83, 27, 0.18);
}
#mcgateCue {
  margin: 3.6vh 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 18px; /* generous thumb target */
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  background: transparent;
}
#mcgateCue:focus-visible {
  outline: 2px solid rgba(245, 240, 232, 0.85);
  outline-offset: 4px;
}
#mcgateCueText {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding: 0 0 0 0.5em;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(245, 240, 232, 0.85);
  text-shadow: 0 2px 12px rgba(5, 3, 2, 0.8);
  transition: color 0.25s ease;
}
#mcgateCue:hover #mcgateCueText { color: rgba(245, 240, 232, 1); }
#mcgateCueChevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}
.mcgate-chev {
  display: block;
  width: 26px;
  height: 15px;
  margin: 0;
  padding: 0;
  filter: drop-shadow(0 2px 6px rgba(5, 3, 2, 0.8));
}
.mcgate-chev path {
  fill: none;
  stroke: rgba(245, 240, 232, 0.9);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mcgate-chev + .mcgate-chev { margin-top: -7px; opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  #mcgateGlow { animation: mcgateGlowBreathe 7s ease-in-out infinite alternate, mcgateGlowDrift 11.5s ease-in-out infinite alternate; }
  .mcgate-hot { animation: mcgateHotBreathe 6.4s ease-in-out infinite alternate; }
  #mcgateCueChevrons { animation: mcgateCueDrop 2.1s ease-in-out infinite; }
}
@keyframes mcgateGlowBreathe {
  from { opacity: 0.82; }
  to { opacity: 1; }
}
@keyframes mcgateGlowDrift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@keyframes mcgateHotBreathe {
  from { opacity: 0.3; }
  to { opacity: 0.48; }
}
@keyframes mcgateCueDrop {
  0% { transform: translateY(-7px); opacity: 0; }
  30% { opacity: 1; }
  60% { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}