/*
 * Elegant brand intro for the illustrated blue comparison pages.
 * Mobile stays centred; desktop is left-aligned on the editorial grid.
 */

body.ik-page-alternative .ik-site-header {
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    background .25s ease, backdrop-filter .25s ease,
    -webkit-backdrop-filter .25s ease !important;
}

.ik-brand-intro {
  position: fixed;
  z-index: 12500;
  inset: 0;
  display: grid;
  pointer-events: none;
  opacity: 1;
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1);
}

.ik-brand-intro__stack {
  display: grid;
}

.ik-brand-intro :is(img, .ik-logo-svg, .ik-intro-logo-image) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  color: #fff;
  filter: brightness(0) invert(1) drop-shadow(0 8px 28px rgba(0,40,66,.14));
  opacity: .99;
}

.ik-brand-intro__subtitle {
  color: rgba(255,255,255,.96);
  font-family: var(--ik-sans, Arial, sans-serif);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 8px 24px rgba(0,40,66,.16);
}

.ik-brand-intro.is-fading {
  opacity: 0;
  transform: scale(.992);
}

html:is(.ik-brand-intro-pending,.ik-brand-intro-running) body.ik-page-alternative .ik-site-header {
  opacity: 0 !important;
  transform: translateY(-12px);
  pointer-events: none;
}

html.ik-brand-intro-reveal body.ik-page-alternative .ik-site-header {
  opacity: 1 !important;
  transform: none;
  pointer-events: auto;
  transition-delay: .18s !important;
}

@media (max-width: 700px) {
  html:is(.ik-brand-intro-pending,.ik-brand-intro-running),
  html:is(.ik-brand-intro-pending,.ik-brand-intro-running) body {
    overflow: hidden !important;
  }

  .ik-brand-intro {
    place-items: center;
    padding: 24px;
  }

  .ik-brand-intro__stack {
    justify-items: center;
    gap: 14px;
    width: min(84vw, 420px);
    transform: translateY(-5vh);
  }

  .ik-brand-intro :is(img, .ik-logo-svg, .ik-intro-logo-image) {
    width: min(72vw, 360px);
    max-height: 90px;
  }

  .ik-brand-intro__subtitle {
    font-size: .72rem;
    text-align: center;
  }

  body.ik-page-alternative .ik-hero-alt .ik-kicker {
    transition: opacity .62s ease, transform .62s ease;
  }

  html:is(.ik-brand-intro-pending,.ik-brand-intro-running) body.ik-page-alternative .ik-hero-alt .ik-kicker {
    opacity: 0 !important;
    transform: translateY(8px);
  }

  html.ik-brand-intro-reveal body.ik-page-alternative .ik-hero-alt .ik-kicker {
    opacity: 1 !important;
    transform: none;
    transition-delay: .25s;
  }
}

@media (min-width: 701px) {
  .ik-brand-intro {
    place-items: center;
    padding: clamp(72px, 9vh, 118px) var(--ik-gutter);
  }

  .ik-brand-intro__stack {
    justify-items: center;
    align-content: center;
    gap: 8px;
    width: min(86vw, 760px);
    margin-inline: auto;
    transform: translateY(-1.5vh);
    text-align: center;
  }

  .ik-brand-intro :is(img, .ik-logo-svg, .ik-intro-logo-image) {
    width: clamp(500px, 32vw, 690px);
    max-width: 86vw;
    max-height: 126px;
  }

  .ik-brand-intro__subtitle {
    font-size: clamp(.82rem, .78vw, .94rem);
    line-height: 1.05;
    text-align: center;
  }

  body.ik-page-alternative .ik-hero-alt-copy,
  body.ik-page-alternative .ik-hero-alt-next {
    transition: opacity .9s cubic-bezier(.22,.61,.36,1),
      translate .9s cubic-bezier(.22,.61,.36,1) !important;
  }

  html:is(.ik-brand-intro-pending,.ik-brand-intro-running) body.ik-page-alternative .ik-hero-alt-copy,
  html:is(.ik-brand-intro-pending,.ik-brand-intro-running) body.ik-page-alternative .ik-hero-alt-next {
    opacity: 0 !important;
    translate: 0 24px !important;
    pointer-events: none;
  }

  html.ik-brand-intro-reveal body.ik-page-alternative .ik-hero-alt-copy {
    opacity: 1 !important;
    translate: 0 0 !important;
    pointer-events: auto;
    transition-delay: .18s !important;
  }

  html.ik-brand-intro-reveal body.ik-page-alternative .ik-hero-alt-next {
    opacity: 1 !important;
    translate: 0 0 !important;
    pointer-events: auto;
    transition-delay: .38s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ik-brand-intro { display: none !important; }
  html body.ik-page-alternative .ik-site-header,
  html body.ik-page-alternative .ik-hero-alt-copy,
  html body.ik-page-alternative .ik-hero-alt-next,
  html body.ik-page-alternative .ik-hero-alt .ik-kicker {
    opacity: 1 !important;
    translate: 0 0 !important;
    pointer-events: auto !important;
  }
  html body.ik-page-alternative .ik-site-header,
  html body.ik-page-alternative .ik-hero-alt .ik-kicker {
    transform: none !important;
  }
}


/* v0.26 – the opening brand mark is always white on the blue artwork. */
.ik-brand-intro img,
.ik-brand-intro .ik-intro-logo-image {
  filter: brightness(0) invert(1) drop-shadow(0 8px 28px rgba(0,40,66,.14)) !important;
}