/*
  © 2026 Upward Creative Academy. Uso permitido em projetos próprios e de clientes.
  Adaptação do efeito licenciado "Transição Zoom pela Letra" para o GO Film Festival.
*/

.film-transition {
  display: contents;
}

.film-transition__layer {
  --film-bg: #07070a;
  --film-bg-soft: #211527;
  --film-text: #fff8e9;
  --film-muted: rgba(255, 248, 233, 0.56);
  --film-accent: #f6b52d;
  --film-display: Impact, Haettenschweiler, "Arial Black", sans-serif;
  --film-mono: "Courier New", Consolas, monospace;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  color: var(--film-text);
  font: 700 11px/1.4 var(--film-mono);
  user-select: none;
  touch-action: none;
}

.film-transition__layer.is-active {
  display: block;
}

.film-transition__layer *,
.film-transition__layer *::before,
.film-transition__layer *::after {
  box-sizing: border-box;
}

.film-transition__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--film-bg);
  will-change: transform;
}

.film-transition__bar.is-top {
  top: 0;
  background: radial-gradient(70% 90% at 50% 100%, var(--film-bg-soft), var(--film-bg) 72%);
  transform: translateY(-101%);
}

.film-transition__bar.is-bottom {
  bottom: 0;
  background: radial-gradient(70% 90% at 50% 0%, var(--film-bg-soft), var(--film-bg) 72%);
  transform: translateY(101%);
}

.film-transition__layer.is-intro-pending .film-transition__bar {
  transform: translateY(0);
}

.film-transition__layer.is-intro .film-transition__frame,
.film-transition__layer.is-intro .film-transition__word,
.film-transition__layer.is-intro .film-transition__fill,
.film-transition__layer.is-intro-pending .film-transition__frame,
.film-transition__layer.is-intro-pending .film-transition__word,
.film-transition__layer.is-intro-pending .film-transition__fill {
  display: none;
}

.film-transition__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.film-transition__layer.has-frame .film-transition__frame {
  opacity: 1;
}

.film-transition__layer.is-revealing .film-transition__word {
  display: none;
}

.site-film-rails {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  overflow: hidden;
  pointer-events: none;
}

.site-film-rails::before,
.site-film-rails::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  opacity: 0.42;
  background: repeating-linear-gradient(180deg, transparent 0 12px, #fff 12px 26px);
  clip-path: inset(0 7px);
  mix-blend-mode: difference;
  content: "";
}

.site-film-rails::before {
  left: 10px;
}

.site-film-rails::after {
  right: 10px;
}

.film-transition__grain {
  position: absolute;
  inset: -40px;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: film-grain 500ms steps(3) infinite;
}

@keyframes film-grain {
  33% { transform: translate(-14px, 9px); }
  66% { transform: translate(11px, -12px); }
}

.film-transition__code {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--film-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.film-transition__code b {
  color: var(--film-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.film-transition__code.is-top-left {
  top: clamp(18px, 3.2vw, 34px);
  left: clamp(48px, 5vw, 70px);
}

.film-transition__code.is-top-left b {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.film-transition__code.is-top-left i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d;
}

.film-transition__code.is-top-right {
  top: clamp(18px, 3.2vw, 34px);
  right: clamp(48px, 5vw, 70px);
  text-align: right;
}

.film-transition__code.is-bottom-left {
  bottom: clamp(18px, 3.2vw, 34px);
  left: clamp(48px, 5vw, 70px);
}

.film-transition__code.is-bottom-right {
  right: clamp(48px, 5vw, 70px);
  bottom: clamp(18px, 3.2vw, 34px);
  text-align: right;
}

.film-transition__code.is-bottom-right b {
  font: 400 16px/1 var(--film-display);
  letter-spacing: 0;
}

.film-transition__code.is-bottom-right i {
  color: var(--film-accent);
  font-style: normal;
}

.film-transition__word {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin: 0;
  color: var(--film-accent);
  font: 400 min(23vw, 32vh)/0.9 var(--film-display);
  letter-spacing: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.film-transition__fill {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--film-accent);
  opacity: 0;
  pointer-events: none;
}

.film-transition__layer.is-filled .film-transition__fill {
  opacity: 1;
}

html.is-film-transitioning,
html.is-film-transitioning body {
  overflow: hidden !important;
}

html.is-film-transitioning,
html.is-film-transitioning * {
  cursor: none !important;
}

@media (max-width: 760px) {
  .film-transition__word {
    max-width: 94vw;
    font-size: min(19vw, 26vh);
  }

  .site-film-rails::before,
  .site-film-rails::after {
    width: 18px;
    clip-path: inset(0 5px);
  }

  .site-film-rails::before {
    left: 3px;
  }

  .site-film-rails::after {
    right: 3px;
  }

  .film-transition__code {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .film-transition__code.is-top-left,
  .film-transition__code.is-bottom-left {
    left: 32px;
  }

  .film-transition__code.is-top-right,
  .film-transition__code.is-bottom-right {
    right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-transition__layer {
    display: none !important;
  }
}