/* Three more scenes for the home page (her word, 5 Oct 2026), from the three
   recordings she sent that evening:

     5 · Build it   the car configurator: one garment on a dark stage, the cuts
                    as tabs across the top, the colors named underneath
     6 · Lookbook   the split shop: photo on one side, the design's name, price
                    and a counter on the other, one design at a time
     7 · Marquee    the name running across the screen as a giant word, her
                    models standing over it with the background taking the
                    design's own color

   They carry their own faces and colors, like the first four. */

.cfg, .look, .mrq {
  --serif: 'Fraunces', Georgia, serif;
  --display: 'Anton', sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --price: 'Space Grotesk', system-ui, sans-serif;
  --navy: #001E2D; --ink: #003049; --cream: #EAE2B7; --amber: #FFB627; --flag: #D62828; --red: #AE2012; --paper: #F7F3E8;
}

/* ============================================================ 5 · Build it */
.cfg { position: relative; background: #11161a; color: #E7E4DC; padding: clamp(26px,4vh,44px) 0 clamp(40px,6vh,70px); overflow: hidden; }
.cfg-tabs { display: flex; gap: clamp(10px,2vw,30px); justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 20px; }
.cfg-tabs button { background: none; border: 0; color: inherit; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .55; transition: opacity .3s, background .3s, color .3s; }
.cfg-tabs button.on { opacity: 1; background: #F3F1EC; color: #11161a; }
.cfg-price { position: absolute; top: clamp(26px,4vh,44px); right: clamp(20px,4vw,54px); display: flex; align-items: center; gap: 16px; }
.cfg-price b { font: 700 clamp(15px,1.5vw,20px) var(--price); }
.cfg-price a { text-decoration: none; padding: 10px 16px; border-radius: 999px; background: #F3F1EC; color: #11161a;
  font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.cfg-stage { position: relative; display: grid; place-items: center; min-height: min(62vh, 560px); margin-top: clamp(14px,3vh,30px); }
.cfg-spot { position: absolute; width: min(70vh,620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  transform: scale(var(--spot,1)); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.cfg-shot { position: relative; z-index: 2; height: min(54vh, 460px); display: grid; place-items: center; }
.cfg-shot img { max-height: 100%; width: auto; filter: drop-shadow(0 40px 40px rgba(0,0,0,.5)); transition: opacity .45s, transform .9s cubic-bezier(.2,.7,.2,1); }
.cfg-shot.is-out img { opacity: 0; transform: translateY(14px) scale(.98); }
.cfg-colors { display: flex; gap: clamp(14px,3vw,46px); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: clamp(18px,3vh,34px); padding: 0 20px; }
.cfg-colors button { background: none; border: 0; color: inherit; cursor: pointer; display: grid; justify-items: center; gap: 10px;
  font: 500 clamp(12px,1.2vw,15px) var(--body); opacity: .45; transition: opacity .3s; }
.cfg-colors button i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.cfg-colors button.on { opacity: 1; font-weight: 700; }
.cfg-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(20px,3vh,34px) var(--edge) 0;
  font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
@media (max-width: 760px) { .cfg-price { position: static; justify-content: center; margin-top: 14px; } .cfg-shot { height: 42vh; } }

/* ============================================================ 6 · Lookbook */
.look { position: relative; background: var(--paper); color: var(--navy); display: grid; grid-template-columns: 1.05fr .95fr; min-height: min(96svh, 820px); overflow: hidden; }
.look-shot { position: relative; overflow: hidden; background: #ded8c8; }
.look-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  opacity: 0; transform: scale(1.04); transition: opacity .7s, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.look-shot img.on { opacity: 1; transform: none; }
.look-side { display: grid; align-content: center; gap: 18px; padding: var(--edge); position: relative; }
.look-eyebrow { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.look-name { margin: 0; font: 500 clamp(30px,3.6vw,56px)/1.05 var(--serif); }
.look-price { font: 700 clamp(16px,1.6vw,21px) var(--price); }
.look-text { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.7; opacity: .8; }
.look-go { justify-self: start; text-decoration: none; padding: 14px 24px; border: 1px solid currentColor; border-radius: 999px;
  font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s; }
.look-go:hover { background: var(--navy); color: var(--cream); }
.look-nav { position: absolute; right: clamp(20px,4vw,60px); bottom: clamp(24px,5vh,54px); display: flex; align-items: center; gap: 14px; }
.look-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0,30,45,.3); background: none; color: inherit; cursor: pointer;
  font-size: 15px; transition: background .25s, color .25s; }
.look-nav button:hover { background: var(--navy); color: var(--cream); }
.look-count { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; }
@media (max-width: 860px) { .look { grid-template-columns: 1fr; } .look-shot { min-height: 56svh; } .look-nav { position: static; justify-content: flex-end; } }

/* ============================================================= 7 · Marquee */
.mrq { position: relative; overflow: hidden; min-height: min(96svh, 820px); display: grid; align-content: center;
  background: var(--tone, #F0DCC8); color: var(--navy); transition: background 1s ease; }
.mrq-ring { position: absolute; left: 50%; top: 50%; width: min(86vh, 760px); aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: rgba(255,255,255,.28); }
.mrq-track { position: relative; z-index: 2; display: flex; gap: .3em; width: max-content; animation: mrqRun 26s linear infinite;
  font: 400 clamp(90px,17vw,260px)/1 var(--display); text-transform: none; letter-spacing: -.02em; }
.mrq-track span { white-space: nowrap; }
.mrq-track span:nth-child(even) { color: #fff; }
@keyframes mrqRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mrq-people { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mrq-people a { position: absolute; bottom: 0; height: min(78vh, 680px); pointer-events: auto; }
.mrq-people img { height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(0,30,45,.28));
  opacity: 0; transform: translateY(24px); transition: opacity .7s, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.mrq-people a.on img { opacity: 1; transform: none; }
.mrq-people .left { left: clamp(15%, 17vw, 24%); }
.mrq-people .right { right: clamp(8%, 10vw, 16%); }
.mrq-tag { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(72px,8vw,104px); aspect-ratio: 1;
  border-radius: 50%; background: var(--navy); color: var(--cream); display: grid; place-items: center; text-align: center;
  font: 700 clamp(12px,1.2vw,15px) var(--price); }
.mrq-copy { position: absolute; z-index: 5; left: clamp(20px,4vw,54px); bottom: clamp(26px,5vh,56px); max-width: 320px; }
.mrq-copy p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.mrq-copy a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.mrq-copy a i { width: 26px; height: 26px; border-radius: 50%; background: var(--flag); color: #fff; display: grid; place-items: center; font-style: normal; }
.mrq-nav { position: absolute; z-index: 5; right: clamp(20px,4vw,54px); bottom: clamp(26px,5vh,56px); display: flex; gap: 12px; }
.mrq-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,30,45,.35); background: none; cursor: pointer; font-size: 14px; }
.mrq-nav button:hover { background: var(--navy); color: var(--cream); }
@media (max-width: 760px) {
  .mrq-people .left { left: 2%; } .mrq-people .right { right: -4%; }
  .mrq-people a { height: 52vh; }
  .mrq-copy { max-width: 60vw; }
}
@media (prefers-reduced-motion: reduce) { .mrq-track { animation: none; } .cfg-shot img, .look-shot img, .mrq-people img { transition: none; } }

/* ======================================================= 8 · Turn it (3D) ==
   From the Adidas Chile 20 film she sent (5 Oct 2026): the garment floating on
   a dark stage under neon, turning to show its other side, with the name
   repeating behind it. Each design turns between two of her own photos, so the
   3D comes from the shop's own pictures. */
.turn { --serif:'Fraunces',Georgia,serif; --display:'Anton',sans-serif; --body:'Figtree',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace; --price:'Space Grotesk',system-ui,sans-serif;
  --navy:#001E2D; --cream:#EAE2B7; --amber:#FFB627; --flag:#D62828;
  position: relative; background: #0B0D10; color: #EDEAE3; overflow: hidden; min-height: min(100svh, 860px);
  display: grid; grid-template-rows: auto 1fr auto; }
.turn-neon { position: absolute; inset: 0; pointer-events: none; }
.turn-neon i { position: absolute; top: 8%; bottom: 8%; width: 3px; border-radius: 3px;
  background: linear-gradient(transparent, var(--flag), transparent); opacity: .55; filter: blur(.4px);
  animation: neonBreathe var(--t,6s) ease-in-out infinite alternate; }
.turn-neon i:nth-child(1) { left: 12%; } .turn-neon i:nth-child(2) { left: 26%; --t: 7.5s; }
.turn-neon i:nth-child(3) { right: 26%; --t: 8.5s; } .turn-neon i:nth-child(4) { right: 12%; --t: 6.5s; }
@keyframes neonBreathe { from { opacity: .25; } to { opacity: .7; } }
.turn-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; pointer-events: none;
  font: 400 clamp(70px,13vw,210px)/1 var(--display); color: rgba(237,234,227,.07); letter-spacing: .02em; }
.turn-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: clamp(22px,4vh,40px) var(--edge) 0; font: 600 var(--tiny) var(--mono); letter-spacing: .26em; text-transform: uppercase; }
.turn-top b { font: 700 15px var(--price); letter-spacing: 0; text-transform: none; }
.turn-stage { position: relative; z-index: 2; display: grid; place-items: center; perspective: 1400px; touch-action: pan-y; cursor: grab; }
.turn-stage.is-held { cursor: grabbing; }
.turn-card { position: relative; width: min(42vh, 360px); aspect-ratio: 4/5; transform-style: preserve-3d;
  transform: rotateY(var(--spin, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.turn-card.is-held { transition: none; }
.turn-card span { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(237,234,227,.08); }
.turn-card span.back { transform: rotateY(180deg); }
.turn-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.turn-floor { position: absolute; bottom: -12%; left: 50%; width: min(60vh, 520px); height: 60px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(214,40,40,.35), transparent 70%); filter: blur(6px); }
.turn-copy { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(16px,3vh,28px) 20px 0; }
.turn-copy h2 { margin: 0; font: 500 clamp(22px,2.6vw,38px)/1.1 var(--serif); }
.turn-copy p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .72; max-width: 420px; }
.turn-foot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: clamp(18px,3vh,30px) var(--edge) clamp(26px,5vh,46px); font: 600 var(--tiny) var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.turn-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.turn-nav { display: flex; gap: 10px; }
.turn-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(237,234,227,.3); background: none; color: inherit; cursor: pointer; }
.turn-nav button:hover { background: var(--flag); border-color: var(--flag); color: #fff; }
.turn-hint { opacity: .45; }
@media (max-width: 700px) { .turn-card { width: 64vw; } .turn-neon i:nth-child(2), .turn-neon i:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .turn-neon i { animation: none; } .turn-card { transition: none; } }

/* ---- 8 · Turn it, with her own flats -------------------------------------
   The garment is cut off her mock-up sheets, front and back, so there is no
   card to turn — the shirt itself turns, with a few darkened copies of its own
   shape stacked behind it to give the cloth its thickness. */
.turn.is-flat .turn-card { width: min(56vh, 460px); aspect-ratio: 1 / 1; }
.turn.is-flat .turn-card > span { border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.turn.is-flat .turn-card > span.front { transform: translateZ(7px); }
.turn.is-flat .turn-card > span.back { transform: rotateY(180deg) translateZ(7px); }
.turn.is-flat .turn-card img { object-fit: contain; object-position: 50% 50%;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.45)); }
.turn.is-flat .turn-ply, .turn.is-flat .ply { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: visible; }
.turn.is-flat .ply i { position: absolute; inset: 0; transform: translateZ(var(--z)) scale(.988); }
.turn.is-flat .ply img { filter: brightness(.42) saturate(.7); }
.turn.is-flat .turn-floor { background: radial-gradient(closest-side, color-mix(in srgb, var(--tone, #fff) 30%, transparent), transparent 78%); }
.turn.is-flat .turn-word { color: color-mix(in srgb, var(--tone, #EDEAE3) 55%, transparent); }
@media (max-width: 700px) { .turn.is-flat .turn-card { width: 78vw; } }

/* ---- 8 · Turn it on white (her word, 6 Oct 2026) -------------------------
   The flats were cut off a white page, so standing them on white again means
   nothing of the cut shows: no edge, no halo, only the garment. */
.turn.is-flat { background: #fff; color: var(--navy); }
.turn.is-flat .turn-neon { display: none; }
.turn.is-flat .turn-word { color: rgba(0,30,45,.055); }
.turn.is-flat .turn-card > span { box-shadow: none; }
.turn.is-flat .turn-card img { filter: drop-shadow(0 22px 26px rgba(0,30,45,.16)); }
.turn.is-flat .ply img { filter: brightness(.86) saturate(.9); }
.turn.is-flat .turn-floor { background: radial-gradient(ellipse at center, rgba(0,30,45,.10), transparent 72%); }
.turn.is-flat .turn-copy p { opacity: .62; }
.turn.is-flat .turn-hint { opacity: .4; }
.turn.is-flat .turn-nav button { border-color: rgba(0,30,45,.25); }
.turn.is-flat .turn-nav button:hover { background: var(--flag); border-color: var(--flag); color: #fff; }