/* SlideDrop: quiet surfaces, deliberate hierarchy, and purposeful motion. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-standard: cubic-bezier(.2,.7,.2,1); }
body:not(.stage-body) { background: #f7f8fa; --beam-deep: #906100; }
body:not(.stage-body) .nav { max-width: 1320px; padding-block: 22px; gap: 20px; }
body:not(.stage-body) .page { max-width: 1320px; padding-bottom: 64px; }
.nav-brand { transition: opacity .2s; }
.nav-brand:hover { opacity: .75; }
.nav-links > a:not(.btn) { position: relative; padding-block: 9px; }
.nav-links > a:not(.btn)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: #b0780c; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.nav-links > a[aria-current='page']::after,.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links > a[aria-current='page'] { color: #171d2b; font-weight: 600; }
body:not(.stage-body) .nav-links .btn { background: #171d2b; color: #fff; box-shadow: 0 3px 8px #17213212; }
.btn { transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .22s var(--ease-out); }
body:not(.stage-body) .btn { border-radius: 10px; min-height: 42px; }
.btn:active { transform: translateY(1px) scale(.98); }
@media(hover:hover) {
 body:not(.stage-body) .btn:hover { transform: translateY(-2px); }
 body:not(.stage-body) .btn-primary:hover { box-shadow: 0 8px 18px -9px #b27700a0; }
 .room-card { transition: transform .3s var(--ease-out),box-shadow .3s,border-color .3s; }
 .room-card:hover { transform: translateY(-3px); border-color: #c9d0dc; box-shadow: 0 16px 30px -22px #26324970; }
}
body:not(.stage-body) .narrow { margin-top: clamp(30px,6vh,64px); }
body:not(.stage-body) .page-title { letter-spacing: -.04em; line-height: 1.13; }
body:not(.stage-body) .eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: .13em; color: #6b7484; }
.input { background: #fafbfd; border: 1px solid #d9dfe8; border-radius: 10px; padding: 14px 15px; transition: background .2s,border-color .2s,box-shadow .2s; }
.input::placeholder { color: #8991a0; }
.field-label { font-size: 13px; color: #303a4b; }
.field-hint { display: block; font-size: 12px; color: #737d8b; margin: 7px 0 0; }
.form-card { border-radius: 20px; border-color: #e1e5eb; box-shadow: 0 14px 40px -28px #33415c55; padding: clamp(22px,4vw,34px); gap: 26px; }
.flow-steps { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 26px; list-style: none; font-size: 12px; color: #7d8593; }
.flow-steps li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.flow-steps li + li::before { content: ''; width: 24px; height: 1px; background: #d7dde6; margin-right: 5px; }
.flow-steps span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d9dfe8; font-size: 11px; }
.flow-steps [aria-current='step'] { color: #263145; font-weight: 600; }
.flow-steps [aria-current='step'] span { background: #fff0cb; color: #815400; border-color: #f3d597; }
.create-ui .page-title { font-size: clamp(32px,4vw,44px); }
.create-ui .lede { font-size: 15px; line-height: 1.7; max-width: 59ch; }
.dropzone { padding: 38px 20px; background: #fafbfd; border: 1.5px dashed #c6ceda; border-radius: 14px; transition: background .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease-out); }
.dropzone:hover,.dropzone:focus-visible { background: #fffaf0; border-color: #be8b29; }
.dropzone.drag { background: #fff3d5; border-color: #b47c14; box-shadow: 0 0 0 5px #ffb22415; transform: scale(1.012); }
.dz-idle { gap: 10px; }
.dz-idle svg { width: 50px; height: 50px; padding: 10px; border-radius: 14px; background: #fff0cc; margin-bottom: 6px; }
.dz-idle strong { font-size: 15px; }
.dz-idle span { font-size: 12px; line-height: 1.7; }
.dropzone.has-file { border-style: solid; border-color: #bad8c5; background: #f5faf7; }
.dz-picked { gap: 9px; animation: sd-rise .3s var(--ease-out) both; }
.file-ready { display: inline-flex; color: #367b51; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.file-ready::before { content: '✓'; margin-right: 6px; }
.dz-name { font-family: var(--font-body); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.dz-size { font-size: 12px; }
.dz-picked .btn { margin-top: 6px; background: #fff; }
.form-note { text-align: center; font-size: 12px; line-height: 1.6; color: #758091; margin: -12px 0 0; }
.upload-progress { background: #f6f8fb; padding: 16px; border: 1px solid #e8ecf2; border-radius: 12px; animation: sd-rise .25s var(--ease-out) both; }
.upload-bar { height: 6px; background: #e2e7ef; }
.upload-bar span { transition: width .35s var(--ease-out); background: linear-gradient(90deg,#e6a72b,#ffce70); }
.form-card.is-uploading .dropzone { pointer-events: none; opacity: .65; }
.form-card.is-uploading [data-submit]::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sd-spin .8s linear infinite; }
.form-error,.pin-error { border-left: 3px solid #dc5960; background: #fff1f2; border-radius: 6px; padding: 12px 14px; font-size: 13px; }
.join-ui .narrow { max-width: 570px; background: white; border: 1px solid #e1e5eb; border-radius: 22px; padding: clamp(24px,5vw,44px); box-shadow: 0 18px 45px -34px #26324966; }
.join-ui .page-title { font-size: clamp(29px,4vw,38px); }
.join-ui .lede { font-size: 15px; line-height: 1.7; }
.join-ui .pin-row-big { flex-wrap: nowrap; gap: 7px; width: 100%; }
.join-ui .pin-cell-big { width: 0; flex: 1; min-width: 0; height: 62px; font-size: 27px; border-width: 1px; }
.join-ui .pin-join-page { gap: 22px; }
.join-ui .pin-join-page > .btn { width: 100%; }
.join-note { color: #788292; font-size: 12px; margin: 22px 0 0; }
.pin-cell { transition: border-color .18s,box-shadow .18s,background .18s; }
.pin-cell.filled { background: #fffaf0; }
.processing-ui #processing { background: #fff; border: 1px solid #e2e6ed; border-radius: 22px; padding: clamp(28px,5vw,50px); box-shadow: 0 18px 45px -34px #26324966; }
.processing-ui .page-title { font-size: clamp(27px,3.5vw,36px); }
.processing-ui .lede { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.processing-ui .projector-loader { margin-top: 22px; margin-bottom: 36px; }
.processing-note { font-size: 12px; color: #758091; border-top: 1px solid #e9edf3; padding-top: 20px; margin: 24px 0 0; }
.modal-backdrop { background: #10182675; backdrop-filter: blur(9px); animation: sd-fade .2s ease both; }
.modal { position: relative; padding: 32px; border: 1px solid #ffffff90; border-radius: 20px; box-shadow: 0 30px 90px #060e2940; animation: sd-dialog .3s var(--ease-out) both; max-height: calc(100dvh - 40px); overflow: auto; }
.modal h3 { font-size: 23px; letter-spacing: -.025em; padding-right: 24px; }
.modal-close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border: 1px solid #e0e5ed; background: #f6f8fa; border-radius: 50%; cursor: pointer; font-size: 20px; color: #586476; display: grid; place-items: center; }
.modal-close:hover { background: #e9edf3; }
.share-pin { font-size: clamp(22px,5vw,34px); letter-spacing: .12em; }
.toast { border: 1px solid #ffffff20; border-radius: 12px; box-shadow: 0 12px 35px #10182830; max-width: min(90vw,480px); animation: sd-rise .3s var(--ease-out) both; }
body:not(.stage-body) .footer { font-size: 12px; }
/* Animate incoming content, never the slide canvas or live pointer. */
body:not(.stage-body) .page > section { animation: sd-rise .48s var(--ease-out) both; }
.home-ui .hero-frame { animation: sd-rise .6s .08s var(--ease-out) both; }
.room-card { animation: sd-rise .45s var(--ease-out) both; }
.room-card:nth-child(2) { animation-delay: .045s; }
.room-card:nth-child(3) { animation-delay: .09s; }
.room-card:nth-child(n+4) { animation-delay: .13s; }
.feature-card:nth-child(2) { animation-delay: .05s; }
.feature-card:nth-child(3) { animation-delay: .1s; }
.feature-card { animation: sd-rise .5s var(--ease-out) both; }
[hidden] { display: none !important; }
@keyframes sd-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-dialog { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media(max-width:600px) {
 body:not(.stage-body) .nav { padding: 16px 20px; gap: 12px; }
 body:not(.stage-body) .nav-links { gap: 12px; }
 body:not(.stage-body) .nav-links a { font-size: 12px; }
 body:not(.stage-body) .nav-links a[href='/rooms'] { display: inline; }
 body:not(.stage-body) .nav-links .btn { padding: 10px; }
 .flow-steps { gap: 8px; font-size: 11px; }
 .flow-steps li + li::before { width: 10px; margin-right: 0; }
 .join-ui .narrow { padding: 28px 20px; }
 .join-ui .pin-cell-big { height: 52px; font-size: 23px; }
 .modal { padding: 28px 22px; }
 .dropzone { padding: 28px 16px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}