@import url("/assets/css/site.v1.css?rev=10");

/*
 * Cena experimental: intro e hero compartilham a mesma viewport.
 * O scroll dissolve a camada superior; a hero nunca é deslocada ou recortada.
 */
.transition-scene {
  position: relative;
  height: 170svh;
  min-height: 70rem;
  background: var(--z-white);
}

.transition-scene__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: clip;
  isolation: isolate;
  background: var(--z-white);
}

.transition-scene__intro,
.transition-scene__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.transition-scene__hero {
  z-index: 1;
}

.transition-scene__hero .hero__inner {
  height: 100%;
  min-height: 100%;
  padding-top: clamp(7.5rem, 12vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.transition-scene__intro {
  z-index: 2;
  transform: translateZ(0) scale(var(--intro-scale, 1));
  transform-origin: center;
  opacity: var(--intro-opacity, 1);
  will-change: transform, opacity;
}

.transition-scene__intro .brand-intro__symbol {
  transform: translate(-50%, calc(-50% + var(--intro-symbol-y, 0px)));
  opacity: var(--intro-symbol-opacity, 1);
  will-change: transform, opacity;
}

.transition-scene__intro .brand-intro__scroll {
  opacity: var(--intro-symbol-opacity, 1);
}

.transition-scene__hero .hero__content {
  transform: translateY(var(--hero-content-y, 2rem));
  opacity: var(--hero-content-opacity, 0);
  will-change: transform, opacity;
}

.transition-scene.is-complete .transition-scene__intro {
  pointer-events: none;
}

.transition-scene + .section {
  position: relative;
  z-index: 3;
}

@media (max-width: 52rem) {
  .transition-scene {
    height: 165svh;
    min-height: 62rem;
  }

  .transition-scene__sticky {
    min-height: 32rem;
  }

  .transition-scene__hero .hero__inner {
    min-height: 100%;
    padding-top: clamp(6.5rem, 12vh, 8rem);
    padding-bottom: clamp(2.5rem, 7vh, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-scene__intro,
  .transition-scene__intro .brand-intro__symbol,
  .transition-scene__hero .hero__content {
    transform: none;
  }
}