* { box-sizing: border-box; }
@font-face { font-family: "Russo One"; src: url("./fonts/RussoOne-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
html, body { min-width: 320px; margin: 0; background: #020812; color: #f7fbff; font-family: Arial, Helvetica, sans-serif; }
.road-entrance { position: relative; isolation: isolate; min-height: 100svh; background: #020812; }
.road-photo, .road-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.road-photo { z-index: -2; object-fit: cover; object-position: center; }
.road-shade { z-index: -1; background: linear-gradient(90deg, rgba(1,5,12,.9), rgba(2,8,18,.55) 48%, rgba(2,8,18,.13)), linear-gradient(0deg, rgba(1,5,12,.55), transparent 48%); }
.road-enter { display: flex; flex-direction: column; min-height: 100svh; padding: clamp(24px, 4vw, 60px) clamp(24px, 7vw, 100px); color: #f7fbff; text-decoration: none; }
.road-enter:focus-visible { outline: 4px solid #17d9ff; outline-offset: -8px; }
.road-route { color: #8defff; font-size: 1.1rem; font-weight: 800; letter-spacing: .12em; }
.road-route strong { font-size: 2rem; }
.road-copy { margin-top: clamp(44px, 8svh, 95px); max-width: 780px; }
.road-copy > p { margin: 0 0 20px; color: #8defff; font-size: clamp(.9375rem, 1.45vw, 1.25rem); font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.road-copy h1 { margin: 0; max-width: 12ch; color: #bdefff; background: linear-gradient(180deg, #fff, #d8f9ff 38%, #40ddff 68%, #087cff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Russo One", "Arial Black", sans-serif; font-size: clamp(3rem, 7.2vw, 7.8rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }
.road-surprise { display: block; margin-top: 24px; font-size: clamp(1rem, 1.8vw, 1.5rem); line-height: 1.4; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.road-action { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: fit-content; max-width: 100%; margin-top: clamp(70px, 14svh, 160px); padding: 18px 24px; border: 1px solid #8defff; color: #e9fcff; background: rgba(2,8,18,.7); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.road-enter:hover .road-action { color: #020812; background: #8defff; }
@media (max-width: 600px) { .road-photo { object-position: 55% center; } .road-enter { padding: 24px; } .road-copy { margin-top: 44px; } .road-copy h1 { font-size: clamp(2.8rem, 12vw, 4.5rem); line-height: 1.03; } .road-shade { background: linear-gradient(180deg, rgba(1,5,12,.78), rgba(2,8,18,.45) 48%, rgba(1,5,12,.24)); } .road-action { margin-top: max(64px, 11svh); } }

/* A capa pública replica a composição aprovada do PMF. */
@font-face { font-family: "Rajdhani"; src: url("./fonts/Rajdhani-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("./fonts/Rajdhani-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("./fonts/Rajdhani-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
html, body { min-height: 100%; }
body { overflow: hidden; font-family: "Rajdhani", Arial, sans-serif; }
.road-entrance { width: 100%; min-height: 100svh; overflow: hidden; }
.road-photo { object-position: center center; transform: scale(1.02); animation: slow-breath 16s ease-in-out infinite alternate; }
.road-shade { background: linear-gradient(90deg, rgba(1,5,12,.96) 0%, rgba(2,8,18,.78) 43%, rgba(2,8,18,.24) 76%, rgba(2,8,18,.54) 100%), linear-gradient(0deg, rgba(1,5,12,.92) 0%, transparent 53%, rgba(1,5,12,.45) 100%); }
.road-grid { position: absolute; z-index: -1; inset: 0; opacity: .34; background-image: linear-gradient(rgba(141,239,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(141,239,255,.08) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg,#000,transparent 68%); }
.road-enter { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; min-height: 100svh; padding: 0; cursor: pointer; }
.road-route { position: absolute; top: clamp(1.5rem,5vw,4rem); left: clamp(1.25rem,5vw,5rem); display: flex; align-items: baseline; gap: .5rem; font-family: "Russo One", "Arial Black", sans-serif; text-shadow: 0 0 1.8rem rgba(23,217,255,.65); }
.road-route strong { font-size: clamp(1.6rem,3vw,3.4rem); }
.road-copy { position: absolute; top: clamp(7.5rem,18vh,11rem); left: clamp(1.25rem,7vw,8rem); width: min(820px,calc(100% - 2.5rem)); max-width: none; margin: 0; pointer-events: none; }
.road-copy > p { margin: 0 0 1rem; font-size: clamp(.85rem,1.45vw,1.25rem); letter-spacing: .18em; line-height: normal; }
.road-copy h1 { max-width: 11ch; font-size: clamp(3.2rem,7.3vw,8.6rem); line-height: .88; letter-spacing: -.055em; overflow-wrap: normal; text-shadow: 0 0 3rem rgba(23,217,255,.18); }
.road-surprise { margin-top: 1.7rem; font-size: clamp(1rem,1.8vw,1.6rem); letter-spacing: .18em; }
.audio-pulse { display: flex; align-items: center; width: clamp(4.5rem,14vw,11rem); height: 2.3rem; gap: clamp(.16rem,.35vw,.34rem); overflow: hidden; mask-image: linear-gradient(90deg,#000 0%,#000 28%,transparent 100%); -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 28%,transparent 100%); }
.audio-pulse i { display: block; width: 2px; height: 18%; flex: 0 0 2px; background: #17d9ff; box-shadow: 0 0 .55rem #17d9ff; animation: travel-wave 1.25s ease-in-out infinite; }
.audio-pulse i:nth-child(3n+1) { height: 38%; animation-delay: -.18s; }
.audio-pulse i:nth-child(3n+2) { height: 76%; animation-delay: -.52s; }
.audio-pulse i:nth-child(4n) { height: 52%; animation-delay: -.83s; }
.audio-pulse i:nth-child(5n) { height: 28%; animation-delay: -1.02s; }
.road-audio-pulse { position: absolute; left: clamp(1.25rem,7vw,8rem); bottom: clamp(3rem,17vh,10rem); pointer-events: none; }
.road-signal { position: absolute; z-index: 1; right: clamp(1.25rem,5vw,5rem); top: 50%; display: flex; align-items: center; gap: .55rem; height: 7rem; opacity: .64; }
.road-signal i { display: block; width: 2px; height: 20%; background: #17d9ff; box-shadow: 0 0 1rem #17d9ff; animation: signal 1.5s ease-in-out infinite; }
.road-signal i:nth-child(2) { height: 70%; animation-delay: -.45s; }
.road-signal i:nth-child(3) { height: 38%; animation-delay: -.8s; }
@keyframes slow-breath { from { transform: scale(1.02); } to { transform: scale(1.075); } }
@keyframes signal { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes travel-wave { 0%,100% { transform: scaleY(.34); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 700px) {
  .road-photo { object-position: 55% center; }
  .road-shade { background: linear-gradient(180deg,rgba(1,5,12,.72) 0%,rgba(2,8,18,.57) 45%,rgba(2,8,18,.16) 70%,rgba(1,5,12,.34) 100%),linear-gradient(90deg,rgba(1,5,12,.5),rgba(2,8,18,.08) 86%); }
  .road-grid { opacity: .2; background-size: 52px 52px; mask-image: linear-gradient(0deg,#000,transparent 78%); }
  .road-enter { padding: 0; }
  .road-copy { top: 6.25rem; left: 1.25rem; width: calc(100% - 2.5rem); margin: 0; }
  .road-copy > p { max-width: 26ch; margin-bottom: 1rem; line-height: 1.25; }
  .road-copy h1 { max-width: 10ch; font-size: clamp(2.55rem,13.3vw,4.9rem); line-height: .93; }
  .road-surprise { max-width: 20ch; margin-top: 1.7rem; line-height: 1.25; }
  .road-signal { display: none; }
  .road-audio-pulse { left: 1.25rem; bottom: clamp(2.25rem,20vh,9rem); width: clamp(4.2rem,23vw,6.8rem); gap: .17rem; }
}
@media (max-width: 380px) { .road-copy h1 { font-size: clamp(2.25rem,12.2vw,3.2rem); } }
@media (max-width: 700px) and (max-height: 680px) { .road-copy { top: 5.6rem; } .road-copy h1 { font-size: clamp(2.25rem,11.8vw,4rem); } .road-surprise { margin-top: 1rem; } .road-audio-pulse { bottom: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }