/* ===== Urban Style Salon — Brand Intro (mobile only) ===== */

/*public_html/services/assets/css/brand-intro.css  */


/* Fullscreen overlay */
#brand-intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: 18px;
  background: #ffffff;                 /* solid white background */
  color: #111;
  opacity: 0;                          /* hidden until .play */
  pointer-events: none;
  transition: opacity .35s ease;
  padding:
    calc(env(safe-area-inset-top, 0px) + 12px)
    16px
    calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* show/hide states controlled by JS */
#brand-intro.play{ opacity: 1; pointer-events: auto; }
#brand-intro.hide{ opacity: 0; pointer-events: none; }

/* Mobile only (don’t show on desktop/tablet) */
@media (min-width: 769px){
  #brand-intro{ display: none !important; }
}

/* SVG sizing for phones */
.brand-intro__svg{
  width: min(64vw, 220px);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Wordmark */
.brand-intro__wordmark{
  text-align:center;
  color:#111;
  user-select:none;
  margin-top: 6px;
  font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#urban{
  font: 700 28px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(8px);
}

#style{
  font: 600 14px/1.1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .18em;
  margin-top: 10px;
  color: #333;
  opacity: 0;
  transform: translateY(8px);
}

/* Skip button (bottom-right) */
#brand-intro-skip{
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: #f2f2f2;
  border: 1px solid #ddd;
  color: #111;
  padding: 6px 10px;
  border-radius: 10px;
  font: 500 12px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}
#brand-intro-skip:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

#brand{
  font-weight: 800;
  font-size: 26px;      /* tune: 24–28 on phones */
  line-height: 1;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(8px);
}
#brand .brand-left,
#brand .brand-right{ display:inline-block; }

/* Small badge: SALON */
#salon.capsule{
  display:inline-block;
  margin-top:10px;
  padding:4px 12px;
  border:0px solid #111;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.22em;
  opacity:0;
  transform: translateY(8px);
  color:#111;
}


/* ---------- Animations ---------- */

/* Prepare stroke paths for line-draw */
.stroke{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* Start animations only when .play is applied */
#brand-intro.play .stroke{
  animation: draw 700ms ease-out forwards;
}

/* Optional flower bloom (if an element with id="flower" exists) */
#brand-intro.play #flower{
  animation: bloom 300ms 700ms cubic-bezier(.2,1,.2,1) forwards;
  transform-origin: center;
}

/* Lip wipe: the mask rect grows left→right to reveal the red lips */
#lipMask{
  transform-origin: left center;
  transform: scaleX(0);                /* initial state */
}
#brand-intro.play #lipMask{
  animation: lipwipe 2000ms 0ms ease-out forwards;
}

/* Wordmark entrance */
#brand-intro.play #brand{ animation: inUp 400ms 300ms ease-out forwards; }
#brand-intro.play #salon{ animation: inUp 400ms 370ms ease-out forwards; }
/* Optional idle blink (if #eyes exists) */
#eyes{
  transform-origin: center;
  animation: blink 8s 2s infinite;
}

/* Gentle glow on lips to feel alive (uses red hue) */
#lips{
  animation: glow 9s 3s ease-in-out infinite;
}

/* Keyframes */
@keyframes draw{ to{ stroke-dashoffset: 0; } }

@keyframes bloom{
  0%   { transform: scale(.85) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate( 4deg); opacity: 1; }
  100% { transform: scale(1)    rotate( 0deg); }
}

@keyframes lipwipe{ to{ transform: scaleX(1); } }

@keyframes inUp{ to{ opacity: 1; transform: translateY(0); } }

@keyframes blink{
  0%,92%,100% { transform: scaleY(1); }
  95%         { transform: scaleY(.7); }
}

@keyframes glow{
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,0,0,0)); }
  50%     { filter: drop-shadow(0 0 8px rgba(255,0,0,.25)); }
}

/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  #brand-intro{ display: none !important; }
}