/* Brand intro — from html_maket/jby-home-intro (Aston Martin pattern, JBY navy) */
@font-face {
  font-family: "JBY Intro Mesmerize";
  src: url("/assets/fonts/mesmerize/mesmerize-ex-lt-.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html.jby-intro-lock,
html.jby-intro-lock body {
  overflow: hidden;
}

html.jby-intro-lock .header-nav-root .logo,
html.jby-intro-lock .header-v2__logo {
  opacity: 0 !important;
}

/* Covers the first paint until #jby-intro is in the DOM */
html.jby-intro-lock:not(.jby-intro-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #41647b;
  pointer-events: none;
}

#jby-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  --jby-navy: #41647b;
  --conv: 1.15s;
  --ramp: 0.85s;
  --delay: 0.95s;
  --bgfade: 0.65s;
  animation: jbyIntroSafety 0.01s linear 12s forwards;
}

#jby-intro.is-slow {
  --conv: 3.45s;
  --ramp: 2.55s;
  --delay: 2.85s;
  --bgfade: 1.95s;
}

@keyframes jbyIntroSafety {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#jby-intro-bg {
  position: absolute;
  inset: 0;
  background: var(--jby-navy);
  opacity: 1;
  transition: opacity var(--bgfade) ease-in-out;
}

#jby-intro-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 96% at 50% 34%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(54, 84, 102, 0.55) 58%,
    rgba(26, 42, 58, 0.88) 100%
  );
}

#jby-intro.is-lift #jby-intro-bg {
  opacity: 0;
}

#jby-intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

#jby-intro-mark {
  width: 132px;
  height: 132px;
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
  transition: transform 1.05s cubic-bezier(0.66, 0, 0.24, 1);
}

#jby-intro-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

#jby-intro.is-go #jby-intro-mark {
  animation: jbyIntroRamp var(--ramp) linear var(--delay) forwards;
}

#jby-intro.is-go.is-mark-in #jby-intro-mark {
  transform: scale(1);
}

#jby-intro.is-lift #jby-intro-mark {
  transition: transform var(--fly, 0.75s) cubic-bezier(0.22, 0.61, 0.36, 1);
}

#jby-intro-word {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-family: "JBY Intro Mesmerize", "Mesmerize", "Mesmerize-ex-lt", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  color: #fff;
  transition: opacity 0.5s ease;
}

#jby-intro-word i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateX(var(--dx, 0));
  will-change: transform, opacity;
  transition: transform var(--conv) cubic-bezier(0.3, 0, 0.75, 1);
}

#jby-intro-word i.sp {
  width: 0.42em;
}

#jby-intro.is-go #jby-intro-word i {
  transform: translateX(0);
  animation: jbyIntroRamp var(--conv) linear forwards;
}

#jby-intro.is-lift #jby-intro-word {
  opacity: 0;
  transition-duration: calc(var(--bgfade) * 0.5);
}

@keyframes jbyIntroRamp {
  0% { opacity: 0.05; }
  20% { opacity: 0.1; }
  40% { opacity: 0.2; }
  60% { opacity: 0.45; }
  80% { opacity: 0.65; }
  100% { opacity: 1; }
}

@media (max-width: 980px) {
  #jby-intro-stage { gap: 26px; }
  #jby-intro-mark { width: 96px; height: 96px; }
  #jby-intro-word {
    font-size: 14px;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
  }
}

@media (max-width: 520px) {
  #jby-intro-stage { gap: 22px; }
  #jby-intro-mark { width: 84px; height: 84px; }
  #jby-intro-word {
    font-size: 11px;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #jby-intro-word i {
    transition: none;
    transform: none;
  }
}