/* Maison Automobile — coming-soon page. */

:root {
  --ink: #090b0b;
  --paper: #f1efe9;
  --gold: #ceb898;
  --muted: #b6b9b8;
  --progress: 0;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 7px; }
::selection { background: var(--gold); color: var(--ink); }

.eyebrow { font-size: 9px; letter-spacing: .25em; line-height: 1.8; color: var(--gold); font-weight: 500; }
h1 { font-size: clamp(66px, 7.5vw, 120px); letter-spacing: -.065em; font-weight: 300; line-height: 1.02; margin: 0; }
h2 { font-weight: 300; font-size: clamp(34px, 3.6vw, 60px); line-height: 1.2; letter-spacing: -.045em; margin: 0; }
.accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Header ---------- */

.header { position: fixed; z-index: 20; inset: 0 0 auto; padding: 30px 5%; display: flex; align-items: center; justify-content: space-between; transition: background .5s, padding .5s; }
.header.scrolled { background: #090b0be8; padding-top: 17px; padding-bottom: 17px; backdrop-filter: blur(16px); border-bottom: 1px solid #ffffff15; }
.brand { font-size: 20px; letter-spacing: .25em; line-height: 1; }
.brand small { display: block; font-size: 8px; letter-spacing: .55em; margin-top: 9px; }
.header-right { display: flex; align-items: center; gap: 25px; }
.site-status { font-size: 9px; letter-spacing: .2em; display: flex; align-items: center; gap: 10px; }
.site-status i { height: 4px; width: 4px; background: var(--gold); border-radius: 50%; }
.motion-toggle { border: 1px solid #ffffff40; border-radius: 50%; color: var(--paper); background: #0003; width: 44px; height: 44px; cursor: pointer; }
.motion-toggle:hover { background: #ffffff20; }

/* ---------- Opening curtain ---------- */

.opening { position: fixed; z-index: 50; inset: 0; background: #090b0b; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; animation: curtain 1.1s cubic-bezier(.76, 0, .24, 1) 1s both; }
.opening > span { font-size: clamp(30px, 5vw, 64px); letter-spacing: .3em; padding-left: .3em; animation: logo-in .8s both; }
.opening small { font-size: 10px; letter-spacing: .6em; margin-top: 16px; }
.opening i { width: 80px; height: 1px; margin-top: 30px; background: var(--gold); transform-origin: left; animation: line-in 1s both; }

/* Returning visitors skip the curtain; the same entrance starts 0.9 s earlier. */
.returning-visitor .opening { display: none; }
.returning-visitor .hero-media { animation-delay: 0s; }
.returning-visitor .light-pass { animation-delay: .4s; }
.returning-visitor .line > span { animation-delay: .45s; }
.returning-visitor .line:nth-child(2) > span { animation-delay: .6s; }
.returning-visitor .line:nth-child(3) > span { animation-delay: .75s; }
.returning-visitor .entrance { animation-delay: .9s; }

/* ---------- Hero ---------- */

.hero { position: relative; min-height: 800px; height: 100svh; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #090b0b; animation: media-in 2.5s cubic-bezier(.16, 1, .3, 1) .9s both; }

/* Five-view film: one slide is selected and slowly drifts, the others fade out. */
.cinema-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%; opacity: 0; transform: scale(1.02); transition: opacity 1.6s ease; will-change: opacity, transform; }
.cinema-slide.selected { opacity: 1; animation: cinema-drift 8s linear both; }
/* Studio entrance is composed with empty backdrop on the left for the title. */
.cinema-slide:first-child { object-position: right center; }
.cinema-slide:nth-child(2) { object-position: center 45%; }
.cinema-slide:nth-child(3) { object-position: 70% center; }
.cinema-slide:nth-child(4) { object-position: 60% center; }
.cinema-slide:nth-child(5) { object-position: center; }

.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #080b0be8, #080b0b80 30%, #080b0b15 70%), linear-gradient(0deg, #090b0b 0%, transparent 38%, #0003 100%); }
.hero:has(.cinema-slide:first-child.selected) .hero-shade { background: linear-gradient(90deg, #000d 0%, #0004 34%, transparent 65%), linear-gradient(0deg, #090b0b, transparent 25%); }
.light-pass { position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, transparent 35%, #e8d3ac13 48%, transparent 60%); transform: translateX(-100%); animation: light-sweep 3s ease 1.3s both; pointer-events: none; }

.hero-copy { position: absolute; z-index: 2; left: 8%; top: 24%; max-width: 650px; pointer-events: none; }
.hero-copy .eyebrow { margin: 0 0 28px; }
.line { display: block; overflow: hidden; padding-bottom: 8px; margin-bottom: -8px; }
.line > span { display: block; animation: title-in 1.35s cubic-bezier(.16, 1, .3, 1) 1.35s both; }
.line:nth-child(2) > span { animation-delay: 1.5s; }
.line:nth-child(3) > span { animation-delay: 1.65s; }
.accent { font-family: Italiana, Georgia, serif; color: var(--gold); font-size: 1.13em; letter-spacing: -.035em; }
.hero-caption { font-size: 12px; line-height: 1.9; color: #d6d8d6; margin-top: 30px; }
.entrance { animation: fade-in 1.3s ease 1.8s both; }

.hero-bottom { position: absolute; z-index: 3; bottom: 42px; left: 5%; right: 5%; display: flex; align-items: center; justify-content: space-between; }
.explore { display: flex; align-items: center; gap: 17px; font-size: 9px; letter-spacing: .17em; min-height: 44px; }
.explore > span:last-child { font-size: 18px; margin-left: 20px; transition: transform .3s; }
.explore:hover > span:last-child { transform: translateY(5px); }
.scroll-track { display: block; height: 42px; width: 1px; background: #ffffff30; overflow: hidden; }
.scroll-track i { display: block; width: 1px; height: 20px; background: var(--gold); animation: scroll-cue 2.2s ease-in-out infinite; }
.edition { font-size: 8px; letter-spacing: .18em; line-height: 2; text-align: right; }
.edition small { color: var(--muted); font-size: 7px; }

.film-controls { position: absolute; z-index: 3; right: 5%; bottom: 130px; text-align: right; }
.film-caption { font-size: 8px; letter-spacing: .2em; color: #f1efe9; }
.film-buttons { display: flex; gap: 13px; margin-top: 12px; }
.film-dot { border: 0; background: transparent; color: #b9bcb9; min-width: 44px; min-height: 44px; padding: 8px 5px; cursor: pointer; text-align: left; }
.film-dot span { font-size: 8px; letter-spacing: .1em; }
.film-dot i { display: block; margin-top: 10px; height: 2px; background: #ffffff50; position: relative; overflow: hidden; }
.film-dot i:after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.film-dot.active { color: var(--gold); }
.film-dot.active i:after { animation: film-progress 7s linear both; }

/* ---------- Introduction ---------- */

.introduction { padding: 130px 8%; display: grid; grid-template-columns: 1fr 2.5fr; gap: 60px; }
.introduction > .eyebrow { padding-top: 12px; }
.introduction h2 span { color: #858e8c; }
.intro-bottom { display: flex; gap: 35px; margin-top: 40px; align-items: flex-start; }
.fine-line { height: 1px; width: 50px; flex-shrink: 0; background: var(--gold); margin-top: 12px; }
.intro-bottom p { max-width: 450px; margin: 0; color: var(--muted); font-size: 12px; line-height: 2; }

/* ---------- Story: three sticky chapters driven by --progress ---------- */

.story { position: relative; height: 330svh; }
.story-stage { height: 100svh; min-height: 640px; position: sticky; top: 0; overflow: hidden; }
/* Images bleed 4% past the stage so the scroll zoom never reveals an edge. */
.detail-image { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: center; opacity: 0; filter: saturate(.65) brightness(.85); transform: scale(calc(1.12 + var(--progress) * .22)) translateX(calc(var(--progress) * -3%)); transition: opacity 1.2s ease; will-change: transform; }
.detail-image.selected { opacity: 1; }
.story-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #090b0bda, transparent 95%), linear-gradient(0deg, #090b0bf2, transparent 65%, #090b0b70); }
.story-label { position: absolute; left: 8%; top: 16%; }
.chapter-counter { position: absolute; right: 8%; top: 17%; font-size: 11px; letter-spacing: .2em; color: #a7aaa7; }
.chapter-counter span { color: var(--gold); font-size: 20px; margin-right: 8px; }
.chapter-display { position: absolute; left: 8%; top: 40%; transition: opacity .28s, transform .4s; }
.chapter-display.changing { opacity: 0; transform: translateY(18px); }
.chapter-kicker { font-size: 9px; letter-spacing: .23em; color: var(--gold); }
.chapter-title { font-weight: 300; font-size: clamp(48px, 7.5vw, 110px); letter-spacing: -.065em; margin: 20px 0; line-height: 1.15; }
.chapter-description { font-size: 13px; line-height: 2; color: #d4d6d3; }
.chapter-nav { position: absolute; bottom: 65px; left: 8%; right: 8%; display: flex; gap: 35px; }
.chapter-nav a { position: relative; flex: 1; padding-top: 24px; min-height: 52px; font-size: 9px; letter-spacing: .12em; color: #b7bab7; transition: color .4s; }
.chapter-nav a i { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #ffffff40; }
.chapter-nav a i:after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s; }
.chapter-nav a.active i:after { transform: scaleX(1); }
.chapter-nav a.active { color: var(--gold); }
.chapter-nav a span { margin-right: 20px; font-size: 8px; }
/* Invisible scroll anchors, one per chapter. */
.chapter-step { position: absolute; left: 0; height: 100svh; width: 1px; pointer-events: none; scroll-margin-top: 0; }
#sofisticacao { top: 0; }
#protecao { top: 110svh; }
#confianca { top: 220svh; }

/* ---------- Coming soon ---------- */

.coming { position: relative; overflow: hidden; min-height: 700px; padding: 140px 7% 110px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.coming-orbit { position: absolute; width: 700px; height: 700px; border: 1px solid #ceb89818; border-radius: 50%; top: 40px; left: calc(50% - 350px); pointer-events: none; }
.coming-orbit:before { content: ''; position: absolute; inset: 30px; border: 1px solid #ceb8980d; border-radius: 50%; }
.coming h2 { font-size: clamp(45px, 6vw, 90px); margin: 25px 0; z-index: 1; }
.coming h2 em { font-family: Italiana, Georgia, serif; font-weight: 400; color: var(--gold); }
.coming > p:not(.eyebrow) { font-size: 12px; line-height: 2; color: var(--muted); }
.back-top { display: flex; align-items: center; gap: 50px; font-size: 9px; letter-spacing: .16em; border-bottom: 1px solid #ceb89877; padding: 16px 0; margin-top: 35px; z-index: 1; }
.back-top span { font-size: 18px; }

/* ---------- Footer ---------- */

footer { border-top: 1px solid #ffffff18; margin: 0 5%; padding: 28px 0; display: flex; justify-content: space-between; gap: 20px; font-size: 8px; letter-spacing: .15em; color: #b6b9b6; }
.image-credit { margin: 0 5%; padding: 0 0 24px; color: #a4aaa6; font-size: 9px; line-height: 1.8; }
.image-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Scroll reveal ---------- */

.reveal { opacity: 1; }
.js-motion .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s, transform 1.1s; }
.js-motion .reveal.visible { opacity: 1; transform: none; }

/* ---------- Motion paused by the visitor ---------- */

.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state: paused !important; scroll-behavior: auto !important; }
.motion-paused .opening { display: none; }
.motion-paused .entrance, .motion-paused .line > span, .motion-paused .hero-media, .motion-paused .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
.motion-paused .cinema-slide, .motion-paused .detail-image { transform: none !important; }
.motion-paused .cinema-slide.selected { animation: none !important; }
.motion-paused .film-dot.active i:after { transform: scaleX(1); animation: none !important; }
.motion-paused .chapter-display { transition: none; }
.motion-paused .chapter-display.changing { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */

@keyframes curtain { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes logo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes media-in { from { filter: brightness(.3); transform: scale(1.12); } to { filter: brightness(1); transform: scale(1); } }
@keyframes title-in { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes light-sweep { to { transform: translateX(100%); } }
@keyframes scroll-cue { 0% { transform: translateY(-25px); } 70%, 100% { transform: translateY(50px); } }
@keyframes cinema-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.10) translateX(-1%); } }
@keyframes film-progress { to { transform: scaleX(1); } }

/* ---------- Large screens ---------- */

@media (min-width: 1800px) {
  .hero-copy { left: 10%; }
}

/* ---------- Portrait tablets ---------- */

@media (min-width: 701px) and (orientation: portrait) {
  /* The right-anchored desktop crop would leave only the rear of the vehicle. */
  .cinema-slide:first-child { object-position: 68% center; }
}

/* ---------- Phones ---------- */

@media (max-width: 700px) {
  .header { padding: 24px 6%; }
  .brand { font-size: 16px; }
  .brand small { font-size: 7px; }
  .header-right { gap: 14px; }
  .site-status { font-size: 8px; }

  .hero { height: 100svh; min-height: 740px; }
  .cinema-slide { object-position: 53% center; }
  .cinema-slide:first-child { object-position: 63% center; }
  /* Whole-vehicle views would be cropped to a fragment in portrait: show them
     complete under the title instead, with edges fading into the black page. */
  .cinema-slide:nth-child(2), .cinema-slide:nth-child(3) { inset: auto 0 15% 0; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
  .cinema-slide:nth-child(4) { object-position: 45% center; }
  .cinema-slide:nth-child(5) { object-position: 55% center; }
  .hero-shade { background: linear-gradient(90deg, #090b0bd5, #090b0b45), linear-gradient(0deg, #090b0b, transparent 70%); }
  /* The complete-vehicle views sit below the copy, so they need far less shade. */
  .hero:has(.cinema-slide:nth-child(2).selected) .hero-shade, .hero:has(.cinema-slide:nth-child(3).selected) .hero-shade { background: linear-gradient(0deg, #090b0b, transparent 22%); }
  .hero-copy { left: 7%; top: 20%; }
  h1 { font-size: clamp(59px, 14vw, 88px); }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: .2em; margin-bottom: 25px; }
  .hero-caption { font-size: 11px; margin-top: 22px; }
  .hero-bottom { left: 7%; right: 7%; bottom: 25px; }
  .edition { display: none; }
  .film-controls { left: 7%; right: 7%; bottom: 100px; text-align: left; }
  .film-caption { font-size: 7px; }
  .film-buttons { gap: 12px; margin-top: 5px; max-width: 300px; }
  .film-dot { flex: 1; }

  .introduction { padding: 80px 7%; grid-template-columns: 1fr; gap: 25px; }
  .introduction h2 { font-size: 35px; }
  .intro-bottom { gap: 20px; margin-top: 28px; }
  .fine-line { width: 25px; }

  .story { height: 300svh; }
  .story-stage { min-height: 620px; }
  .story-shade { background: linear-gradient(90deg, #090b0bba, #090b0b33), linear-gradient(0deg, #090b0b, transparent 85%); }
  .story-label { left: 7%; top: 17%; }
  .chapter-counter { right: 7%; top: 18%; }
  .chapter-display { left: 7%; top: 40%; right: 5%; }
  .chapter-title { font-size: clamp(40px, 10vw, 65px); letter-spacing: -.055em; }
  .chapter-description { font-size: 12px; }
  .chapter-nav { left: 7%; right: 7%; gap: 15px; bottom: 40px; }
  .chapter-nav a { font-size: 7px; letter-spacing: .03em; line-height: 1.8; padding-top: 18px; }
  .chapter-nav a span { display: block; margin: 0 0 6px; }
  #protecao { top: 100svh; }
  #confianca { top: 200svh; }

  .coming { min-height: 650px; padding: 100px 7% 80px; }
  .coming h2 { font-size: 46px; }
  .coming .eyebrow { font-size: 8px; }
  .coming-orbit { width: 500px; height: 500px; left: calc(50% - 250px); top: 80px; }

  footer { font-size: 7px; flex-wrap: wrap; }
  footer > span:nth-child(2) { order: 3; flex-basis: 100%; }
  .image-credit { font-size: 8px; }
}

/* ---------- System reduced-motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .opening { display: none; }
  .cinema-slide, .detail-image { transform: none !important; }
  .js-motion .reveal { opacity: 1; transform: none; }
  .chapter-display.changing { opacity: 1; transform: none; }
  .film-dot.active i:after { transform: scaleX(1); }
}