/* DoramaNexo — abertura de 2,2 segundos, com temas claro e escuro. */
/* A escolha explícita do site tem prioridade sobre a preferência do sistema.
   As variáveis herdam do ancestral mais próximo. O atributo data-dn-theme
   permite adaptar sites com outro mecanismo de tema, sem mudar esse mecanismo. */
:where(html.dark, body.dark,
  html[data-theme="dark"], body[data-theme="dark"],
  html[data-bs-theme="dark"], body[data-bs-theme="dark"],
  html[data-color-scheme="dark"], body[data-color-scheme="dark"]),
[data-dn-theme="dark"] {
  --dn-theme-scheme: dark;
  --dn-theme-bg: #0b0e11;
  --dn-theme-ink: #ffffff;
  --dn-theme-accent: #1cc749;
  --dn-theme-muted: #c8d0d5;
  --dn-theme-border: #ffffff24;
  --dn-theme-border-hover: #ffffff66;
}
:where(html.light, body.light,
  html[data-theme="light"], body[data-theme="light"],
  html[data-bs-theme="light"], body[data-bs-theme="light"],
  html[data-color-scheme="light"], body[data-color-scheme="light"]),
[data-dn-theme="light"] {
  --dn-theme-scheme: light;
  --dn-theme-bg: #f6f8f7;
  --dn-theme-ink: #14221b;
  --dn-theme-accent: #128033;
  --dn-theme-muted: #4b5b52;
  --dn-theme-border: #14221b24;
  --dn-theme-border-hover: #14221b66;
}
.dn-overlay {
  --dn-intro-ready: 1;
  --dn-intro-duration: 2200ms;
  --dn-system-scheme: light;
  --dn-system-bg: #f6f8f7;
  --dn-system-ink: #14221b;
  --dn-system-accent: #128033;
  --dn-system-muted: #4b5b52;
  --dn-system-border: #14221b24;
  --dn-system-border-hover: #14221b66;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color-scheme: var(--dn-theme-scheme, var(--dn-system-scheme));
  background: var(--dn-theme-bg, var(--dn-system-bg));
  color: var(--dn-theme-ink, var(--dn-system-ink));
  font-family: Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .dn-overlay {
    --dn-system-scheme: dark;
    --dn-system-bg: #0b0e11;
    --dn-system-ink: #ffffff;
    --dn-system-accent: #1cc749;
    --dn-system-muted: #c8d0d5;
    --dn-system-border: #ffffff24;
    --dn-system-border-hover: #ffffff66;
  }
}
.dn-overlay[hidden] { display: none !important; }
.dn-overlay::before {
  content: "";
  position: absolute;
  inset: 12% 0;
  background: radial-gradient(ellipse at center, rgba(28,199,73,.075), transparent 64%);
  pointer-events: none;
}
.dn-overlay__mark {
  position: relative;
  width: min(76vw, 690px);
  line-height: 0;
}
.dn-overlay__logo { display: block; width: 100%; height: auto; overflow: visible; }
.dn-overlay__skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 10px 18px;
  color: var(--dn-theme-muted, var(--dn-system-muted));
  background: transparent;
  border: 1px solid var(--dn-theme-border, var(--dn-system-border));
  border-radius: 999px;
  font: 14px/1.4 Arial, sans-serif;
  cursor: pointer;
}
.dn-overlay__skip:hover { color: var(--dn-theme-ink, var(--dn-system-ink)); border-color: var(--dn-theme-border-hover, var(--dn-system-border-hover)); }
.dn-overlay__skip:focus-visible { outline: 2px solid var(--dn-theme-accent, var(--dn-system-accent)); outline-offset: 4px; }
.dn-overlay [data-dn-part="icone"] { fill: var(--dn-theme-accent, var(--dn-system-accent)); }
.dn-overlay [data-dn-part="corpo"] { stroke: var(--dn-theme-accent, var(--dn-system-accent)); }
.dn-overlay [data-dn-part="dorama"] { fill: var(--dn-theme-ink, var(--dn-system-ink)); stroke: var(--dn-theme-ink, var(--dn-system-ink)); }
.dn-overlay [data-dn-part="nexo"] { fill: var(--dn-theme-accent, var(--dn-system-accent)); stroke: var(--dn-theme-accent, var(--dn-system-accent)); }
.dn-overlay [data-dn-part="icone"] { transform-box: view-box; transform-origin: 80px 106px; }
.dn-overlay [data-dn-part="tampa"] { transform-box: view-box; transform-origin: 8px 63px; }
.dn-overlay [data-dn-part="corpo"] { transform-box: view-box; transform-origin: 80px 145px; }
.dn-overlay [data-dn-part="play"] { transform-box: view-box; transform-origin: 80px 106px; }
.dn-overlay [data-dn-part="nome"] { transform-box: view-box; transform-origin: 199px 91px; }
.dn-is-playing .dn-overlay {
  animation: dn-overlay-away var(--dn-intro-duration) linear 1 both;
}
.dn-is-playing .dn-overlay__mark {
  animation: dn-mark-away var(--dn-intro-duration) cubic-bezier(.22,.61,.36,1) 1 both;
}
.dn-is-playing .dn-overlay [data-dn-part="icone"] {
  animation: dn-icon-arrive var(--dn-intro-duration) cubic-bezier(.22,.61,.36,1) 1 both;
}
.dn-is-playing .dn-overlay [data-dn-part="tampa"] {
  animation: dn-lid-close var(--dn-intro-duration) cubic-bezier(.45,0,.25,1) 1 both;
}
.dn-is-playing .dn-overlay [data-dn-part="corpo"] {
  animation: dn-body-tap var(--dn-intro-duration) ease-out 1 both;
}
.dn-is-playing .dn-overlay [data-dn-part="play"] {
  animation: dn-play-light var(--dn-intro-duration) cubic-bezier(.22,.61,.36,1) 1 both;
}
.dn-is-playing .dn-overlay [data-dn-part="nome"] {
  animation: dn-name-arrive var(--dn-intro-duration) cubic-bezier(.22,.61,.36,1) 1 both;
}
@keyframes dn-icon-arrive {
  0% { opacity: 0; transform: translate(406.5px, 12px) scale(.84); }
  16% { opacity: 1; transform: translate(406.5px, 0) scale(1.12); }
  31% { opacity: 1; transform: translate(406.5px, 0) scale(1.12); }
  53%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes dn-lid-close {
  0%, 20% { transform: rotate(0deg); }
  31%, 34% { transform: rotate(15deg); }
  49%, 100% { transform: rotate(0deg); }
}
@keyframes dn-body-tap {
  0%, 30% { transform: translateY(0) scaleY(1); }
  32% { transform: translateY(1.5px) scaleY(.965); }
  40%, 100% { transform: translateY(0) scaleY(1); }
}
@keyframes dn-play-light {
  0% { opacity: 0; transform: scale(.55); }
  19% { opacity: 1; transform: scale(.88); }
  34% { opacity: 1; transform: scale(1.14); }
  46%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes dn-name-arrive {
  0%, 32% { opacity: 0; transform: translateX(22px); }
  56%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes dn-mark-away {
  0%, 77.27% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(1.025); }
}
@keyframes dn-overlay-away {
  0%, 77.27% { opacity: 1; visibility: visible; }
  99.99% { visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@media (max-width: 480px) {
  .dn-overlay__mark { width: 84vw; }
  .dn-overlay__skip { right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .dn-overlay { display: none !important; }
  .dn-is-playing .dn-overlay,
  .dn-is-playing .dn-overlay__mark,
  .dn-is-playing .dn-overlay [data-dn-part] { animation: none !important; }
}