/* Abertura cinematográfica: a rolagem controla os três vídeos e o rompimento final. */
.cinematic-intro {
  position: relative;
  z-index: 20;
  min-height: 440vh;
  padding: 0;
  overflow: clip;
  background: #071b35;
  color: #fff;
  isolation: isolate;
}

.cinematic-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #071b35;
}

.intro-media,
.intro-reveal,
.intro-video,
.intro-cracked,
.shatter-stage,
.shard,
.impact-flash {
  position: absolute;
  inset: 0;
}

.intro-reveal {
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 78% 26%, #315a8275 0, transparent 38%),
    radial-gradient(circle at 15% 85%, #2c4c7850 0, transparent 35%),
    #071b35;
  transform: scale(1.08);
  will-change: opacity, transform;
}

.intro-reveal::before,
.intro-reveal::after {
  content: "";
  position: absolute;
  border: 1px solid #b8d3f127;
  border-radius: 50%;
}

.intro-reveal::before {
  width: min(72vw, 940px);
  aspect-ratio: 1;
}

.intro-reveal::after {
  width: min(46vw, 600px);
  aspect-ratio: 1;
}

.intro-reveal-orbit {
  position: absolute;
  width: min(60vw, 780px);
  aspect-ratio: 1;
  border: 1px solid #d4e7ff35;
  border-radius: 50%;
  box-shadow: 0 0 100px #77a7dc14, inset 0 0 100px #77a7dc0a;
  transform: rotate(-18deg) scaleY(.42);
}

.intro-reveal-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.intro-reveal-copy span {
  display: block;
  margin-bottom: 22px;
  color: #a9c0dc;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .23em;
}

.intro-reveal-copy strong {
  font: 500 clamp(48px, 7vw, 108px)/.98 Manrope, Arial, sans-serif;
  letter-spacing: -.065em;
}

.intro-media {
  z-index: 1;
  overflow: hidden;
  --intro-veil: 1;
  background: transparent;
  will-change: transform;
}

.intro-media::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  opacity: var(--intro-veil);
  background:
    linear-gradient(180deg, #03111f73 0, transparent 26%, transparent 62%, #03111f8f 100%),
    linear-gradient(90deg, #03111f82 0, transparent 44%);
}

.intro-video {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.015);
  will-change: opacity, transform;
}

#introSequence { object-position: 50% center; }

.intro-video.is-visible { opacity: 1; }

/* A camada abaixo reforca a leitura da trajetoria sem esconder o video original:
   a bola parece cortar o ar, ganhar profundidade e puxar a camera junto. */
.flight-effects {
  --ball-x: 50%;
  --ball-y: 50%;
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}

.flight-speed-lines {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: repeating-conic-gradient(
    from -8deg at var(--ball-x) var(--ball-y),
    transparent 0deg 6.4deg,
    rgba(211, 232, 255, .04) 6.55deg 6.75deg,
    rgba(255, 255, 255, .35) 6.82deg 6.96deg,
    transparent 7.08deg 13.4deg
  );
  -webkit-mask-image: radial-gradient(circle at var(--ball-x) var(--ball-y), transparent 0 15%, #000 29%, #000 62%, transparent 82%);
  mask-image: radial-gradient(circle at var(--ball-x) var(--ball-y), transparent 0 15%, #000 29%, #000 62%, transparent 82%);
  transform-origin: var(--ball-x) var(--ball-y);
  will-change: opacity, transform;
}

.flight-trajectory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  will-change: opacity;
}

.flight-trajectory-line,
.flight-trajectory-glow {
  fill: none;
  stroke: url("#flightGradient");
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.flight-trajectory-line {
  stroke-width: 1.65;
  opacity: .9;
}

.flight-trajectory-glow {
  stroke-width: 16;
  opacity: .32;
  filter: blur(8px);
}

.ball-orbit {
  position: absolute;
  top: var(--ball-y);
  left: var(--ball-x);
  width: clamp(180px, 29vw, 470px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  will-change: opacity, transform;
}

.ball-orbit i,
.ball-orbit b {
  position: absolute;
  border-radius: 50%;
}

.ball-orbit i {
  inset: 8%;
  border: 1px solid rgba(225, 239, 255, .44);
  box-shadow: 0 0 18px rgba(191, 220, 255, .13);
}

.ball-orbit i:nth-child(1) { transform: rotate(18deg) scaleY(.30); }
.ball-orbit i:nth-child(2) { inset: 18%; border-style: dashed; opacity: .62; transform: rotate(-38deg) scaleY(.44); }
.ball-orbit i:nth-child(3) { inset: 29%; opacity: .38; transform: rotate(68deg) scaleY(.58); }

.ball-orbit b {
  inset: 43%;
  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(194,224,255,.15) 34%, transparent 72%);
  filter: blur(3px);
}

.intro-cracked,
.shard {
  background: url("assets/intro/vidro-trincado.jpg") center / cover no-repeat;
}

.intro-cracked {
  z-index: 3;
  opacity: 0;
  will-change: opacity;
}

.shatter-stage {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.shard {
  display: block;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.shard-1 { clip-path: polygon(50% 50%, 0 0, 50% 0); }
.shard-2 { clip-path: polygon(50% 50%, 50% 0, 100% 0); }
.shard-3 { clip-path: polygon(50% 50%, 100% 0, 100% 50%); }
.shard-4 { clip-path: polygon(50% 50%, 100% 50%, 100% 100%); }
.shard-5 { clip-path: polygon(50% 50%, 100% 100%, 50% 100%); }
.shard-6 { clip-path: polygon(50% 50%, 50% 100%, 0 100%); }
.shard-7 { clip-path: polygon(50% 50%, 0 100%, 0 50%); }
.shard-8 { clip-path: polygon(50% 50%, 0 50%, 0 0); }

.impact-flash {
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0, #eaf4ff 18%, transparent 66%);
  mix-blend-mode: screen;
  will-change: opacity;
}

.intro-chrome {
  position: absolute;
  z-index: 12;
  top: 34px;
  right: 4vw;
  left: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-shadow: 0 1px 18px #0008;
}

.intro-brand span { color: #bdd5ef; }

.intro-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.intro-counter i {
  display: block;
  width: 42px;
  height: 1px;
  background: #ffffff4f;
}

.intro-copy {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 8vw;
  max-width: 700px;
  color: #fff;
  transform: translateY(-50%);
  text-shadow: 0 4px 35px #0008;
  will-change: opacity, transform;
}

.intro-kicker {
  margin: 0 0 22px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
}

.intro-copy h1 {
  margin: 0;
  font: 500 clamp(46px, 6.5vw, 98px)/1 Manrope, Arial, sans-serif;
  letter-spacing: -.065em;
  color: transparent;
  background: linear-gradient(105deg, #fff 4%, #c9ddf5 48%, #fff 88%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Entrada suave em degradê para letras e informações da abertura. */
@keyframes intro-gradient-reveal {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    filter: blur(5px);
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    filter: blur(0);
  }
}

.intro-brand,
.intro-counter,
.intro-kicker,
.intro-copy h1,
.intro-scroll-hint,
.intro-scenes,
.intro-skip {
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, .82) 48%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, .82) 48%, transparent 62%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: intro-gradient-reveal .9s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: var(--wipe-delay, 0s);
}

.intro-brand { --wipe-delay: .04s; }
.intro-counter { --wipe-delay: .12s; }
.intro-kicker { --wipe-delay: .16s; }
.intro-copy h1 { --wipe-delay: .24s; animation-duration: 1.08s; }
.intro-scroll-hint { --wipe-delay: .42s; }
.intro-scenes { --wipe-delay: .5s; }
.intro-skip { --wipe-delay: .56s; }

.intro-reveal-copy {
  --wipe: 100%;
}

.intro-reveal-copy span,
.intro-reveal-copy strong,
.hero > .eyebrow,
.hero .title-mask,
.hero .lead,
.hero .cta,
.hero .metrics > div,
.hero .metrics > p,
main > section:not(.hero) > .eyebrow,
main > section:not(.hero) > .heading h2,
main > section:not(.hero) > .heading p,
main > section:not(.hero) > h2 {
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, .82) 48%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, .82) 48%, transparent 62%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.intro-reveal-copy span,
.intro-reveal-copy strong {
  -webkit-mask-position: var(--wipe) 0;
  mask-position: var(--wipe) 0;
}

.intro-reveal-copy strong {
  color: transparent;
  background: linear-gradient(105deg, #fff 4%, #bfd8f5 48%, #fff 90%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.intro-scroll-hint {
  position: absolute;
  z-index: 12;
  bottom: 32px;
  left: 4vw;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 2px 15px #0009;
  will-change: opacity;
}

.intro-scroll-hint i {
  position: relative;
  display: block;
  width: 70px;
  height: 1px;
  overflow: hidden;
  background: #ffffff52;
}

.intro-scroll-hint b {
  position: absolute;
  inset: 0;
  display: block;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.intro-scenes {
  position: absolute;
  z-index: 12;
  right: 4vw;
  bottom: 32px;
  display: flex;
  gap: 22px;
  color: #ffffff6b;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.intro-scenes span {
  position: relative;
  transition: color .25s;
}

.intro-scenes span::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}

.intro-scenes span.active { color: #fff; }
.intro-scenes span.active::before { transform: scaleX(1); }

.intro-skip {
  position: absolute;
  z-index: 14;
  top: 70px;
  right: 4vw;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #ffffff69;
  background: transparent;
  color: #fff;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.intro-skip:hover,
.intro-skip:focus-visible { opacity: 1; }

.intro-running .pager,
.intro-running #readingProgress {
  opacity: 0;
  pointer-events: none;
}

.pager,
#readingProgress { transition: opacity .35s; }

@media (max-width: 700px) {
  .cinematic-intro { min-height: 400vh; }
  .cinematic-sticky { min-height: 540px; }
  #introSequence { object-position: 50% center; }
  .intro-media::after {
    background:
      linear-gradient(180deg, #03111f8c 0, transparent 25%, transparent 55%, #03111fb5 100%),
      linear-gradient(90deg, #03111f78 0, transparent 80%);
  }
  .intro-chrome { top: 24px; right: 6vw; left: 6vw; }
  .intro-copy { top: auto; right: 7vw; bottom: 17vh; left: 7vw; transform: none; }
  .intro-copy h1 { font-size: clamp(42px, 13vw, 64px); }
  .intro-kicker { margin-bottom: 15px; font-size: 8px; }
  .intro-scroll-hint { bottom: 30px; left: 6vw; }
  .intro-scroll-hint span { max-width: 120px; line-height: 1.45; }
  .intro-scroll-hint i { width: 42px; }
  .intro-scenes { display: none; }
  .intro-skip { top: 55px; right: 6vw; }
  .intro-reveal-copy strong { font-size: clamp(45px, 15vw, 72px); }
  .intro-reveal-copy span { font-size: 8px; }
  .ball-orbit { width: clamp(160px, 60vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-intro { min-height: 115vh; }
  .intro-cracked,
  .shatter-stage,
  .impact-flash,
  .flight-effects { display: none; }
  #introSequence { opacity: 1 !important; }
  .intro-copy,
  .intro-chrome,
  .intro-scroll-hint { opacity: 1 !important; transform: none !important; }
  .intro-brand,
  .intro-counter,
  .intro-kicker,
  .intro-copy h1,
  .intro-scroll-hint,
  .intro-scenes,
  .intro-skip,
  .intro-reveal-copy span,
  .intro-reveal-copy strong,
  .hero > .eyebrow,
  .hero .title-mask,
  .hero .lead,
  .hero .cta,
  .hero .metrics > div,
  .hero .metrics > p,
  main > section:not(.hero) > .eyebrow,
  main > section:not(.hero) > .heading h2,
  main > section:not(.hero) > .heading p,
  main > section:not(.hero) > h2 {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media print {
  .cinematic-intro { display: none !important; }
}