/* ==================================================
   frankie.co — homepage to Inside transition
   ================================================== */

html.from-inside {
  background: #000;
}

html.from-inside body {
  opacity: 0;
  transition: opacity .88s cubic-bezier(.22,.7,.24,1);
}

html.from-inside.from-inside-ready body {
  opacity: 1;
}

/* This is intentionally scoped to the thin Inside line beside the large F on
   the homepage index. It cannot style any door or interface inside /inside/. */
#stage > #inside-hotspot.inside-door-trigger {
  --inside-door-glow-rgb: 229, 74, 69;
  --inside-door-panel-rgb: 229, 74, 69;
  --inside-door-aperture-color: #000;
  --x: 106% !important;
  --y: 12% !important;
  width: 24px !important;
  height: clamp(32px, 5.4vmin, 44px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  cursor: pointer !important;
  perspective: 500px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  overflow: visible;
}

/* In night mode, both the revolving line and every emitted glow use the same
   #1bb6ba teal as the rest of the homepage. The doorway itself becomes the
   site's warm white so it remains visible against the black background. */
body.dark-mode #stage > #inside-hotspot.inside-door-trigger,
html[data-dark-pending="1"] #stage > #inside-hotspot.inside-door-trigger {
  --inside-door-glow-rgb: 27, 182, 186;
  --inside-door-panel-rgb: 27, 182, 186;
  --inside-door-aperture-color: #fffcf7;
}

#stage > #inside-hotspot.inside-door-trigger::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  background: rgba(var(--inside-door-glow-rgb), .45);
  box-shadow: 0 0 0 1px rgba(var(--inside-door-glow-rgb), .08);
  transition:
    width 1.08s cubic-bezier(.2,.68,.18,1),
    opacity .72s ease,
    background-color .45s ease,
    box-shadow .72s ease;
  opacity: .42;
}

#stage > #inside-hotspot.inside-door-trigger .inside-door-panel {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  transform: translateX(-50%) rotateX(0deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  background: rgb(var(--inside-door-panel-rgb));
  border: 1px solid rgba(var(--inside-door-panel-rgb), .92);
  box-shadow: 0 0 7px rgba(var(--inside-door-glow-rgb), .22);
  animation:
    homepageDoorSpin 2s cubic-bezier(.22,.72,.2,1) infinite,
    homepageDoorPulse 3.2s ease-in-out infinite;
  transition:
    transform 1.08s cubic-bezier(.2,.68,.18,1),
    background-color .45s ease,
    border-color .45s ease,
    box-shadow .8s ease,
    opacity .55s ease;
  will-change: transform, box-shadow;
}

#stage > #inside-hotspot.inside-door-trigger .inside-door-aperture {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 0;
  transform: translateX(-50%);
  background: var(--inside-door-aperture-color);
  box-shadow:
    inset 0 0 12px rgba(var(--inside-door-glow-rgb), .22),
    0 0 12px rgba(var(--inside-door-glow-rgb), .08);
  opacity: 0;
  transition:
    width 1.08s cubic-bezier(.2,.68,.18,1),
    background-color .45s ease,
    opacity .65s ease;
}

#stage > #inside-hotspot.inside-door-trigger:hover .inside-door-panel,
#stage > #inside-hotspot.inside-door-trigger:focus-visible .inside-door-panel {
  box-shadow: 0 0 13px rgba(var(--inside-door-glow-rgb), .48);
}

#stage > #inside-hotspot.inside-door-trigger:focus-visible {
  outline: 1px solid rgba(var(--inside-door-glow-rgb), .76) !important;
  outline-offset: 5px !important;
  border-radius: 0 !important;
}

#stage > #inside-hotspot.inside-door-trigger.is-opening::before {
  width: 14px;
  opacity: .92;
  background: var(--inside-door-aperture-color);
  box-shadow:
    inset 0 0 12px rgba(var(--inside-door-glow-rgb), .25),
    0 0 16px rgba(var(--inside-door-glow-rgb), .18);
}

#stage > #inside-hotspot.inside-door-trigger.is-opening .inside-door-aperture {
  width: 12px;
  opacity: 1;
}

#stage > #inside-hotspot.inside-door-trigger.is-opening .inside-door-panel {
  animation: none;
  transform: translateX(8px) rotateX(0deg);
  box-shadow: 0 0 18px rgba(var(--inside-door-glow-rgb), .54);
}

/* A compact bottom-to-top flip at the beginning of each two-second cycle,
   followed by a quiet hold. The centered pivot keeps the line detached from
   the F and gives it the clean revolving-door motion of the original cue. */
@keyframes homepageDoorSpin {
  0%, 12% {
    transform: translateX(-50%) rotateX(0deg);
  }
  46%, 100% {
    transform: translateX(-50%) rotateX(-360deg);
  }
}

@keyframes homepageDoorPulse {
  0%, 100% {
    opacity: .56;
    box-shadow: 0 0 5px rgba(var(--inside-door-glow-rgb), .16);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px rgba(var(--inside-door-glow-rgb), .42);
  }
}

#inside-route-fade {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .62s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .62s;
}

#inside-route-fade.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

body.inside-route-transitioning .stage,
body.inside-route-transitioning .topbar,
body.inside-route-transitioning .audio-bars,
body.inside-route-transitioning .audio-controls,
body.inside-route-transitioning .bottombar,
body.inside-route-transitioning .hint {
  pointer-events: none !important;
}

@media (max-width: 640px) {
  #stage > #inside-hotspot.inside-door-trigger {
    --x: 106% !important;
    --y: 12% !important;
    width: 22px !important;
    height: clamp(30px, 9vw, 38px) !important;
  }

  #stage > #inside-hotspot.inside-door-trigger.is-opening .inside-door-panel {
    transform: translateX(7px) rotateX(0deg);
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  #stage > #inside-hotspot.inside-door-trigger {
    height: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.from-inside body,
  #stage > #inside-hotspot.inside-door-trigger::before,
  #stage > #inside-hotspot.inside-door-trigger .inside-door-panel,
  #stage > #inside-hotspot.inside-door-trigger .inside-door-aperture,
  #inside-route-fade {
    transition-duration: .01ms !important;
  }

  #stage > #inside-hotspot.inside-door-trigger .inside-door-panel {
    animation: none !important;
    opacity: 1;
  }
}

/* Production door marker: 2026-07-13 / homepage-index-door-site-teal-d */