/* Opening: real logo draws on charcoal, light sweep, then the "rose" opens (radial iris) onto the page. ~3.8 s */
@property --iris { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 40%, #323b42 0%, #272E34 45%, #181d21 100%);
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + 6%));
          mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + 6%));
  animation: pr-iris 1.15s cubic-bezier(.7, 0, .25, 1) 2.65s forwards, pr-safety 0s linear 4.6s forwards;
}
.intro-glow { position: absolute; width: min(90vmin, 720px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 146, 155, .42) 0%, rgba(244, 146, 155, .12) 38%, transparent 68%);
  filter: blur(8px); opacity: 0; transform: scale(.6); animation: pr-glow 2.6s ease-out .05s forwards; }
.intro-photo { position: absolute; inset: -4%; background: url(../img/salon-wall-sm.webp) center/cover; opacity: 0;
  filter: blur(14px) saturate(1.2); animation: pr-photo 3.4s ease-in-out .2s forwards; }
.intro-logo { position: relative; width: min(64vw, 340px); animation: pr-lift 1.1s cubic-bezier(.6, 0, .3, 1) 2.6s forwards; }
.intro-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(244, 146, 155, .45)); }
.intro-svg .lg-mark path { fill: #F4929B; fill-opacity: 0; stroke: #FBD3D7; stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pr-draw 1.35s cubic-bezier(.55, 0, .3, 1) .25s forwards, pr-fill .6s ease 1.25s forwards; }
.intro-svg .lg-word { fill: #F4929B; opacity: 0; clip-path: inset(0 100% 0 0); animation: pr-word .9s cubic-bezier(.6, 0, .2, 1) 1.2s forwards; }
.intro-svg .lg-sub, .intro-svg .lg-dash { fill: #fff; opacity: 0; animation: pr-fade .6s ease 1.75s forwards; }
.intro-svg .lg-dash { fill: #F4929B; }
.intro-sweep { position: absolute; width: min(64vw, 340px); aspect-ratio: 182.75 / 151.63; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .0) 40%, rgba(255, 240, 242, .85) 50%, rgba(255, 255, 255, 0) 60%, transparent 65%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0; opacity: 0;
  -webkit-mask: url(../img/logo-dark.svg) center/contain no-repeat; mask: url(../img/logo-dark.svg) center/contain no-repeat;
  animation: pr-sweep .85s ease-in-out 1.95s forwards; }
.intro-skip { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); background: none; border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .7); border-radius: 999px; padding: 6px 14px; font: 500 .8rem/1 Manrope, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
/* page content eases in behind the iris */
html.intro-on .hero-copy > * { opacity: 0; transform: translateY(18px); animation: pr-up .9s cubic-bezier(.2, .7, .2, 1) forwards; }
html.intro-on .hero-copy > :nth-child(1) { animation-delay: 3.0s; } html.intro-on .hero-copy > :nth-child(2) { animation-delay: 3.08s; }
html.intro-on .hero-copy > :nth-child(3) { animation-delay: 3.18s; } html.intro-on .hero-copy > :nth-child(4) { animation-delay: 3.26s; }
html.intro-on .hero-copy > :nth-child(5) { animation-delay: 3.34s; }

@keyframes pr-glow { 40% { opacity: 1; transform: scale(1); } 100% { opacity: .85; transform: scale(1.12); } }
@keyframes pr-photo { 0% { opacity: 0; transform: scale(1.15); } 60% { opacity: .16; } 100% { opacity: .1; transform: scale(1.02); } }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes pr-word { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes pr-fade { to { opacity: 1; } }
@keyframes pr-sweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes pr-lift { to { transform: scale(1.18); opacity: 0; filter: blur(3px); } }
@keyframes pr-iris { to { --iris: 120%; } }
@keyframes pr-safety { to { visibility: hidden; pointer-events: none; } }
@keyframes pr-up { to { opacity: 1; transform: none; } }