/* Shared brand reveal for the homepage and the six main service hubs. */
@property --home-intro-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.home-intro {
  display: none;
}

html.home-intro-pending .home-intro {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: block;
  isolation: isolate;
  pointer-events: auto;
}

html.home-intro-pending #alabama-device-switcher,
html.home-intro-pending .al-ai-chat,
html.home-intro-pending .fixed-cta {
  visibility: hidden;
}

.home-intro__veil {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, #fff 0%, rgb(255 255 255 / 98%) 17%, rgb(247 249 252 / 88%) 37%, rgb(240 244 249 / 64%) 64%, rgb(231 237 244 / 38%) 100%),
    url("../images/alabama-telephely-rendezett-20261027-v2.jpg") center 58% / cover no-repeat;
  background-color: #edf0f5;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--home-intro-radius), #000 calc(var(--home-intro-radius) + 2px));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--home-intro-radius), #000 calc(var(--home-intro-radius) + 2px));
  will-change: mask-image, opacity;
  pointer-events: none;
}

.home-intro__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(390px, 68vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-intro__brand::before {
  position: absolute;
  z-index: -1;
  inset: -35% -24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(237 24 46 / 13%), transparent 64%);
  content: "";
  opacity: 0;
}

.home-intro__logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(.94);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 14px 22px rgb(15 23 42 / 9%));
  will-change: opacity, transform, clip-path;
}

.home-intro__skip {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  padding: 9px 13px;
  border: 1px solid rgb(15 23 42 / 15%);
  border-radius: 999px;
  color: #344155;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 3px 15px rgb(15 23 42 / 5%);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  pointer-events: auto;
}

.home-intro__skip:hover,
.home-intro__skip:focus-visible {
  color: #b50e23;
  border-color: #ec1830;
  outline: 2px solid rgb(236 24 48 / 18%);
  outline-offset: 3px;
}

html.home-intro-running .home-intro__logo {
  animation: home-intro-mark-in 690ms cubic-bezier(.18, .75, .23, 1) both;
}

html.home-intro-running .home-intro__brand::before {
  animation: home-intro-glow 1200ms ease-out both;
}

html.home-intro-opening .home-intro__veil {
  animation: home-intro-unfold 920ms cubic-bezier(.65, 0, .2, 1) both;
}

html.home-intro-opening .home-intro__logo {
  animation: home-intro-mark-out 720ms cubic-bezier(.3, 0, .2, 1) both;
}

html.home-intro-opening .home-intro__skip {
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

@keyframes home-intro-mark-in {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(12px) scale(.94);
  }
  36% {
    opacity: 1;
  }
  76%, 100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes home-intro-glow {
  0% { opacity: 0; transform: scale(.76); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes home-intro-mark-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes home-intro-unfold {
  0% { --home-intro-radius: 0px; opacity: 1; }
  68% { opacity: 1; }
  100% { --home-intro-radius: 145vmax; opacity: 0; }
}

@media (max-width: 640px) {
  .home-intro__veil {
    background-position: center, 58% center;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.home-intro-pending .home-intro {
    display: none;
  }
}