/* AFTER CUT V4.3 — interface polish only.
   No layout / project / scroll-engine changes. */
:root{--ui-orange:#ff6a00;--ui-glass:rgba(9,12,14,.68);--ui-line:rgba(255,255,255,.18);--ui-frost:blur(18px) saturate(125%)}

/* --- Quiet, editorial micro-controls ------------------------------------------------ */
.film-trigger{display:inline-flex;align-items:center;gap:13px;width:max-content;min-height:48px;margin-top:36px;padding:5px 15px 5px 6px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(4,7,9,.30);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);}
.film-trigger:hover,.film-trigger:focus-visible{background:rgba(14,17,19,.68);border-color:rgba(255,106,0,.65);transform:translateY(-1px)}
.film-trigger .play-circle{display:grid;place-items:center;width:35px;height:35px;min-width:35px;border:0;border-radius:50%;background:rgba(255,255,255,.095);color:#fff;font-size:0;transition:background .4s var(--ease),transform .4s var(--ease)}
.film-trigger .play-circle:after{content:'';width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid currentColor;margin-left:2px}
.film-trigger:hover .play-circle{background:var(--ui-orange);transform:scale(1.04)}
.film-trigger>span:last-child{display:grid;gap:2px;text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#f0f2f1}
.film-trigger small{font-size:8px;letter-spacing:.04em;text-transform:none;color:#8d999e}
.case-copy .film-trigger{margin-top:26px;background:rgba(5,8,10,.42)}
.case-play .play-circle{width:35px;height:35px;border:0;background:rgba(255,255,255,.10)}
.case-play:hover .play-circle{color:#fff;background:var(--ui-orange);border:0}

.hero-pause{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,10,12,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:0;color:white;transition:border-color .35s,background .35s,transform .35s}
.hero-pause:before,.hero-pause:after{content:'';position:absolute;width:2px;height:10px;border-radius:2px;background:currentColor;transform:translateX(-2.5px)}
.hero-pause:after{transform:translateX(2.5px)}
.hero-pause:hover,.hero-pause:focus-visible{border-color:var(--ui-orange);background:rgba(15,16,17,.8);transform:scale(1.04)}
body.motion-paused .hero-pause:before{width:0;height:0;background:transparent;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff;transform:translateX(1px)}
body.motion-paused .hero-pause:after{display:none}

.scroll-cue{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(5,8,10,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);letter-spacing:.13em;transition:border-color .35s,background .35s,color .35s}
.scroll-cue span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);font-size:11px;transition:transform .5s var(--ease),background .35s}
.scroll-cue:hover{border-color:rgba(255,106,0,.55);background:rgba(10,12,14,.58);color:#fff}
.scroll-cue:hover span{background:var(--ui-orange);transform:translateY(2px)}

/* Project rail hint: information, not a fake button */
#projectHint{display:inline-flex;align-items:center;gap:9px;color:#839096!important;letter-spacing:.08em;text-transform:uppercase;font-size:8px!important}
#projectHint:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ui-orange);box-shadow:0 0 0 4px rgba(255,106,0,.08)}

/* Close / back actions become typographic utility controls */
.plain-button.case-close{display:inline-flex;align-items:center;gap:9px;padding:8px 0;border:0;color:#aab4b8;font-size:9px;letter-spacing:.08em;text-transform:uppercase;transition:color .3s,transform .35s var(--ease)}
.plain-button.case-close:after{content:'↗';font-size:13px;transform:rotate(-45deg);transition:transform .35s var(--ease)}
.plain-button.case-close:hover{color:#fff;border:0;transform:translateY(-1px)}
.plain-button.case-close:hover:after{transform:rotate(-45deg) translate(2px,-2px)}
.back-scroll-hint{display:inline-flex;align-items:center;gap:12px;color:#77858b!important;font-size:9px!important;letter-spacing:.08em;text-transform:uppercase}
.back-scroll-hint span{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:#cad3d6}

/* Image open affordance */
.image-open{border-radius:8px;overflow:hidden}
.image-open>span{display:grid!important;place-items:center!important;position:absolute!important;right:14px!important;bottom:14px!important;width:34px!important;height:34px!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:50%!important;background:rgba(7,10,12,.42)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px!important;opacity:0!important;transform:translateY(5px);transition:opacity .35s,transform .35s,background .35s,border-color .35s}
.image-open:hover>span,.image-open:focus-visible>span{opacity:1!important;transform:none;background:rgba(255,106,0,.88)!important;border-color:transparent!important}

/* --- Fullscreen image viewer -------------------------------------------------------- */
.media-dialog,.image-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(3,5,6,.975);color:#f4f5f3;overflow:hidden;border-radius:0}
.media-dialog::backdrop,.image-dialog::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.media-dialog[open],.image-dialog[open]{animation:uiDialogIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes uiDialogIn{from{opacity:0}to{opacity:1}}
.dialog-close{position:fixed;right:max(20px,3vw);top:max(20px,3vw);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(12,15,17,.48);backdrop-filter:var(--ui-frost);-webkit-backdrop-filter:var(--ui-frost);color:#fff;font-size:0;z-index:20;transition:background .35s,border-color .35s,transform .4s var(--ease)}
.dialog-close:before,.dialog-close:after{content:'';position:absolute;width:14px;height:1px;background:currentColor;transform:rotate(45deg)}
.dialog-close:after{transform:rotate(-45deg)}
.dialog-close:hover,.dialog-close:focus-visible{background:var(--ui-orange);border-color:var(--ui-orange);transform:rotate(90deg)}
.image-dialog>img{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:min(88vw,1500px);max-height:82dvh;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.image-dialog>p{position:fixed;left:max(24px,4vw);top:max(23px,3.3vw);max-width:50vw;margin:0;color:#b6c0c4;font-size:10px;letter-spacing:.08em;text-transform:uppercase;z-index:10}
.image-dialog>p:before{content:'AFTER CUT  /  STILL';display:block;margin-bottom:8px;color:#fff;font-size:8px;letter-spacing:.18em}
.image-nav{position:fixed!important;left:50%!important;bottom:max(24px,3vw)!important;transform:translateX(-50%)!important;display:flex!important;align-items:center!important;gap:4px!important;padding:5px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;background:rgba(10,13,15,.62)!important;backdrop-filter:var(--ui-frost);-webkit-backdrop-filter:var(--ui-frost);z-index:12!important}
.image-nav button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:0;transition:background .3s,color .3s,transform .3s}
.image-nav button:before{content:'';width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.image-prev:before{transform:rotate(-135deg);margin-left:3px}.image-next:before{transform:rotate(45deg);margin-right:3px}
.image-nav button:not(:disabled):hover,.image-nav button:not(:disabled):focus-visible{background:rgba(255,255,255,.10);transform:scale(1.04)}
.image-nav button:disabled{opacity:.22}
.image-count{min-width:58px;text-align:center;color:#dce2e4;font-size:9px;letter-spacing:.13em}

/* --- Video dialog ------------------------------------------------------------------ */
.media-dialog{display:none}
.media-dialog[open]{display:flex;align-items:center;justify-content:center;padding:7vh 5vw 9vh}
.media-dialog video{display:block;width:min(86vw,1440px);height:auto;max-height:76dvh;object-fit:contain;border-radius:10px;background:#000;box-shadow:0 30px 100px rgba(0,0,0,.42)}
.media-dialog>p{position:fixed;left:max(24px,4vw);top:max(23px,3.3vw);max-width:52vw;margin:0;color:#aab5b9;font-size:10px;letter-spacing:.08em;text-transform:uppercase;z-index:10}
.media-dialog>p:before{content:'AFTER CUT  /  FILM';display:block;margin-bottom:8px;color:#fff;font-size:8px;letter-spacing:.18em}
.ui-media-controls{position:fixed;left:50%;bottom:max(22px,2.8vw);transform:translateX(-50%);display:flex;align-items:center;gap:11px;width:min(680px,78vw);padding:7px 9px 7px 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(10,13,15,.72);backdrop-filter:var(--ui-frost);-webkit-backdrop-filter:var(--ui-frost);z-index:12}
.ui-media-toggle,.ui-media-mute{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .3s,transform .3s}
.ui-media-toggle:hover,.ui-media-mute:hover{background:var(--ui-orange);transform:scale(1.04)}
.ui-media-toggle{font-size:0}.ui-media-toggle:before{content:'';width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid currentColor;margin-left:2px}
.ui-media-toggle.is-playing:before{width:7px;height:9px;border:0;border-left:2px solid currentColor;border-right:2px solid currentColor;margin:0}
.ui-media-mute{font-size:9px;letter-spacing:.04em}
.ui-media-time{flex:0 0 auto;min-width:74px;color:#aab6ba;font-size:8px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.ui-media-range{appearance:none;-webkit-appearance:none;flex:1;height:24px;background:transparent;cursor:pointer}
.ui-media-range::-webkit-slider-runnable-track{height:2px;border-radius:99px;background:linear-gradient(90deg,var(--ui-orange) 0 var(--ui-progress,0%),rgba(255,255,255,.18) var(--ui-progress,0%) 100%)}
.ui-media-range::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.ui-media-range::-moz-range-track{height:2px;background:rgba(255,255,255,.18)}
.ui-media-range::-moz-range-progress{height:2px;background:var(--ui-orange)}
.ui-media-range::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}

/* Inline case player: retain native controls but make transition into it intentional */
.case-hero.is-playing .case-film{border-radius:8px;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);box-shadow:0 24px 65px rgba(0,0,0,.36)}
.player-status{margin:14px 0 0;padding:10px 2px;border:0;color:#879398;font-size:9px;letter-spacing:.05em}
.player-status .back-to-poster{margin-left:auto}

@media(max-width:700px){
 .film-trigger{min-height:44px;padding-right:13px}.film-trigger .play-circle{width:32px;height:32px;min-width:32px}
 .scroll-cue{padding:6px 7px 6px 11px}.scroll-cue span{width:24px;height:24px}
 .hero-pause{width:38px;height:38px}
 .image-dialog>img{max-width:94vw;max-height:76dvh;border-radius:6px}
 .image-dialog>p,.media-dialog>p{left:17px;top:18px;max-width:68vw;font-size:9px}
 .dialog-close{right:15px;top:15px;width:40px;height:40px}
 .image-nav{bottom:18px!important}.image-nav button{width:38px;height:38px}
 .media-dialog[open]{padding:9vh 3vw 13vh}.media-dialog video{width:94vw;max-height:70dvh;border-radius:7px}
 .ui-media-controls{width:92vw;bottom:18px;gap:7px}.ui-media-time{min-width:65px}.ui-media-mute{display:none}
 .image-open>span{opacity:1!important;transform:none;width:31px!important;height:31px!important}
}

@media(prefers-reduced-motion:reduce){.media-dialog[open],.image-dialog[open]{animation:none}.dialog-close,.film-trigger,.scroll-cue,.hero-pause{transition:none}}