@font-face {
  font-family: Inter;
  src: url('./assets/fonts/Inter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #ecebe7;
  --blue: #648ab3;
  --line: rgba(236, 235, 231, .3);
  --headline-clip: 0%;
  --headline-shift: 0px;
  --contact-clip: 0%;
  --contact-opacity: 1;
  --line-width: 16vw;
  --line-top: 56%;
  --line-opacity: .7;
}

* { box-sizing: border-box; }
html { background: #17191b; }
body { margin: 0; background: #17191b; color: var(--paper); font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 16px; background: var(--paper); color: #000; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4.3vw, 84px);
  background: rgba(2, 3, 4, .95);
  border-bottom: 1px solid rgba(236, 235, 231, .19);
}
.brand { display: flex; align-items: center; width: clamp(125px, 12vw, 180px); min-height: 44px; }
.brand img { display: block; width: 100%; height: auto; }
.site-header nav { display: flex; gap: clamp(28px, 3.4vw, 66px); align-items: center; height: 100%; }
.site-header nav a { position: relative; display: inline-flex; gap: .55em; align-items: center; height: 100%; font-size: 11px; font-weight: 650; letter-spacing: .11em; }
.site-header nav a span[aria-hidden] { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.site-header nav a:hover { color: white; }
.nav-progress { position: absolute; left: 0; bottom: 18px; width: 100%; height: 1px; background: rgba(236,235,231,.14); }
.nav-progress i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }

.experience { position: relative; min-height: 100svh; background: #17191b; }
.is-enhanced .experience { height: 620svh; }
.stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; background: #17191b; }
.poster, #watch-sequence { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { z-index: 2; }
.poster img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(var(--poster-zoom, 1)); }
#watch-sequence { z-index: 1; display: block; }
.espelho { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; visibility: hidden; pointer-events: none; }

/* Vitrine: luz que acompanha o relógio, vinheta e grão. Ficam sobre a sequência inteira,
   por isso não há emenda entre o quadro e o fundo. Só transform muda por quadro. */
.vitrine, .vinheta, .grao { position: absolute; pointer-events: none; z-index: 1; }
/* --vf: força da luz; --vs: abertura do feixe; --vg: cor/força da vinheta; --sombra: apoio sob o relógio (modo claro). */
:root { --vf: 1; --vs: 1; --vg: 5, 6, 7; --va: .42; --vv: 55%; --sombra: 0; --grao-modo: overlay; --grao-forca: .07; }
.vitrine { left: 0; top: 0; width: 1000px; height: 1000px; border-radius: 50%; transform-origin: 0 0; will-change: transform;
  background: radial-gradient(circle, rgba(var(--luz, 232, 222, 204), calc(.085 * var(--vf))) 0%, rgba(var(--luz, 232, 222, 204), calc(.045 * var(--vf))) calc(28% * var(--vs)), rgba(var(--luz, 232, 222, 204), calc(.015 * var(--vf))) calc(50% * var(--vs)), rgba(var(--luz, 232, 222, 204), 0) calc(70% * var(--vs)));
  transform: translate3d(calc(50vw - 500px), calc(50svh - 500px), 0); }
.vitrine::after { content: ''; position: absolute; left: 33%; top: 56%; width: 34%; height: 10%; border-radius: 50%; opacity: var(--sombra); background: radial-gradient(ellipse at center, rgba(20,20,22,.13) 0%, rgba(20,20,22,.05) 45%, rgba(20,20,22,0) 72%); }
.vinheta { inset: 0; background: radial-gradient(ellipse 85% 80% at 50% 50%, rgba(var(--vg), 0) var(--vv), rgba(var(--vg), var(--va)) 100%); }
.grao { inset: 0; opacity: var(--grao-forca); mix-blend-mode: var(--grao-modo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.end-anchor { position: absolute; top: calc(100% - 100svh); left: 0; width: 1px; height: 1px; }

.headline { position: absolute; z-index: 2; left: 5.4vw; top: clamp(130px, 20svh, 250px); pointer-events: none; clip-path: inset(var(--headline-clip) 0 0 0); transform: translateY(calc(-1 * var(--headline-shift))); }
.headline h1 { margin: 0; font-size: clamp(40px, 3.6vw, 70px); font-weight: 760; line-height: .93; letter-spacing: -.045em; }
.headline h1 span { display: block; }
.headline h1 span + span { margin-top: .04em; }
.headline em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
.living-line { position: absolute; z-index: 2; left: 5.4vw; top: var(--line-top); width: var(--line-width); height: 1px; background: var(--paper); opacity: var(--line-opacity); transform-origin: left; pointer-events: none; }

.contact { position: absolute; z-index: 3; left: 5.4vw; top: 44%; width: min(400px, 25vw); opacity: var(--contact-opacity); clip-path: inset(var(--contact-clip) 0 0 0); }
.js-loading:not(.js-loaded) .contact, .js-loading:not(.js-loaded) .attribution { opacity: 0; pointer-events: none; }
.is-enhanced .stage { --contact-opacity: 0; --contact-clip: 100%; }
.is-enhanced .contact { pointer-events: none; }
.contact h2 { margin: 0 0 20px; font-size: clamp(40px, 5vw, 88px); font-weight: 750; line-height: .88; letter-spacing: -.045em; }
.contact-links { width: 100%; border-top: 1px solid var(--line); }
.contact-links a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.55vw, 26px); font-weight: 500; letter-spacing: -.035em; }
.contact-links a span { font-size: .9em; transition: transform .18s ease; }
.contact-links a:hover span { transform: translate(3px, -3px); }
.attribution { position: relative; padding: 20px 5.4vw; color: rgba(236,235,231,.65); font-size: 10px; line-height: 1.6; letter-spacing: .02em; background: #17191b; }
.attribution a { text-decoration: underline; text-underline-offset: 2px; }
.is-enhanced .attribution { pointer-events: none; }
.is-enhanced .attribution.is-live { pointer-events: auto; }
.attribution a:hover { color: var(--paper); }

/* A complete editorial fallback when JavaScript or the manifest is unavailable. */
body:not(.is-enhanced) .poster img { transform: scale(.85); }
body:not(.is-enhanced) .contact { top: 46%; width: min(360px, 29vw); }
body:not(.is-enhanced) .contact h2 { font-size: clamp(52px, 5vw, 80px); }

@media (max-width: 700px), (orientation: portrait) {
  .site-header { height: 65px; padding: 0 22px; }
  .brand { width: 118px; }
  .site-header nav { gap: 18px; }
  .site-header nav a { font-size: 9px; letter-spacing: .045em; }
  .site-header nav a span[aria-hidden] { font-size: 13px; }
  .nav-progress { bottom: 12px; }
  .headline { left: 6.5vw; right: 6.5vw; top: clamp(75px, 9.2svh, 115px); }
  .headline h1 { font-size: clamp(39px, 10.5vw, 60px); line-height: .93; }
  .living-line { left: 6.5vw; top: var(--line-top); }
  .contact { left: 6.5vw; right: 6.5vw; top: 11%; width: auto; }
  .contact h2 { font-size: clamp(51px, 12vw, 76px); margin-bottom: 12px; }
  .contact-links a { font-size: 18px; padding: 7px 0; }
  .attribution { padding: 16px 6.5vw; font-size: 10px; }
}

@media (orientation: portrait) and (max-height: 700px) {
  .contact { top: 82px; }
  .contact h2 { font-size: 36px; margin-bottom: 4px; }
  .contact-links a { font-size: 16px; padding: 5px 0; }
}

@media (max-width: 360px) and (orientation: portrait) {
  .brand { width: 106px; }
  .headline { top: 72px; }
  .headline h1 { font-size: 35px; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .site-header { height: 54px; padding: 0 24px; }
  .brand { width: 100px; }
  .headline { top: 22%; }
  .headline h1 { font-size: clamp(26px, 4.4vw, 36px); }
  .contact { top: 32.5%; width: min(175px, 30vw); }
  .contact h2 { font-size: 32px; margin-bottom: 4px; }
  .contact-links a { font-size: 15px; padding: 5px 0; }
  .attribution { padding: 12px 24px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-enhanced .experience { height: 100svh; }
  #watch-sequence { display: none; }
  .headline { top: 13%; clip-path: none !important; transform: none !important; }
  .headline h1 { font-size: clamp(39px, 5vw, 76px); }
  .contact { opacity: 1 !important; clip-path: none !important; pointer-events: auto !important; }
  .is-enhanced .attribution { opacity: 1 !important; pointer-events: auto !important; }
  .living-line, .nav-progress { display: none; }
  .contact-links a span { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (orientation: portrait) {
  .poster img { transform: scale(.78) !important; }
  .headline { top: 77px; }
  .headline h1 { font-size: clamp(20px, 3.3vw, 26px); line-height: 1; letter-spacing: -.04em; }
  .headline h1 span { display: inline; margin-right: .2em; }
  .contact { top: 112px; }
  .contact h2 { font-size: 28px; margin-bottom: 4px; }
  .contact-links a { font-size: 16px; padding: 4px 0; }
}

@media (orientation: portrait) {
  body:not(.is-enhanced) .poster img { transform: scale(.78); }
  body:not(.is-enhanced) .headline { top: 77px; }
  body:not(.is-enhanced) .headline h1 { font-size: clamp(20px, 3.3vw, 26px); line-height: 1; letter-spacing: -.04em; }
  body:not(.is-enhanced) .headline h1 span { display: inline; margin-right: .2em; }
  body:not(.is-enhanced) .contact { top: 112px; width: auto; }
  body:not(.is-enhanced) .contact h2 { font-size: 28px; margin-bottom: 4px; }
  body:not(.is-enhanced) .contact-links a { font-size: 16px; padding: 4px 0; }
}