/* Videomakeremily · base: cores, tipografia, botões, formulários, janelas e player */
/* Layout: cinematic dark single-theme (the brand's deliberate look). Wide editorial columns, full-bleed film frames, tracked sans labels over a light serif. */
:root{
  --ink:#0d0b09; --ink-2:#15120e; --ink-3:#1d1914; --ink-4:#29231c;
  --line:rgba(239,231,218,.10); --line-2:rgba(239,231,218,.20);
  --ivory:#f2ebdf; --muted:#cdc3b3; --dim:#aba194;
  --gold:#dbbd8f; --gold-2:#ecd6b0; --gold-deep:#9c7b4e;
  --paper:#f4eee4; --paper-ink:#2b241c; --paper-muted:#665a49; --paper-line:#d8cdbb;
  --ok:#a3c4a8; --warn:#ddb874; --bad:#e0907e;
  --f-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --f-sans:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --f-script:"Pinyon Script","Snell Roundhand","Apple Chancery","Brush Script MT",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--ivory)}
body{font-family:var(--f-sans);font-weight:400;font-size:15px;line-height:1.6;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
p{margin:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::placeholder{color:var(--dim);opacity:1}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* type */
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:500}
.display{font-family:var(--f-display);font-weight:300;font-size:clamp(46px,7.6vw,104px);line-height:.96;letter-spacing:-.01em;margin:0;text-wrap:balance}
.display em,.h2 em,.c-title em{font-style:italic;color:var(--gold-2)}
.h2{font-family:var(--f-display);font-weight:300;font-size:clamp(36px,4.8vw,62px);line-height:1.02;margin:0;text-wrap:balance}
.lede{font-size:clamp(15px,1.35vw,17px);color:var(--muted);max-width:54ch}
.muted{color:var(--muted)}
.amp{font-style:italic;color:var(--gold-2);font-weight:300}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:background .35s,color .35s,border-color .35s,transform .35s;white-space:nowrap;text-decoration:none}
.btn svg{width:14px;height:14px;flex:none}
.btn-solid{background:var(--ivory);color:var(--ink)}
.btn-solid:hover{background:var(--gold-2)}
.btn-line{border:1px solid var(--line-2);color:var(--ivory)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-glass{background:rgba(239,231,218,.12);border:1px solid rgba(239,231,218,.28);color:var(--ivory);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(239,231,218,.22)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-2)}
.btn-danger{border:1px solid rgba(224,144,126,.35);color:var(--bad)}
.btn-danger.armed{background:var(--bad);color:var(--ink)}
.btn-sm{min-height:40px;padding:0 18px;font-size:10.5px;letter-spacing:.16em}
.icon-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;color:var(--muted);border:1px solid var(--line);transition:color .3s,border-color .3s}
.icon-btn:hover{color:var(--ivory);border-color:var(--line-2)}
.icon-btn svg{width:16px;height:16px}

/* logo */
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none}
.logo-small{font-size:9px;letter-spacing:.46em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-left:3px}
.logo-script{font-family:var(--f-script);font-size:36px;color:var(--ivory);line-height:1.05;margin-top:-1px}

/* ========== ACCESS ========== */
.gate{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding-block:60px}
.gate .fill{filter:blur(14px) brightness(.4);transform:scale(1.1)}
.gate-card{width:min(440px,100%);display:grid;gap:22px;justify-items:center;text-align:center;padding:40px 28px;background:rgba(21,18,14,.72);border:1px solid var(--line-2);border-radius:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gate-card h1{font-family:var(--f-display);font-weight:300;font-size:42px;line-height:1;margin:0}
.gate-form{display:grid;gap:14px;width:100%}
.prefix-inp{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:0 6px 0 18px;background:rgba(13,11,9,.5);min-width:0}
.prefix-inp span{color:var(--dim);font-size:14px;white-space:nowrap}
.prefix-inp input{flex:1;min-width:0;background:transparent;border:0;padding:14px 8px 14px 2px;font-size:16px;color:var(--ivory)}
.prefix-inp input:focus{outline:none}
.prefix-inp:focus-within{border-color:var(--gold)}
.err{color:var(--bad);font-size:13px;min-height:1em}
.hint-sm{font-size:12.5px;color:var(--muted)}
.hint-sm button{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}

/* overlays */
.ov{position:fixed;inset:0;z-index:1000;background:rgba(6,5,4,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--ink-2);border:1px solid var(--line-2);border-radius:22px;width:min(580px,100%);max-height:100%;overflow:auto;padding:clamp(22px,4vw,36px);display:grid;gap:18px;position:relative}
.modal h2{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,38px);line-height:1.05;margin:0}
.modal .x{position:absolute;top:14px;right:14px}
.modal-list{display:grid;gap:14px;margin:4px 0}
.modal-list div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.modal-list b{font-weight:400;font-family:var(--f-display);font-style:italic;font-size:21px;line-height:1.1;color:var(--gold-2)}
.modal-list span{color:var(--muted);font-size:14px}
@media (max-width:480px){.modal-list div{grid-template-columns:1fr;gap:4px}}
.player{flex-direction:column;gap:14px}
.player-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));z-index:3}
.player-stage{position:relative;width:min(1120px,100%);aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;max-height:calc(100vh - 140px)}
.player-stage.vertical{width:auto;height:min(76vh,760px);aspect-ratio:9/16;max-width:100%}
.player-stage > canvas,.player-stage > video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.player-stage > canvas{object-fit:cover}
.sample-tag{position:absolute;left:14px;top:14px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;background:rgba(0,0,0,.5);padding:6px 11px;border-radius:999px;color:#f6f0e6;font-weight:500;z-index:2}
.title-card{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;opacity:0;transition:opacity 1.8s ease;padding:20px}
.title-card.on{opacity:1}
.tc-names{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,6vw,76px);line-height:1;margin-top:10px}
.pbar{width:min(1120px,100%);display:flex;align-items:center;gap:14px}
.player-stage.vertical + .pbar{width:min(430px,100%)}
.pp{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ivory);color:var(--ink);flex:none}
.pp svg{width:16px;height:16px}
.track{flex:1;height:22px;position:relative;cursor:pointer}
.track::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(239,231,218,.2);border-radius:2px}
.track-fill{position:absolute;left:0;top:10px;height:2px;background:var(--gold-2);width:0;border-radius:2px}
.time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.player-cap{font-family:var(--f-display);font-style:italic;font-size:22px}
.sheet{position:fixed;inset:0;z-index:1000;background:var(--ink);overflow:auto;animation:fade .3s ease}
.sheet-head{position:sticky;top:0;z-index:2;background:rgba(13,11,9,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.sheet-head-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;flex-wrap:wrap}
.sheet-title{display:grid;gap:2px}
.sheet-title h2{font-family:var(--f-display);font-weight:300;font-size:30px;line-height:1;margin:0}
.sheet-title span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sheet-tools{padding-block:18px 0}
@media (max-width:640px){.sheet-title{order:1}.tk-x{order:2;margin-left:auto}.tk-act{order:3;width:100%}.tk-act .btn{flex:1}}
.takes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding-block:18px 130px}
@media (max-width:480px){.takes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.take{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--ink-3);display:block;width:100%}
.take > img,.take > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.take-name{position:absolute;left:8px;bottom:7px;font-size:9.5px;letter-spacing:.08em;color:#fff;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.take .dur{right:6px;bottom:6px;font-size:10px;padding:2px 7px}
.take-check{position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(0,0,0,.3);display:none;place-items:center;color:var(--ink)}
.take-check svg{width:12px;height:12px}
.selecting .take-check{display:grid}
.take.sel{outline:2px solid var(--gold);outline-offset:-2px}
.take.sel .take-check{background:var(--gold);border-color:var(--gold)}

/* toasts */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1100;display:grid;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--ivory);color:var(--ink);padding:12px 18px;border-radius:14px;font-size:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);animation:tin .35s cubic-bezier(.2,.8,.2,1);font-weight:400}
.toast.bad{background:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* blocos usados em várias páginas */
.fill{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:-2}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;transition:all .3s}
.chip:hover{color:var(--ivory)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--ivory);background:rgba(201,169,120,.08)}
.frame{position:relative;overflow:hidden;border-radius:3px;background:var(--ink-3);max-width:100%}
.frame > img,.frame > video,.frame > canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.play-dot{position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(239,231,218,.14);border:1px solid rgba(239,231,218,.32);display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .4s,background .4s;color:var(--ivory)}
.play-dot svg{width:18px;height:18px;margin-left:2px}
.film:hover .play-dot,.moment:hover .play-dot,.feature:hover .play-dot{transform:translate(-50%,-50%) scale(1.08);background:rgba(239,231,218,.24)}
.dur{position:absolute;right:10px;bottom:10px;font-size:11px;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:rgba(8,6,5,.68);color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.meta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sign{font-family:var(--f-script);font-size:58px;color:var(--gold-2);line-height:1}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
@media (max-width:600px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.lab{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;font-size:16px;color:var(--ivory);border-radius:0;transition:border-color .3s}
.inp:focus{outline:none;border-color:var(--gold)}
select.inp option,select.box option{background:var(--ink-2);color:var(--ivory)}
textarea.inp{resize:vertical;min-height:96px}
.msgbox{white-space:pre-wrap;font-size:14px;color:var(--muted);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px;user-select:all}
.player-stage > iframe,.player-stage > img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.pbar{justify-content:space-between}
.empty-note{color:var(--muted);font-size:14px;padding:28px 0}
.skeleton{background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.loading-screen{min-height:100vh;display:grid;place-items:center;text-align:center;gap:14px}
.loading-screen .logo-script{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.player-cap{margin:0}
.foot-links a{color:inherit}
.player-stage.sizing > iframe{opacity:0}
.player-stage > iframe{transition:opacity .4s}
.player-stage.vertical{width:auto;height:min(78vh,780px,calc((100vw - 32px) * 1.7778));max-width:100%;max-height:none}