/* A brief brand reveal, using the permanent frame's responsive resting position.
   No content is moved, reflowed or held waiting for media. */
.site-entrance-veil,
.site-entrance-line { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-site-entrance="active"] .site-entrance-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    isolation: isolate;
    animation: foghorn-entrance-reveal 2200ms linear both;
  }
  .site-entrance-veil::before,
  .site-entrance-veil::after {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    background: #0d0d0e;
    transform-origin: left center;
    animation: foghorn-entrance-curtain 2200ms cubic-bezier(.76, 0, .24, 1) both;
  }
  .site-entrance-veil::after {
    inset: 0 0 0 50%;
    transform-origin: right center;
  }
  html[data-site-entrance="active"] .site-entrance-logo {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(420px, 72vw);
    height: auto;
    animation: foghorn-entrance-logo 2200ms cubic-bezier(.22, 1, .36, 1) both;
  }
  html[data-site-entrance="active"] .site-frame {
    z-index: 9999;
    animation: foghorn-entrance-frame 2200ms cubic-bezier(.76, 0, .24, 1) both;
  }
  html[data-site-entrance="active"] .site-frame-cross {
    animation: foghorn-entrance-cross 2200ms ease both;
  }
  html[data-site-entrance="active"] .site-entrance-line {
    display: block;
    position: absolute;
    background: var(--workspace-line);
  }
  html[data-site-entrance="active"] :is(.site-entrance-line--top, .site-entrance-line--bottom) {
    left: -1px;
    right: -1px;
    height: 1px;
    animation: foghorn-entrance-horizontal 2200ms ease both;
  }
  html[data-site-entrance="active"] :is(.site-entrance-line--left, .site-entrance-line--right) {
    top: -1px;
    bottom: -1px;
    width: 1px;
    animation: foghorn-entrance-vertical 2200ms ease both;
  }
  .site-entrance-line--top { top: -1px; transform-origin: left; }
  .site-entrance-line--bottom { bottom: -1px; transform-origin: right; }
  .site-entrance-line--left { left: -1px; transform-origin: bottom; }
  .site-entrance-line--right { right: -1px; transform-origin: top; }
}

@keyframes foghorn-entrance-frame {
  0%, 5% { inset: calc(50% - 14px) calc(50% - 14px); border-color: transparent; }
  27%, 49% { inset: calc(50% - 96px) max(20px, calc(50% - 270px)); border-color: transparent; }
  99% { border-color: transparent; }
  /* Final inset inherits the existing desktop/mobile frame, including nav clearance. */
}
@keyframes foghorn-entrance-cross {
  0% { opacity: 0; transform: rotate(-90deg) scale(.5); }
  22%, 100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes foghorn-entrance-horizontal {
  0%, 10% { transform: scaleX(0); }
  32%, 100% { transform: scaleX(1); }
}
@keyframes foghorn-entrance-vertical {
  0%, 16% { transform: scaleY(0); }
  38%, 100% { transform: scaleY(1); }
}
@keyframes foghorn-entrance-logo {
  0%, 18% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-50%, -50%) translateY(8px); }
  36%, 49% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%, -50%) translateY(0); }
  65%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(-50%, -50%) translateY(-12px); }
}
@keyframes foghorn-entrance-curtain {
  0%, 53% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
/* Keep an animation-end signal on the parent for reliable cleanup. */
@keyframes foghorn-entrance-reveal {
  from { visibility: visible; }
  to { visibility: visible; }
}