/* Intro: la niebla sube, el loto se abre, se entra por la flor. Solo existe si <html> tiene .intro-on (ver script en index.html). */
#intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, #FBF7F0 0%, #F1EBDD 62%, #E3ECDD 100%);
  overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.iv-mist {
  position: absolute; left: -30%; width: 160%; height: 55%; pointer-events: none; will-change: transform, opacity;
  background:
    radial-gradient(ellipse 40% 50% at 22% 60%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 36% 46% at 62% 45%, rgba(214, 228, 210, .9), rgba(214, 228, 210, 0) 70%),
    radial-gradient(ellipse 34% 52% at 88% 65%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%);
}
.iv-mist-1 { bottom: -12%; }
.iv-mist-2 { bottom: -26%; opacity: .8; transform: scaleX(-1); }
.iv-mist-3 { bottom: -4%; opacity: .6; }
.iv-stage { position: relative; display: grid; justify-items: center; gap: 14px; padding: 0 16px; transform: translateY(-3vh); }
.iv-lotus { width: min(46vw, 250px); height: auto; overflow: visible; display: block; will-change: transform, opacity; }
.iv-word {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(30px, 8vw, 46px); letter-spacing: .01em;
  color: #1F3D2E; margin: 0; line-height: 1; opacity: 0; font-variation-settings: "SOFT" 60;
}
.iv-skip {
  position: absolute; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  border: 0; background: rgba(31, 61, 46, .08); color: #1F3D2E; font: 500 14px/1 "DM Sans", system-ui, sans-serif;
  padding: 12px 16px; border-radius: 999px; min-height: 44px; cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 160ms cubic-bezier(.23, 1, .32, 1);
}
.iv-skip:active { transform: scale(.97); }
@media (hover: hover) { .iv-skip:hover { background: rgba(31, 61, 46, .14); } }
.iv-skip:focus-visible { outline: 3px solid #B01A63; outline-offset: 3px; }