/* =============================================================================
   OVERLAYS  |  "Thank you" message and the showreel window.
   HTML: index.html -> <!-- SECTION: OVERLAYS -->     JS: js/contact.js, js/hero.js
   Edit only this file when you want to change how overlays looks.
   ============================================================================= */

.toast{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100% - 2rem);padding:.9rem 1.3rem;display:flex;gap:.7rem;align-items:center;border-radius:99px;
  transform:translate(-50%,200%) scale(.9);opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.2,1.3,.4,1),opacity .4s}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}
@media(max-width:819px){
  .toast{bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
}
.toast .ok{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:700;font-size:.85rem}
.toast.error .ok{background:var(--ink)}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(247,248,244,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s}
.modal.open{opacity:1;pointer-events:auto}
.mbox{position:relative;width:min(980px,100%);padding:.6rem;transform:scale(.9) translateY(20px);transition:transform .55s cubic-bezier(.2,1.1,.3,1)}
.modal.open .mbox{transform:none}
.mp{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000}
.mp iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.x{position:absolute;top:-14px;right:-6px;z-index:2}
[data-theme=dark] .modal{background:rgba(6,6,7,.72)}
[data-theme=dark] .toast.error .ok{background:var(--ink);color:#0a0a0a}