/* Contoforo atelier: petrol, champagne, controlled light and generous staging. */
:root { --atelier-ease: cubic-bezier(.16,1,.3,1); }
header { background: #0b2226f2; border-bottom-color: #b8cdbe12; }
header .brand { letter-spacing: -1.2px; }
.film-story .spatial-sticky { min-height: 810px; max-height: 1120px; }
.film-story .spatial-copy { top: 15%; }
.film-story .spatial-copy h1 { font-size: clamp(56px,5.35vw,90px); line-height: 1.02; letter-spacing: -3.5px; }
.film-story .spatial-copy h1 em { display: inline-block; padding-bottom: 6px; color: #e8c986; background: linear-gradient(115deg,#b59357 0%,#f4dfa9 45%,#d2af6f 85%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.film-story .spatial-copy .eyebrow { display: flex; align-items: center; gap: 12px; }
.film-story .spatial-copy .eyebrow:before { content: ''; width: 25px; height: 1px; background: #d4bb81; }
.film-story .spatial-copy .description { max-width: 365px; color: #b8c9c2; }
.film-story .suite-scope { color: #bdc5af; font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.95; max-width: 355px; }
.film-story .spatial-stage { inset: 0 0 0 40%; }
.film-story video { mask-image: linear-gradient(0deg,transparent,#000 12%,#000 91%,transparent); mix-blend-mode: lighten; position: absolute; top: 50%; height: auto; aspect-ratio: 16 / 9; width: 100%; max-width: none; left: 0; transform: translateY(-50%) scale(var(--shot-scale,1.43)); transform-origin: right center; transition: transform .45s ease-out; }
.film-story.scene-returning video { opacity: 1; }
.film-return-frame { mask-image: linear-gradient(0deg,transparent,#000 12%,#000 91%,transparent); mix-blend-mode: lighten; position: absolute; top: 50%; left: 0; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: contain; transform: translateY(-50%) scale(1.43); transform-origin: right center; pointer-events: none; opacity: 0; transition: opacity 1.1s ease-in-out; }
.film-story.scene-returning .film-return-frame { opacity: 1; transition: none; }
.film-story .spatial-vignette { background: linear-gradient(90deg,#091c1e 0%,#091c1e 39%,#091c1e40 47%,transparent 55%),linear-gradient(270deg,#091c1e 0%,transparent 9%),linear-gradient(0deg,#091c1e 0%,#091c1e30 20%,transparent 42%); }
.scene-caption { position: absolute; left: 51%; right: 8%; bottom: 47px; z-index: 2; text-align: center; pointer-events: none; }
.scene-caption-label { font: 500 9px/1.5 system-ui,sans-serif; letter-spacing: 2.5px; color: #d7bd85; }
.scene-caption-title { font: 400 clamp(18px,1.65vw,25px)/1.3 Georgia,serif; color: #ece8d8; margin: 10px 0 7px; text-wrap: balance; }
.scene-caption-note { color: #9eb2a7; font-size: 10px; }
.film-story .scene-motion { color: #b3c4bc; border-color: #b7cbbb26; background: #142d2a70; backdrop-filter: blur(12px); top: 22px; }
.film-story .scene-scroll { bottom: 46px; color: #9ab4a8; font-size: 11px; }
.film-story .scene-scroll span { transition: transform .5s var(--atelier-ease),border-color .3s; }
.film-story .scene-scroll:hover span { transform: translateY(4px); border-color: #dfc081; }
.film-story .actions .gold { position: relative; overflow: hidden; border: 1px solid #efd394; border-radius: 8px; background: linear-gradient(120deg,#d0ad69,#efdaa1 58%,#d5b574); box-shadow: inset 0 1px #fff6,0 5px 22px #dfb95b12; color: #122a2a; transition: transform .4s var(--atelier-ease),box-shadow .4s; }
.film-story .actions .gold:after { content: ''; position: absolute; top: -80%; bottom: -80%; left: -60%; width: 25%; background: linear-gradient(90deg,transparent,#fff5,transparent); transform: rotate(25deg); transition: left .65s var(--atelier-ease); pointer-events: none; }
.film-story .actions .gold:hover:after { left: 135%; }
.film-story .actions .gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px #fff6,0 12px 30px #dfb95b20; }
.film-story .actions .gold:active { transform: translateY(0); }
.core-benefits { position: relative; background: linear-gradient(90deg,#0a1f22,#12312e,#0a1f22); border-top: 1px solid #a9c2ad24; border-bottom: 1px solid #a9c2ad1c; }
.core-benefits:before { content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg,transparent,#ead29b80,transparent); }
.showcase { background: radial-gradient(ellipse at 72% 55%,#294b4230,transparent 60%),#0b2226; }
.showcase .sculpture-stage { border-radius: 28px; border-color: #adbea433; }
.trial .coming-label { border-radius: 50px; }
@media(min-width:1001px) and (max-height:850px) {
 .film-story .spatial-sticky { min-height: 735px; }
 .film-story .spatial-copy { top: 13%; }
 .film-story .spatial-copy h1 { font-size: clamp(55px,5.1vw,79px); }
 .film-story .spatial-copy .description { font-size: 17px; margin-bottom: 15px; }
 .film-story .spatial-copy .actions { margin-top: 22px; }
 .film-story .spatial-note { margin-top: 16px; }
 .scene-caption { bottom: 36px; }
 .film-story .scene-scroll { bottom: 39px; }
}
@media(min-width:651px) and (max-width:1000px) {
 .film-story .spatial-sticky { min-height: 790px; }
 .film-story .spatial-copy { top: 13%; width: 49%; }
 .film-story .spatial-copy h1 { font-size: 54px; letter-spacing: -2px; }
 .scene-caption { left: 48%; right: 5%; bottom: 65px; }
 .scene-caption-title { font-size: 22px; }
}
@media(max-width:1000px) {
 .film-story .spatial-sticky { display: flex; flex-direction: column; min-height: 0; max-height: none; height: auto; padding: 82px 6% 27px; }
 .film-story .spatial-copy { position: relative; top: auto; left: auto; width: 100%; order: 0; }
 .film-story .spatial-copy h1 { font-size: clamp(44px,10.5vw,62px); line-height: 1.04; letter-spacing: -2px; }
 .film-story .spatial-copy .description { font-size: 16px; max-width: 420px; }
 .film-story .spatial-copy .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
 .film-story .spatial-copy .eyebrow:before { width: 18px; }
 .film-story .suite-scope { max-width: 380px; font-size: 10px; }
 .film-story .spatial-copy .actions { margin-top: 22px; }
 .film-story .spatial-note { margin-top: 16px; }
 .film-story .spatial-stage { position: relative; inset: auto; width: calc(100% + 13.64%); margin: -5px -6.82% 0; height: clamp(280px,75vw,440px); order: 1; }
 .film-story video,.film-return-frame { mask-image: linear-gradient(0deg,transparent,#000 12%,#000 91%,transparent); mix-blend-mode: lighten; position: absolute; width: 100%; max-width: none; height: auto; left: 0; object-fit: contain; object-position: center; background: #091c1e; }
 .film-story .spatial-vignette { display: none; }
 .film-story .spatial-stage:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#091c1e,transparent 22%,transparent 80%,#091c1e),linear-gradient(90deg,#091c1e,transparent 8%,transparent 93%,#091c1e); }
 .scene-caption { position: relative; left: auto; right: auto; bottom: auto; order: 2; padding: 0 8px 26px; margin-top: -10px; }
 .scene-caption-title { font-size: 21px; min-height: 54px; display: grid; place-content: center; margin: 5px 0 1px; }
 .scene-caption-label { font-size: 8px; letter-spacing: 2px; }
 .scene-caption-note { font-size: 9px; }
 .film-story .scene-scroll { position: relative; left: auto; bottom: auto; order: 3; justify-content: center; }
 .film-story .scene-motion { top: 17px; }
}
@media(prefers-reduced-motion:no-preference) {
 .film-story .spatial-copy > * { animation: atelier-enter .9s var(--atelier-ease) both; }
 .film-story .spatial-copy > :nth-child(2) { animation-delay: .08s; }
 .film-story .spatial-copy > :nth-child(3) { animation-delay: .16s; }
 .film-story .spatial-copy > :nth-child(4) { animation-delay: .23s; }
 .film-story .spatial-copy > :nth-child(5) { animation-delay: .3s; }
 .film-story .spatial-copy > :nth-child(6) { animation-delay: .38s; }
 @keyframes atelier-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}

@media(prefers-reduced-motion:reduce) { .film-return-frame { transition: none; } }

/* Decorative scenes run automatically without playback chrome. */
.scene-motion,.suite-motion,.cinema-toolbar,#sculpture-motion { display: none !important; }
@media(max-width:1000px) { .film-story .spatial-sticky { padding-top: 46px; } }
