/* SILYE clothing photograph, with two clear routes into the brand. */
.home-cinematic{min-height:100svh;display:flex;flex-direction:column;background:#080808;position:relative;isolation:isolate}
.cinematic-header{height:100px;display:flex;align-items:center;position:relative;z-index:2}
.cinematic-header img{width:148px;height:auto}
.cinematic-main{position:relative;z-index:0;flex:1;min-height:440px;display:flex;align-items:flex-end}
.cinematic-image{position:fixed;inset:0 0 0 38%;z-index:0;overflow:hidden;background:#080808}
.cinematic-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 45%}
.cinematic-image:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#080808,rgba(8,8,8,.2) 35%,transparent 65%),linear-gradient(0deg,#080808,transparent 20%,transparent 80%,#08080888)}
.cinematic-content{position:relative;z-index:1;padding-top:40px;padding-bottom:clamp(65px,13svh,150px)}
.cinematic-actions{display:flex;flex-wrap:wrap;gap:16px}
.cinematic-actions .button{position:relative;overflow:hidden;min-width:200px;min-height:60px;padding:18px 30px;isolation:isolate;box-shadow:0 8px 30px #0003;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .25s,border-color .25s}
.cinematic-actions .button-outline{background:#0808089e;border-color:#c0af96;color:#f4f2ee;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cinematic-actions .button:before{content:'';position:absolute;inset:-70% auto -70% -80%;width:45%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#ffffff3d,transparent);pointer-events:none;transition:left .65s ease}
.cinematic-actions .button:focus-visible{outline:3px solid #f4f2ee;outline-offset:6px;box-shadow:0 0 0 8px #08080899}
.cinematic-actions .button:active{transform:scale(.97)}
.cinematic-footer{display:flex;gap:24px;align-items:center;min-height:60px;position:relative;z-index:2;font-size:11px;color:#d0cdc6;padding-right:62px}
.cinematic-footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.film-control{position:fixed;right:24px;bottom:max(12px,env(safe-area-inset-bottom));z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #b7a58b80;border-radius:50%;background:#080808b8;color:#f4f2ee;cursor:pointer;font-size:16px;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.film-control[hidden]{display:none}.film-control:hover{border-color:#f4f2ee}.film-control:focus-visible{outline:3px solid #f4f2ee;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.cinematic-actions .button{animation:cinematic-enter .85s cubic-bezier(.2,.8,.2,1) .12s backwards}.cinematic-actions .button:nth-child(2){animation-delay:.26s}@keyframes cinematic-enter{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cinematic-actions .button:hover{transform:translateY(-5px);box-shadow:0 14px 36px #0006,0 0 28px #b7a58b20}.cinematic-actions .button:hover:before{left:140%}.cinematic-actions .button-outline:hover{background:#b7a58b;color:#080808;border-color:#b7a58b}}
@media(max-width:720px){.cinematic-header{height:80px}.cinematic-header img{width:125px}.cinematic-main{min-height:calc(100svh - 140px)}.cinematic-content{padding-top:40px;padding-bottom:clamp(70px,15svh,140px)}.cinematic-actions{gap:12px}.cinematic-actions .button{min-width:0;flex:1;min-height:56px;padding:16px 12px;font-size:13px}.cinematic-footer{min-height:60px}.film-control{right:16px}}
@media(prefers-reduced-motion:reduce){.cinematic-actions .button,.cinematic-actions .button:before{animation:none;transition:none}.cinematic-actions .button:hover,.cinematic-actions .button:active{transform:none}}
@media(forced-colors:active){.cinematic-image{display:none}.film-control,.cinematic-actions .button{border:1px solid ButtonText;box-shadow:none}}

/* A visible tap-to-play fallback for mobile autoplay restrictions. */
.film-control-label{display:none}.film-control.needs-play{display:inline-flex;width:auto;min-width:44px;gap:8px;padding-inline:14px;border-radius:24px}.film-control.needs-play .film-control-label{display:inline;font-family:inherit;font-size:12px;font-weight:600}

/* Restore the original clothing background on small screens. */
@media(max-width:720px){.cinematic-image{inset:0}.cinematic-image img{object-position:66% 50%;opacity:.52}.cinematic-image:after{background:linear-gradient(90deg,#080808b8,#08080825),linear-gradient(0deg,#080808,transparent 25%,transparent 75%,#08080888)}}
