/* Makker OS — abertura cinematográfica e login
   Desenvolvido por Caçador Digital (cacadordigital.com.br) */

/* ================= ABERTURA ================= */
.intro { position: fixed; inset: 0; z-index: 1000; background: #050608; color: #fff; overflow: hidden; display: grid; place-items: center; cursor: pointer; transition: opacity 1s ease, transform 1.2s cubic-bezier(.6,0,.2,1), filter 1s; }
.intro.saindo { opacity: 0; transform: scale(1.12); filter: blur(6px); pointer-events: none; }
.intro-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: in-fade 1.6s .2s ease forwards; }
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.85) 100%); }

/* faixas de cinema */
.intro-barra { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 5; animation: in-barra .9s cubic-bezier(.7,0,.2,1) forwards; }
.intro-barra.cima { top: 0; } .intro-barra.baixo { bottom: 0; }
.intro.saindo .intro-barra { animation: out-barra .8s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes in-barra { to { height: 11vh; } }
@keyframes out-barra { from { height: 11vh; } to { height: 0; } }

/* flare anamórfico */
.intro-flare { position: absolute; left: 50%; top: 50%; width: 120vw; height: 2px; transform: translate(-50%, -50%) scaleX(0); z-index: 2; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 80%, transparent) 30%, #fff 50%, color-mix(in srgb, var(--acc) 80%, transparent) 70%, transparent);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 80px 10px color-mix(in srgb, var(--acc) 25%, transparent);
  animation: in-flare 2.2s .35s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-flare.f2 { height: 140px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%); box-shadow: none; animation: in-flare2 3s .5s ease forwards; }
@keyframes in-flare { 0% { opacity: 0; transform: translate(-50%,-50%) scaleX(0); } 30% { opacity: 1; } 60% { opacity: .9; transform: translate(-50%,-50%) scaleX(1); } 100% { opacity: .18; transform: translate(-50%,-50%) scaleX(1.1); } }
@keyframes in-flare2 { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .35; } }

/* cena 1: marca Makker OS */
.intro-cena { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.c1 { animation: out-c1 .7s 2.7s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes out-c1 { to { opacity: 0; transform: scale(1.25); filter: blur(10px); letter-spacing: .2em; } }
.intro-mark { width: 96px; height: 96px; overflow: visible; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--acc) 50%, transparent)); }
.m-box { fill: transparent; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 120; stroke-dashoffset: 120; animation: m-draw 1s .6s cubic-bezier(.6,0,.2,1) forwards, m-fill .6s 1.6s ease forwards; }
.m-path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: m-draw .8s 1.05s cubic-bezier(.6,0,.2,1) forwards, m-ink .6s 1.6s ease forwards; }
.m-dot { fill: var(--acc); transform-origin: 24.5px 7.5px; transform: scale(0); animation: m-pop .5s 1.75s cubic-bezier(.3,1.8,.5,1) forwards; }
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-fill { to { fill: #fff; } }
@keyframes m-ink { to { stroke: #07080B; } }
@keyframes m-pop { to { transform: scale(1); } }
.intro-word { margin-top: 22px; font-size: 52px; font-weight: 750; letter-spacing: -.04em; display: flex; align-items: center; gap: 2px; }
.intro-word span { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(14px); animation: in-letra .7s calc(1.35s + var(--i) * .06s) cubic-bezier(.2,.8,.2,1) forwards; }
.intro-word b { margin-left: 12px; font-size: 15px; letter-spacing: .14em; padding: 5px 9px; border-radius: 8px; background: #fff; color: #07080B; opacity: 0; transform: scale(.6); animation: m-pop2 .5s 1.95s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes in-letra { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes m-pop2 { to { opacity: 1; transform: scale(1); } }

/* cena 2: empresa */
.c2 { opacity: 0; animation: in-c2 .1s 3s forwards; }
@keyframes in-c2 { to { opacity: 1; } }
.intro-apresenta { font-size: 13px; letter-spacing: .5em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; animation: in-sobe .8s 3.05s ease forwards; padding-left: .5em; }
.intro-logo { position: relative; margin: 22px 0 18px; width: 150px; height: 150px; border-radius: 36px; background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 30px 80px -10px color-mix(in srgb, var(--acc) 60%, transparent), 0 0 120px color-mix(in srgb, var(--acc) 25%, transparent);
  opacity: 0; transform: scale(.82) rotateX(25deg); filter: blur(8px); animation: in-logo 1.1s 3.2s cubic-bezier(.2,.9,.2,1) forwards; }
.intro-logo img { width: 80%; height: 80%; object-fit: contain; }
.intro-ini { font-size: 48px; font-weight: 800; color: #07080B; }
.intro-shine { position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%); transform: translateX(-100%); mix-blend-mode: overlay; animation: shine 1.3s 3.9s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes in-logo { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes shine { to { transform: translateX(100%); } }
.intro-nome { font-size: 26px; font-weight: 650; letter-spacing: .02em; max-width: 80vw; opacity: 0; animation: in-nome 1.2s 3.7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes in-nome { from { opacity: 0; letter-spacing: .35em; filter: blur(6px); } to { opacity: 1; letter-spacing: .01em; filter: blur(0); } }
@keyframes in-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes in-fade { to { opacity: 1; } }

.intro-grao, .lg-grao { position: absolute; inset: -50%; z-index: 6; pointer-events: none; opacity: .09; animation: grao .9s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grao { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.intro-pular { position: absolute; z-index: 7; right: 28px; bottom: calc(11vh + 18px); background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; cursor: pointer; backdrop-filter: blur(6px); opacity: 0; animation: in-fade .6s 1s forwards; }
.intro-pular:hover { color: #fff; background: rgba(255,255,255,.16); }

/* ================= LOGIN ================= */
.lg { position: fixed; inset: 0; overflow: hidden auto; background: #06070A; color: #fff; display: flex; flex-direction: column; color-scheme: dark; }
.lg-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lg-vinheta { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 30% 50%, transparent 30%, rgba(4,5,8,.75) 100%), linear-gradient(180deg, rgba(4,5,8,.6), transparent 25%, transparent 70%, rgba(4,5,8,.85)); }
.lg-grao { position: fixed; z-index: 2; opacity: .06; }
.lg > header, .lg > main, .lg > footer { position: relative; z-index: 3; }
.lg-top { display: flex; align-items: center; gap: 10px; padding: 26px 44px; }
.lg-top .mk-word { font-size: 18px; color: #fff; }
.lg-top .mk-word .os { background: #fff; color: #06070A; }
.lg-top .mk-mark rect { fill: #fff; } .lg-top .mk-mark path { stroke: #06070A; }
.lg-top .site { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,.55); text-decoration: none; border: 1px solid rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(8px); }
.lg-top .site:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.lg-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 430px); gap: 64px; align-items: center; padding: 10px 44px 30px; max-width: 1280px; width: 100%; margin: 0 auto; }

.lg-tenant { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); margin-bottom: 30px; }
.lg-tenant .tl { width: 56px; height: 56px; border-radius: 15px; background: #fff; display: grid; place-items: center; overflow: hidden; position: relative; }
.lg-tenant .tl img { width: 82%; height: 82%; object-fit: contain; }
.lg-tenant .tl b { color: #07080B; font-size: 18px; }
.lg-tenant .tl::after { content: ""; position: absolute; inset: -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%); mix-blend-mode: overlay; animation: shine-loop 5s 1.5s infinite; transform: translateX(-100%); }
@keyframes shine-loop { 0% { transform: translateX(-100%); } 22%, 100% { transform: translateX(100%); } }
.lg-tenant strong { display: block; font-size: 15.5px; }
.lg-tenant span { font-size: 12px; color: rgba(255,255,255,.55); }

.lg-titulo { font-size: clamp(40px, 5.6vw, 76px); line-height: .98; font-weight: 780; letter-spacing: -.045em; margin: 0; }
.lg-titulo .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.lg-titulo .ln > span { display: inline-block; transform: translateY(110%); animation: lg-linha 1.1s cubic-bezier(.2,.9,.1,1) forwards; }
.lg-titulo .ln:nth-child(2) > span { animation-delay: .12s; }
.lg-titulo em { font-style: normal; background: linear-gradient(100deg, color-mix(in srgb, var(--acc) 65%, #fff), var(--acc) 45%, #fff 55%, color-mix(in srgb, var(--acc) 85%, #fff)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho-texto 6s 1.2s ease-in-out infinite; }
@keyframes lg-linha { to { transform: none; } }
@keyframes brilho-texto { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lg-sub { margin: 22px 0 0; max-width: 520px; color: rgba(255,255,255,.66); font-size: 16.5px; line-height: 1.6; }
.lg-feats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.lg-feats div { display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: rgba(255,255,255,.85); backdrop-filter: blur(10px); }
.lg-feats svg { width: 17px; height: 17px; color: var(--acc); }
.lg-anim { opacity: 0; transform: translateY(18px); filter: blur(6px); animation: lg-entra 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes lg-entra { to { opacity: 1; transform: none; filter: blur(0); } }

/* cartão de vidro */
.lg-card-wrap { perspective: 1200px; }
.lg-card { position: relative; border-radius: 28px; padding: 34px 32px 28px; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18); transform-style: preserve-3d; transition: transform .25s ease-out; }
.lg-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), rgba(255,255,255,.08), color-mix(in srgb, var(--acc) 90%, transparent), rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.5), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: girar 7s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes girar { to { --ang: 360deg; } }
.lg-card .luz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--lx, 50%) var(--ly, 0%), rgba(255,255,255,.1), transparent 45%); }
.lg-card h2 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px; font-weight: 720; }
.lg-card p.sub { margin: 0 0 26px; color: rgba(255,255,255,.6); font-size: 14px; }
.lg-card.treme { animation: treme .45s; }
@keyframes treme { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

.fl { position: relative; margin-bottom: 14px; }
.fl input { width: 100%; height: 56px; padding: 22px 46px 6px 46px; border-radius: 15px; border: 1px solid rgba(255,255,255,.14); background: rgba(5,6,9,.45); color: #fff; outline: none; font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.fl input:focus { border-color: color-mix(in srgb, var(--acc) 85%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent); background: rgba(5,6,9,.6); }
.fl label { position: absolute; left: 46px; top: 18px; font-size: 15px; color: rgba(255,255,255,.5); pointer-events: none; transition: all .18s ease; }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { top: 8px; font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 600; letter-spacing: .02em; }
.fl > svg { position: absolute; left: 16px; top: 18px; width: 19px; height: 19px; color: rgba(255,255,255,.45); pointer-events: none; transition: color .2s; }
.fl input:focus ~ svg { color: var(--acc); }
.fl .olho { position: absolute; right: 8px; top: 9px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: rgba(255,255,255,.5); cursor: pointer; display: grid; place-items: center; }
.fl .olho:hover { color: #fff; background: rgba(255,255,255,.08); }
.fl .olho svg { width: 18px; height: 18px; }
.lg-linha { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 22px; font-size: 13px; color: rgba(255,255,255,.6); }
.lg-linha label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.lg-linha input { accent-color: var(--acc); width: 16px; height: 16px; }
.lg-btn { position: relative; overflow: hidden; width: 100%; height: 56px; border: 0; border-radius: 16px; cursor: pointer; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  background: var(--acc); color: var(--acc-ink); display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--acc) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s, box-shadow .2s, filter .2s; }
.lg-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 22px 50px -12px color-mix(in srgb, var(--acc) 95%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: btn-brilho 3.8s 2s ease-in-out infinite; }
@keyframes btn-brilho { 0% { left: -60%; } 30%, 100% { left: 130%; } }
.lg-btn svg { width: 19px; height: 19px; transition: transform .2s; }
.lg-btn:hover svg { transform: translateX(4px); }
.lg-btn.carregando { pointer-events: none; }
.lg-btn.carregando span, .lg-btn.carregando svg { opacity: 0; }
.lg-btn.carregando::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.lg-erro { min-height: 20px; font-size: 13px; color: #FF8A80; margin: -6px 2px 12px; }
.lg-card .rodape { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.45); text-align: center; }
.lg-card .rodape a { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; }
.lg-foot { padding: 18px 44px 24px; font-size: 12px; color: rgba(255,255,255,.4); display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.lg-foot a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; }
.lg-foot a:hover { color: #fff; }

/* transição ao entrar */
.lg.entrando .lg-main, .lg.entrando .lg-top, .lg.entrando .lg-foot { transition: opacity .7s ease, transform 1s cubic-bezier(.6,0,.2,1), filter .7s; opacity: 0; transform: scale(1.08); filter: blur(8px); }
.lg-flash { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff, color-mix(in srgb, var(--acc) 60%, #fff) 30%, transparent 70%); }
.lg.entrando .lg-flash { animation: flash 1.1s .35s ease forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(2.2); } }
.app-entra { animation: app-entra .8s cubic-bezier(.2,.8,.2,1); }
@keyframes app-entra { from { opacity: 0; transform: scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 960px) {
  .lg-main { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 24px; }
  .lg-top { padding: 18px 20px; }
  .lg-top .site { display: none; }
  .lg-titulo { font-size: 40px; }
  .lg-sub { font-size: 15px; margin-top: 14px; }
  .lg-feats { display: none; }
  .lg-tenant { margin-bottom: 18px; }
  .lg-card { padding: 26px 20px 20px; border-radius: 24px; }
  .lg-foot { padding: 12px 20px 20px; justify-content: center; text-align: center; }
  .intro-word { font-size: 38px; }
  .intro-mark { width: 74px; height: 74px; }
  .intro-logo { width: 120px; height: 120px; border-radius: 30px; }
  .intro-nome { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-anim, .lg-titulo .ln > span { animation: none; opacity: 1; transform: none; filter: none; }
  .lg-card::before, .lg-btn::after, .lg-tenant .tl::after, .lg-titulo em, .lg-grao { animation: none; }
}