/* TV Wall Miami — site styles, "night" direction.
   Charcoal is the main ground (about half the page), bone bands carry the reading sections, walnut is the
   action only, the LED tone is the one line of light. Type: Archivo, expanded for headings. */

:root {
  --night: #2e2b27;       /* carbón: main ground */
  --night-2: #25231f;     /* one step darker, for alternating dark bands */
  --cream: #f3f0eb;       /* text on dark */
  --cream-soft: #cfc6b9;  /* secondary text on dark */
  --bone: #ece8e1;        /* light reading sections */
  --bone-2: #e2dbd0;      /* one step on bone */
  --ink: #2e2b27;         /* text on light */
  --ink-soft: #5b544b;
  --walnut: #9c6b4e;      /* the action */
  --walnut-dark: #835a40;
  --walnut-text: #7d5339; /* walnut for text links on light */
  --led: #f2c98a;         /* the line of light */

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Herr Von Muellerhoff", cursive;

  /* five sizes */
  --s-display: clamp(3.25rem, 7.4vw, 7rem);
  --s-head: clamp(2.125rem, 3.9vw, 3.5rem);
  --s-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --s-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --s-small: 0.875rem;

  --margin: clamp(1.25rem, 5vw, 5rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --section: clamp(5.5rem, 11vw, 11rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--font); font-size: var(--s-body); line-height: 1.55; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 1rem; }
::selection { background: var(--led); color: var(--night); }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
/* Small headings and card titles read as text, not as display type. */
.step h3, .foot__cols h3 { font-family: var(--font); text-transform: none; }
.service h3, .faq summary { text-transform: none; }
/* "Miami" in the hero is set as a signature in LED light. */
.hero h1 .line:nth-child(2) { overflow: visible; }
.hero h1 .line:nth-child(2) > span { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.5em; line-height: 0.72; color: var(--led); padding-left: 0.5em; }
p { max-width: 62ch; text-wrap: pretty; }

.wrap { padding-inline: var(--margin); }
.light { background: var(--bone); color: var(--ink); }
.light :focus-visible { outline-color: var(--walnut); }
.section { padding-block: calc(var(--section) / 2); }
.head { font-size: var(--s-head); line-height: 1.04; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; gap: 0.9rem; min-height: 3.5rem; padding: 0.4rem 0.4rem 0.4rem 1.6rem; border-radius: 999px; background: var(--walnut); color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem; letter-spacing: 0.005em; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 220ms ease; }
.button__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cream); color: var(--walnut-dark); transition: transform 480ms var(--ease-out); }
.button:active { transform: scale(0.97); }
.bar__cta { min-height: 2.9rem; padding: 0.3rem 0.3rem 0.3rem 1.1rem; gap: 0.7rem; font-size: 0.9375rem; }
.bar__cta .button__icon { width: 2.25rem; height: 2.25rem; }
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
.light .link { color: var(--walnut-text); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--walnut-dark); }
  .button:hover .button__icon { transform: rotate(-12deg) scale(1.06); }
  .link:hover { color: var(--led); }
  .light .link:hover { color: var(--ink); }
}

/* ---------- header ---------- */
.bar { position: absolute; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1rem var(--margin); color: var(--cream); }
.bar__lang { justify-self: start; text-decoration: none; padding: 0.6rem 0; font-size: 0.9375rem; }
.bar__lang span { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; }
.bar__cta { justify-self: end; }
.wordmark { display: block; }
.wordmark img { height: 76px; width: auto; }

/* ---------- hero: the wall at night ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--night-2); }
.hero__pic { position: absolute; inset: 0; margin: 0; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__pic::after { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 23, 0.5); }
.hero__text { position: relative; z-index: 2; padding: 9rem var(--margin) clamp(2.5rem, 7vh, 4.5rem); max-width: 72rem; }
.hero h1 { font-size: var(--s-display); line-height: 0.96; letter-spacing: -0.03em; }
.hero h1 .line { display: block; }
.hero__led { display: block; height: 3px; width: min(26rem, 60%); margin: 1.75rem 0 0; background: var(--led); transform-origin: left center; }
.hero__copy { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-start; gap: 1.5rem 3.5rem; margin-top: 1.75rem; }
.hero__copy p { font-size: var(--s-lead); line-height: 1.4; max-width: 30ch; }
.hero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; font-size: var(--s-small); color: var(--cream-soft); }
.hero__caption { position: absolute; right: var(--margin); bottom: 1.25rem; z-index: 2; font-size: var(--s-small); color: var(--cream-soft); }

/* ---------- window scene (finished composition first) ---------- */
.window { background: var(--night-2); color: var(--cream); }
.window .scene-stage { position: relative; }
.window__pic { position: relative; margin: 0; height: 86svh; min-height: 460px; overflow: hidden; }
.window__pic img { width: 100%; height: 100%; object-fit: cover; }
.window__pic::after { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 23, 0.32); }
.window__text { position: absolute; left: var(--margin); right: var(--margin); bottom: clamp(2rem, 8vh, 5rem); z-index: 2; }
.window__text h2 { font-size: var(--s-head); line-height: 1.04; max-width: 16ch; }
.window__text p { margin-top: 1.1rem; font-size: var(--s-lead); line-height: 1.4; max-width: 32ch; }
.window__text small { display: block; margin-top: 1rem; font-size: var(--s-small); color: var(--cream-soft); }
html.js .window.is-live .window__pic { position: absolute; inset: 0; height: 100%; }

/* ---------- services: four large pictures ---------- */
.services__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.services__top h2 { grid-column: 1 / 8; }
.services__top p { grid-column: 8 / 13; font-size: var(--s-lead); line-height: 1.4; }
.services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem) var(--gutter); }
.service:nth-child(even) { margin-top: clamp(4rem, 10vw, 9rem); }
.service figure { margin: 0; overflow: hidden; }
.service img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 900ms var(--ease-out); }
.service h3 { margin-top: 1.4rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; }
.service p { margin-top: 0.6rem; max-width: 40ch; }
@media (hover: hover) and (pointer: fine) { .service:hover img { transform: scale(1.04); } }

/* ---------- materials scene ---------- */
.materials { background: var(--night); }
.materials > .scene-stage { padding-block: calc(var(--section) / 2); }
.materials__top { padding-inline: var(--margin); display: flex; justify-content: space-between; align-items: end; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.materials__top p { max-width: 44ch; color: var(--cream-soft); }
.band { display: flex; gap: 6px; height: 64svh; min-height: 400px; padding-inline: var(--margin); }
.band__panel { position: relative; flex: var(--g) 1 0; margin: 0; display: flex; flex-direction: column; min-width: 0; transition: flex-grow 500ms var(--ease-in-out); }
.band__img { position: relative; flex: 1; overflow: hidden; }
.band__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__label { padding-top: 0.8rem; font-size: var(--s-small); line-height: 1.35; color: var(--cream); }
.band__label span { display: block; color: var(--cream-soft); }
@media (hover: hover) and (pointer: fine) { .band:hover .band__panel:hover { flex-grow: 5; } }
html.js .materials.is-live > .scene-stage { display: flex; flex-direction: column; justify-content: center; }
html.js .materials.is-live .band { height: 56svh; }

/* ---------- build your wall ---------- */
.builder { background: var(--night-2); }
.builder__title { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 48rem; }
.builder__title p { margin-top: 1rem; color: var(--cream-soft); font-size: var(--s-lead); line-height: 1.4; }
.builder__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.builder__stage { margin: 0; }
.builder__view { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #1d1b18; }
.builder__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 320ms var(--ease-out); }
.builder__view img.is-back { opacity: 0; }
.builder__tag { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.6rem; background: rgba(28, 26, 23, 0.72); color: var(--cream); font-size: var(--s-small); }
.builder__stage figcaption { margin-top: 0.8rem; font-size: var(--s-small); color: var(--cream-soft); }
.builder__form { display: grid; gap: 1.6rem; }
.builder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.builder legend { padding: 0; margin-bottom: 0.7rem; font-weight: 600; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.swatches--two { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch img { width: 100%; aspect-ratio: 1; object-fit: cover; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 180ms ease, transform 140ms var(--ease-out); }
.swatch span { display: block; margin-top: 0.4rem; font-size: var(--s-small); line-height: 1.25; color: var(--cream-soft); }
.swatch input:checked ~ img { outline-color: var(--led); }
.swatch input:checked ~ span { color: var(--cream); }
.swatch input:focus-visible ~ img { outline-color: var(--cream); }
.swatch:active img { transform: scale(0.96); }
.toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; background: #3a3631; color: var(--cream); transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.chip input:checked + span { background: var(--cream); color: var(--night); }
.chip input:focus-visible + span { outline: 2px solid var(--led); outline-offset: 2px; }
.chip:active span { transform: scale(0.97); }
.builder__send { justify-self: start; }

/* ---------- how it works ---------- */
.steps__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.step figure { margin: 0 0 1.1rem; overflow: hidden; }
.step img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.step h3 { font-size: 1.125rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.step p { margin-top: 0.45rem; font-size: 1rem; }

/* ---------- gallery: one large picture per screen ---------- */
.gallery { background: var(--night); padding-block: calc(var(--section) / 2); }
.gallery__top { padding-inline: var(--margin); display: flex; justify-content: space-between; align-items: end; gap: 1.25rem 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.gallery__top p { max-width: 40ch; color: var(--cream-soft); }
.gallery .reel { display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--margin) 0.75rem; scroll-padding-inline: var(--margin); scrollbar-width: thin; scrollbar-color: #5a544c transparent; }
.reel li { flex: 0 0 auto; scroll-snap-align: start; }
.reel figure { margin: 0; }
.reel img { height: 76svh; max-height: 800px; width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.reel figcaption { margin-top: 0.8rem; font-size: var(--s-small); color: var(--cream-soft); }
.reel figcaption b { display: block; color: var(--cream); font-weight: 500; }

/* ---------- areas ---------- */
.areas__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.areas h2 { grid-column: 1 / 7; }
.areas__text { grid-column: 7 / 13; }
.areas__cities { font-size: var(--s-lead); line-height: 1.45; }
.areas__text .button { margin-top: 1.75rem; }

/* ---------- faq ---------- */
.faq__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.faq h2 { grid-column: 1 / 5; }
.faq__list { grid-column: 5 / 13; display: grid; gap: 4px; }
.faq details { padding: 0.9rem 1.25rem; background: var(--bone-2); transition: background-color 220ms ease; }
.faq details[open] { background: #d9d1c4; }
.faq summary { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; cursor: pointer; list-style: none; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.35; padding-block: 0.4rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform 240ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { max-width: 56ch; padding: 0.4rem 0 0.8rem; }

/* ---------- closing ---------- */
.cta { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; background: var(--night-2); }
.cta__pic { position: absolute; inset: 0; margin: 0; }
.cta__pic img { width: 100%; height: 100%; object-fit: cover; }
.cta__pic::after { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 23, 0.5); }
.cta__pic figcaption { position: absolute; right: var(--margin); top: 1.25rem; z-index: 2; font-size: var(--s-small); color: var(--cream-soft); }
.cta__text { position: relative; z-index: 2; padding: 6rem var(--margin) clamp(2.5rem, 8vh, 5rem); max-width: 46rem; }
.cta__text h2 { font-size: var(--s-head); line-height: 1.04; }
.cta__text p { margin-top: 1rem; font-size: var(--s-lead); line-height: 1.4; max-width: 32ch; }
.cta__text .button { margin-top: 2rem; }

.foot { background: var(--night-2); color: var(--cream); padding: clamp(3.5rem, 7vw, 6rem) var(--margin) 2rem; }
.foot__logo { width: min(440px, 70vw); height: auto; }
.foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(3rem, 6vw, 5rem); }
.foot__ways { grid-column: 1 / 6; display: grid; gap: 0.4rem; align-content: start; }
.foot__ways a { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-stretch: 125%; line-height: 1.2; text-decoration: none; color: var(--cream); }
.foot__ways a:hover { color: var(--led); }
.foot__cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; font-size: 0.9375rem; }
.foot__cols h3 { font-size: 0.9375rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.foot__cols li + li { margin-top: 0.1rem; }
.foot__cols a { display: inline-block; padding: 0.55rem 0; text-decoration: none; color: var(--cream-soft); }
.foot__legal a { display: inline-block; padding: 0.55rem 0; }
.foot__law { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.foot__law a { color: var(--cream-soft); }
.foot__law a:hover { color: var(--cream); }
.foot__cols a:hover { color: var(--cream); }
.foot__legal { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(3rem, 6vw, 5rem); font-size: var(--s-small); color: var(--cream-soft); }

/* sticky quote bar on phones */
.dock { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 64em) {
  .builder__grid { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .faq h2 { grid-column: 1 / 13; margin-bottom: 2rem; }
  .faq__list { grid-column: 1 / 13; }
  .foot__ways { grid-column: 1 / 13; }
  .foot__cols { grid-column: 1 / 13; margin-top: 3rem; }
}

/* ---------- phone ---------- */
@media (max-width: 47.99em) {
  :root { --margin: 20px; --section: 5.5rem; }
  .wordmark img { height: 58px; }
  .bar__lang { font-size: 0.875rem; }
  .bar__cta { display: none; }
  .hero { min-height: 92svh; }
  .hero__text { padding-top: 7rem; padding-bottom: 4.5rem; }
  .hero h1 { font-size: 13.5vw; }
  .hero__copy { margin-top: 1.25rem; }
  .hero__meta { width: 100%; }
  .hero__caption { left: var(--margin); right: auto; bottom: 1.25rem; }
  .services__top { display: block; }
  .services__top p { margin-top: 1rem; }
  .services__grid { grid-template-columns: 1fr; gap: 3rem; }
  .service:nth-child(even) { margin-top: 0; }
  .service:nth-child(even) figure { width: 86%; margin-left: auto; }
  .materials__top { margin-bottom: 1.5rem; }
  .band { flex-wrap: wrap; height: auto; min-height: 0; }
  .band__panel { flex: none; width: calc(50% - 3px); }
  .band__img { flex: none; aspect-ratio: 3 / 4; }
  html.js .materials.is-live .band { height: auto; }
  html.js .materials.is-live .band__img { aspect-ratio: 4 / 5; }
  .builder__view { position: sticky; top: 0; z-index: 3; }
  .steps__list { grid-template-columns: 1fr; gap: 2rem; }
  .step { display: grid; grid-template-columns: 38% 1fr; gap: 1rem; align-items: start; }
  .step figure { margin: 0; }
  .step img { aspect-ratio: 1; }
  .reel img { height: auto; width: 82vw; }
  .areas__inner { display: block; }
  .areas__text { margin-top: 1.5rem; }
  .faq__inner { display: block; }
  .faq details { padding-inline: 1rem; }
  .cta { min-height: 80svh; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot { padding-bottom: 7rem; }
  .dock { display: block; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; transform: translate(-50%, 160%); transition: transform 380ms var(--ease-out); }
  .dock.is-on { transform: translate(-50%, 0); }
  .dock { padding: 6px; border-radius: 999px; background: var(--night-2); }
}

/* ---------- motion (content stays visible without JavaScript) ---------- */
.hero h1 .line { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero h1 .line > span { display: block; }
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.words .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .line > span { transform: translateY(105%); animation: rise 1000ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
  .js .hero__led { transform: scaleX(0); animation: led 1400ms var(--ease-in-out) 650ms forwards; }
  .js .hero__copy, .js .hero__caption { opacity: 0; animation: fade 800ms var(--ease-out) 900ms forwards; }
  .hero__pic img { animation: settle 2400ms var(--ease-out) both; }
  .js .words .w > span { transform: translateY(108%); transition: transform 900ms var(--ease-expo); transition-delay: calc(var(--w, 0) * 70ms); }
  .js .words.words-in .w > span { transform: none; }
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes rise { to { transform: none; } }
@keyframes led { to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

/* gallery as a grid where a carousel would cut pictures at the edge */
@media (max-width: 64em) {
  .gallery .reel { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); overflow: visible; padding-bottom: 0; }
  .gallery .reel img { height: auto; width: 100%; max-height: none; }
}
@media (max-width: 47.99em) { .gallery .reel { grid-template-columns: 1fr; } .gallery .reel li:nth-child(even) img { width: 86%; margin-left: auto; } }

/* ---------- opening: the wall goes up slat by slat, the LED turns on, the logo lands (about 5 s) ---------- */
.intro { display: none; }
html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 100; background: #181614; overflow: hidden; }
.intro__wall, .intro__lit { position: absolute; inset: 0; }
.intro__slat { position: absolute; top: 0; bottom: 0; overflow: hidden; transform: translateY(102%); animation: slat-up 1100ms var(--ease-expo) forwards; animation-delay: calc(150ms + var(--i) * 55ms); }
.intro__slat > div { position: absolute; top: 0; height: 100%; background-size: cover; background-position: 50% 50%; }
.intro__lit { background-size: cover; background-position: 50% 50%; opacity: 0; animation: lit 900ms ease-out 1650ms forwards; }
.intro__lit::after { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 16, 0); animation: dim 900ms var(--ease-out) 2250ms forwards; }
.intro__mark { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(300px, 62vw); transform: translate(-50%, -46%) scale(0.94); opacity: 0; animation: mark 900ms var(--ease-expo) 2350ms forwards; }
.intro__mark img { width: 100%; height: auto; }
.intro__led { display: block; height: 3px; margin: 1.4rem auto 0; width: 72%; background: var(--led); transform: scaleX(0); animation: led 900ms var(--ease-in-out) 2900ms forwards; }
.intro__skip { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(243, 240, 235, 0.12); color: var(--cream); font-size: 0.875rem; }
.intro__skip:hover { background: rgba(243, 240, 235, 0.22); }
html.intro-exit .intro { animation: lift 650ms var(--ease-in-out) forwards; }
@keyframes slat-up { to { transform: none; } }
@keyframes lit { 0% { opacity: 0; } 35% { opacity: 0.55; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
@keyframes dim { to { background: rgba(20, 18, 16, 0.58); } }
@keyframes mark { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lift { to { clip-path: inset(0 0 100% 0); } }
html.intro-exit .intro { clip-path: inset(0 0 0 0); }