/* mf-story2.20261026.css: round 2 of the story art (Kyle's notes, 2026-10-26). Loads after mf-story. */

/* 1) MF poster behind "What do you want to make happen?": brighter, less see-through */
.contact-city{opacity:.74;filter:saturate(1.22) brightness(1.06);background:radial-gradient(ellipse 34% 30% at 50% 36%,rgba(3,6,19,.5),transparent),linear-gradient(180deg,rgba(3,6,19,.52),rgba(3,6,19,.24) 42%,rgba(3,6,19,.52) 78%,#030716 100%),url('mainfront-banner-backdrop.webp') center 6%/cover no-repeat}
.contact-inner h2{text-shadow:0 2px 24px rgba(3,6,21,.85)}
/* the fixed MF backdrop while scrolling: a little stronger */
.scroll-backdrop{opacity:calc(var(--art-progress,0)*.32)}
.scroll-backdrop::after{background:linear-gradient(180deg,rgba(3,6,20,.28),rgba(3,6,20,.55) 55%,rgba(3,6,20,.72)),radial-gradient(ellipse at 50% 25%,transparent,rgba(3,6,20,.42) 80%)}
@media(prefers-reduced-motion:reduce){.scroll-backdrop{opacity:.16!important}}

/* 2) the night-town photo (H14) moved off the MF poster into its own band above "Your move" */
.story-close{padding:clamp(26px,4vw,48px) clamp(16px,4vw,48px) 0}
.story-band-close{position:relative;max-width:1250px;margin:0 auto;aspect-ratio:21/7;overflow:hidden;border:1px solid var(--story-line,rgba(110,145,255,.28));border-radius:7px 26px 7px 26px;box-shadow:var(--story-glow,0 18px 50px rgba(0,0,0,.35))}
.story-band-close img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 55%}
@media(max-width:760px){.story-band-close{aspect-ratio:16/9}}

/* 3) BUILD IT. skyline options (data-sky on the section picks one) */
.statement-section .sky-opt{display:none}
.statement-section[data-sky="0"] .sky-opt[data-o="0"],.statement-section[data-sky="1"] .sky-opt[data-o="1"],.statement-section[data-sky="2"] .sky-opt[data-o="2"],.statement-section[data-sky="3"] .sky-opt[data-o="3"],.statement-section[data-sky="4"] .sky-opt[data-o="4"],.statement-section[data-sky="5"] .sky-opt[data-o="5"]{display:block}
.sky-opt[data-o="0"]{position:absolute;inset:0;pointer-events:none}
.statement-section[data-sky="4"] .sky-opt.concept-tiles[data-o="4"]{display:grid}

/* drawn skylines (1-3) */
.sky-svg{position:absolute;left:0;right:0;bottom:0;z-index:0;height:clamp(190px,21vw,300px);pointer-events:none}
.sky-svg svg{display:block;width:100%;height:100%}
.statement-section[data-sky="1"],.statement-section[data-sky="2"],.statement-section[data-sky="3"]{min-height:clamp(470px,44vw,620px);padding-bottom:clamp(165px,18vw,250px)}
.mf-sky-blink{animation:mf-sky-blink 2.6s ease-in-out infinite}
.mf-sky-blink:nth-of-type(3n){animation-delay:-1.1s}
@keyframes mf-sky-blink{50%{opacity:.2}}

/* photo skylines (4-5) */
.statement-section[data-sky="4"] .statement-photo,.statement-section[data-sky="4"] .statement-lines,.statement-section[data-sky="5"] .statement-photo,.statement-section[data-sky="5"] .statement-lines{display:none}
.sky-photo{position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}
.sky-photo img{display:block;width:100%;height:100%;object-fit:cover}
.statement-section[data-sky="4"] .statement,.statement-section[data-sky="5"] .statement{background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(3,6,21,.5),transparent 75%)}
.statement-section[data-sky="4"] .statement h2,.statement-section[data-sky="5"] .statement h2{font-size:clamp(76px,11.5vw,170px);text-shadow:0 0 12px #046fff,0 0 34px rgba(65,58,255,.85),0 6px 30px rgba(3,6,21,.9)}
.statement-section[data-sky="4"] .statement>p,.statement-section[data-sky="5"] .statement>p{color:#d5def6;font-size:15px;text-shadow:0 1px 12px #030615}

/* 4: ChatGPT concept skyline + the five concept tiles */
.statement-section[data-sky="4"]{display:block;min-height:0;padding:0 0 clamp(36px,5vw,70px)}
.sky-photo--concept{height:clamp(430px,41vw,610px)}
.sky-photo--concept img{object-position:50% 100%}
.sky-photo--concept::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#030615 0%,rgba(3,6,21,.1) 16%,transparent 66%,#030615 100%)}
.statement-section[data-sky="4"] .statement{max-width:1100px;margin:0 auto;padding:clamp(150px,16.5vw,240px) 20px 0}
.concept-tiles{display:none;position:relative;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px);max-width:1250px;margin:clamp(50px,7vw,110px) auto 0;padding:0 clamp(16px,4vw,48px)}
.concept-tiles figure{margin:0;text-align:center}
.concept-tiles img{display:block;width:100%;aspect-ratio:1.1;object-fit:cover;border:1px solid rgba(110,145,255,.2);border-radius:6px 16px 6px 16px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.concept-tiles figcaption{margin-top:14px;font:600 .78rem/1 var(--tech);letter-spacing:.34em;color:#e3e9ff}

/* 5: Codex city photo */
.statement-section[data-sky="5"]{min-height:clamp(560px,48vw,700px);place-items:start center;padding:clamp(70px,7vw,100px) 24px clamp(250px,23vw,330px)}
.sky-photo--city{bottom:0}
.sky-photo--city img{object-position:50% 61%}
.sky-photo--city::after{content:"";position:absolute;inset:0;background:linear-gradient(#030615 0%,rgba(3,6,21,.6) 17%,transparent 45%,rgba(3,6,21,.07) 67%,#030615 100%)}

@media(max-width:760px){
  .statement-section[data-sky="4"] .statement{padding-top:150px}
  .concept-tiles{margin-top:120px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .concept-tiles figure{scroll-snap-align:start}
  .statement-section[data-sky="5"]{min-height:540px;padding:60px 18px 260px}
  .statement-section[data-sky="5"] .sky-photo--city img{object-position:50% 65%}
}
@media(prefers-reduced-motion:reduce){.mf-sky-blink{animation:none}}