/* Personal touches for moviedate (injected by swag, see moviedate.subdomain.conf). */

/* Title: the h1 text is hardcoded in the app, so hide it and draw our own. */
.hero h1{font-size:0 !important;line-height:0 !important}
.hero h1::before,.hero h1::after{display:inline-block;font-size:2.4rem;line-height:1.25;letter-spacing:normal}
.hero h1::before{content:"Привіт, кицюня"}
.hero h1::after{content:"😘";margin-left:.3em;-webkit-text-fill-color:initial}
@media(max-width:480px){.hero h1::before,.hero h1::after{font-size:1.8rem}}
.hero-tagline{white-space:pre-line;line-height:1.8;max-width:30rem;margin-left:auto;margin-right:auto}

/* Checklist (built from the tagline by moviedate.js). */
.md-list{max-width:30rem;margin:1.8rem auto 0;text-align:left;line-height:1.8}
.md-list p{white-space:pre-line;margin:0 0 1.5rem;text-align:center}
.md-list label{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.35rem;cursor:pointer}
.md-list input{accent-color:#ff4d8d;width:1.1rem;height:1.1rem;margin-top:.5rem;flex:none}

/* Create/join cards stay hidden until the checklist (and letter) is done. */
html.md-gate:not(.md-open) .action-cards{display:none}
html.md-gate.md-open .action-cards{animation:mdshow .8s ease both}
@keyframes mdshow{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}

/* Falling emojis. */
.md-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.md-fx span{position:absolute;top:-3rem;animation:mdf linear forwards}
@keyframes mdf{to{transform:translateY(110vh) rotate(360deg)}}

/* Letter. */
.md-env{display:none;position:relative;width:18rem;height:9.5rem;margin:7.5rem auto 1rem}
.md-env.go{display:block;animation:mde .7s ease both}
@keyframes mde{from{opacity:0;transform:translateY(2rem) scale(.9)}to{opacity:1;transform:none}}
.md-back{position:absolute;inset:0;background:#ffb3cf;border-radius:.5rem}
.md-card{position:absolute;left:1rem;right:1rem;bottom:.6rem;height:8.6rem;background:#fff;color:#8a2450;border-radius:.4rem;padding:.7rem .6rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;text-align:center;z-index:1;box-shadow:0 2px 8px #0003}
.md-card b{font-size:1.05rem;line-height:1.3}
.md-card span{white-space:pre-line;font-size:.88rem;line-height:1.55}
.md-env.open .md-card{animation:mdr 1.2s ease .7s both}
@keyframes mdr{0%{transform:none;z-index:1}60%{transform:translateY(-6.8rem);z-index:1}61%{z-index:3}100%{transform:translateY(-5.8rem);z-index:3}}
.md-front{position:absolute;inset:0;background:#ff9cc2;border-radius:.5rem;clip-path:polygon(0 100%,100% 100%,100% 25%,50% 62%,0 25%);z-index:2}
.md-flap{position:absolute;left:0;right:0;top:0;height:55%;background:#ff7fb0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4}
.md-env.open .md-flap{animation:mdfl .7s ease .2s both}
@keyframes mdfl{0%{transform:rotateX(0);z-index:4}50%{transform:rotateX(90deg);z-index:4}51%{z-index:0}100%{transform:rotateX(180deg);z-index:0}}

/* Larger avatars: member strip, member list, chat. */
.viewer-avatars .av{width:36px !important;height:36px !important;object-fit:cover}
.avatar-sm{width:32px !important;height:32px !important;object-fit:cover}
.avatar-chat{width:40px !important;height:40px !important;object-fit:cover}

@media(prefers-reduced-motion:reduce){.md-env,.md-env *{animation-duration:.01s !important}.md-fx{display:none}}

/* Fullscreen wrapper and chat toasts. */
.video-player:fullscreen{width:100vw;height:100vh;background:#000}
.md-toasts{position:absolute;bottom:76px;left:16px;z-index:6;display:flex;flex-direction:column;gap:8px;max-width:min(75%,24rem);pointer-events:none}
.md-toast{display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem .5rem .5rem;border-radius:1rem;background:rgba(0,0,0,.7);color:#fff;font-size:1rem;line-height:1.3;animation:mdt .35s ease both;transition:opacity .5s}
.md-toast.out{opacity:0}
.md-toast img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.md-toast b{display:block;font-size:.8rem;color:#ff9cc2}
.md-toast span{word-break:break-word}
@keyframes mdt{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}

/* Fullscreen emoji button + popup (shown only while the player is fullscreen). */
.md-emo{position:absolute;right:16px;bottom:128px;z-index:7;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .2s,background .2s}
.md-emo:hover{opacity:1;background:rgba(0,0,0,.6)}
.md-emopop{position:absolute;right:16px;bottom:180px;z-index:7;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;border-radius:14px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.md-emopop[hidden]{display:none}
.md-emopop button{width:42px;height:42px;border:0;border-radius:10px;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.md-emopop button:hover{background:rgba(255,255,255,.18)}
.video-player:not(.md-fs) .md-emo,.video-player:not(.md-fs) .md-emopop{display:none}

/* Our fullscreen button (the native one is hidden), above the control bar. */
.md-fsbtn{position:absolute;right:16px;bottom:76px;z-index:7;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .2s,background .2s}
.md-fsbtn:hover{opacity:1;background:rgba(0,0,0,.6)}