/* OWN — site v2 · the entrance (js/intro.js)
   html.is-intro is set by an inline script in <head> before first paint, so
   the overlay covers the page from the first frame. Without JS the overlay is
   hidden (<noscript>) and the site is never blurred. */

#own-intro {
  position: fixed; inset: 0; z-index: 1000;
  overflow: hidden;
  background: #080b0c;
  cursor: default;
  -webkit-user-select: none; user-select: none;
}
#own-intro.is-built { background: transparent; }
html:not(.is-intro) #own-intro { display: none; }
#own-intro::after {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/grain.svg');
  opacity: calc(.06 * var(--intro-grain, 1));
  pointer-events: none;
}
.intro-svg { position: absolute; inset: 0; display: block; }
/* The blur on the site, seen through the O. One viewport-sized backdrop layer
   that fades out — never a filter on the (very tall) page itself, which is
   what made the dive stutter. Shown only once the dive starts. */
.intro-veil {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  background: #fbfbf914;
  will-change: opacity;
}

/* rings breathing out from the O */
.intro-ring {
  fill: none; stroke: #86c7c0; stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: intro-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes intro-ring {
  0% { opacity: 0; transform: scale(.72); }
  22% { opacity: .32; }
  100% { opacity: 0; transform: scale(2.7); }
}

.intro-tagline {
  position: absolute; left: 0; right: 0;
  display: grid; justify-items: center; gap: 20px;
  opacity: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.55vw, 21px); letter-spacing: .01em;
  color: #f4f4f1b8;
}
.intro-loader { position: relative; display: block; width: 168px; height: 1px; overflow: hidden; background: #f4f4f124; }
.intro-loader i { position: absolute; inset: 0; background: linear-gradient(90deg, #86c7c000, #86c7c0 40%, #f4f4f1); transform: scaleX(0); transform-origin: left; }

/* the page waits behind the entrance, scroll-locked */
html.is-intro { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro-ring { animation: none; }
  .intro-veil { display: none; }
}