/* Stiluri care nu țin de Tailwind. Încărcat înaintea Tailwind ca să evite ecranul alb la încărcare. */
html { background: #110f1c; color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: #110f1c; color: #ede9f8; }

/* Textura de grilă: doar în admin și în casetele mici marcate .bg-blueprint (ex. produsele fără poze).
   Pe site, în spatele paginilor e doar fundalul închis, până apare fundalul încărcat din admin.
   „fixed” ține toate grilele aliniate între ele (una peste alta nu apar decalate). */
html.admin-grid,
html.admin-grid body,
.bg-blueprint {
  background-image:
    linear-gradient(to right, rgb(182 124 255 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(182 124 255 / 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}

:focus-visible { outline: 2px solid #b67cff; outline-offset: 2px; }
.field-input:focus-visible { outline: none; }
.field-input[aria-invalid="true"] { border-color: rgb(255 93 82 / 0.7); }
::selection { background: rgb(182 124 255 / 0.35); }
[hidden] { display: none !important; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes voxel-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.voxel-drop { animation: voxel-drop .5s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .voxel-drop { animation: none; }
}

/* ---------- Animații la derulare (secțiunea „Why MythralCreations?”) ----------
   Clasa reveal-ready se pune din JS; fără JS, totul rămâne vizibil. */
/* Starea ascunsă nu are tranziție: elementele nu „clipesc” la încărcare. */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); }
.reveal-ready .reveal.reveal-right { transform: translateX(48px); }
.reveal-ready .is-visible .reveal {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
}

/* Fundalul face un zoom lent când secțiunea apare pe ecran. */
.why-media { transform: scale(1.1); transition: transform 9s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
.is-visible .why-media, .why-static .why-media { transform: scale(1); }

/* Numărul cardului strălucește ușor la hover. */
.why-card:hover .why-num { text-shadow: 0 0 18px rgb(182 124 255 / .75); }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
  .why-media { transform: none; transition: none; }
}

/* ---------- Secțiunea „The Build Shop”: macheta 3D ---------- */
.shop-rig {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.shop-main { transform: perspective(1200px) rotateY(-16deg) rotateX(5deg); transform-origin: right center; }
.shop-side { transform: perspective(1200px) rotateY(-16deg) rotateX(5deg); transform-origin: left center; }
.shop-float { animation: shop-float 6s ease-in-out infinite; }
@keyframes shop-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

@media (prefers-reduced-motion: reduce) {
  .shop-float { animation: none; }
  .shop-rig { transition: none; }
}

/* ---------- Meniul mare de sub „Shop” ---------- */
.mega {
  position: absolute; /* stă peste pagină, nu o împinge în jos */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mega[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .mega, .mega[data-open] { transition: none; } }

/* ---------- Textul paginilor (admin → Pagini) ---------- */
.prose-page { color: #c9c3dd; line-height: 1.75; font-size: 1.0625rem; }
.prose-page > * + * { margin-top: 1.1em; }
.prose-page h2 { font-family: var(--font-display); color: #ede9f8; font-size: 1.6rem; font-weight: 600; line-height: 1.25; margin-top: 2em; }
.prose-page h3, .prose-page h4 { font-family: var(--font-display); color: #ede9f8; font-size: 1.25rem; font-weight: 600; margin-top: 1.6em; }
.prose-page strong { color: #ede9f8; font-weight: 600; }
.prose-page a { color: #b67cff; text-underline-offset: 3px; }
.prose-page a:hover { text-decoration: underline; }
.prose-page ul, .prose-page ol { padding-left: 1.4em; }
.prose-page ul { list-style: disc; }
.prose-page ol { list-style: decimal; }
.prose-page li + li { margin-top: .4em; }
.prose-page li::marker { color: #b67cff; }
.prose-page code { background: #201c33; border: 1px solid #342e50; border-radius: 6px; padding: .1em .4em; font-size: .9em; color: #ede9f8; overflow-wrap: anywhere; }
.prose-page { overflow-wrap: break-word; }
.prose-page img { max-width: 100%; height: auto; }
.prose-page hr { border: 0; border-top: 1px solid #342e50; margin: 2em 0; }

/* ---------- Pagina Contact: întrebările se deschid cu animație ---------- */
.faq-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.faq-panel > div { overflow: hidden; }
.faq-item[data-open] .faq-panel { grid-template-rows: 1fr; opacity: 1; }
.faq-item .faq-chevron { transition: transform .3s ease; }
.faq-item[data-open] .faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq-panel, .faq-item .faq-chevron { transition: none; } }

/* ---------- Pagina Portfolio: chenare identice (16:10), oricât de late sau înalte sunt pozele ---------- */
.pf-tile { aspect-ratio: 16 / 10; overflow: hidden; display: block; width: 100%; }
.pf-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Fereastra pentru poze: cadru fix, toate pozele apar la aceeași mărime ---------- */
.lb-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: min(94vw, 1100px, calc(74vh * 1.6));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1628;
}
.lb-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-caption { min-height: 4.75rem; }

/* ---------- Secțiunile cu fundal (sus și „Why”): cel puțin cât ecranul, sub meniu ---------- */
.screen-section { min-height: calc(100vh - 57px); min-height: calc(100svh - 57px); }

/* Fundalul secțiunii de sus acoperă mereu toată secțiunea (ca la „Why”). */
#hero-bg { position: absolute; inset: 0; }
#hero-bg > img, #hero-glow { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero-bg > img { object-fit: cover; }
.hero-shade-left { position: absolute; inset: 0; }
.hero-shade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 10rem; }
/* Fundalul și umbrele stau în interiorul secțiunii, în spatele textului (nu acoperă meniul). */
#hero { position: relative; isolation: isolate; overflow: hidden; }
#hero-bg, .hero-shade-left, .hero-shade-bottom { z-index: -1; }
/* Meniul mare „Shop” stă mereu deasupra secțiunilor paginii. */
.mega { z-index: 60; }

/* Fundalul „Why” acoperă mereu toată secțiunea, în spatele textului (la fel ca secțiunea de sus). */
#why-us { position: relative; isolation: isolate; overflow: hidden; }
#why-bg { position: absolute; inset: 0; z-index: -1; }
#why-bg > img, #why-default { position: absolute; inset: 0; width: 100%; height: 100%; }
#why-bg > img { object-fit: cover; }
.why-shade-left { position: absolute; inset: 0; z-index: -1; }
.why-shade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; z-index: -1; }

/* ---------- Bara de derulare (scroll): violet, cu dungi diagonale ---------- */
/* Chrome, Edge, Safari, Opera: bara cu dungi. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0d0a16; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    repeating-linear-gradient(135deg, #8f72b0 0 6px, #74588f 6px 12px) padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
::-webkit-scrollbar-thumb:hover {
  background:
    repeating-linear-gradient(135deg, #a988d0 0 6px, #8a69ab 6px 12px) padding-box;
}
::-webkit-scrollbar-thumb:active {
  background:
    repeating-linear-gradient(135deg, #b98ef0 0 6px, #9a72c8 6px 12px) padding-box;
}
::-webkit-scrollbar-corner { background: #0d0a16; }
/* Firefox: nu permite dungi, așa că primește aceleași culori, simplu.
   (Doar în Firefox: dacă Chrome ar vedea aceste reguli, ar renunța la bara cu dungi.) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #8a6aab #0d0a16; }
}

/* ---------- Free maps: bannerul de sus (ca în magazin) ---------- */
.fm-banner { position: relative; isolation: isolate; overflow: hidden; }
#fm-bg, #fm-shade { position: absolute; inset: 0; z-index: -1; }
#fm-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Wiki: meniul din stânga ---------- */
/* Pe telefon: doar butonul „Wiki menu”; pe calculator: doar meniul din stânga. */
.wiki-desktop-nav { display: none; }
@media (min-width: 1024px) {
  .wiki-desktop-nav { display: block; }
  #wiki-menu-mobile { display: none; }
}
.wiki-link { display: block; border-left: 2px solid transparent; padding: 0.4rem 0.75rem; border-radius: 0 0.5rem 0.5rem 0; }
.wiki-link[aria-current="page"] { border-left-color: #b67cff; background: rgba(182, 124, 255, 0.12); }

/* ---------- Fundalul întregului site (admin → Site → Fundalul întregului site) ---------- */
/* Stă fix în spatele conținutului; corpul paginii devine transparent, ca poza să se vadă. */
#site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
#site-bg.on { opacity: 1; }
html.has-site-bg body { background: transparent !important; }

/* ---------- Mythral Lens: poza mică de sus intră din dreapta (o singură dată) ----------
   Cu „proiectul inițial” pus din admin devine comparația înainte / după: în stânga proiectul inițial, în dreapta render-ul. */
.ln-hero-media { opacity: 0; transform: translateX(72px); }
.ln-hero-media.is-in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s cubic-bezier(.16,.84,.3,1); }
.ln-ba { position: absolute; inset: 0; --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ln-ba img { pointer-events: none; }
.ln-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ln-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgb(255 255 255 / .92); box-shadow: 0 0 14px rgb(0 0 0 / .55); pointer-events: none; }
.ln-ba-knob { position: absolute; top: 50%; left: var(--pos); width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 9999px; display: grid; place-items: center;
  background: #fff; color: #120f1a; box-shadow: 0 8px 22px rgb(0 0 0 / .45), 0 0 0 4px rgb(182 124 255 / .35); cursor: ew-resize; transition: transform .2s ease; }
.ln-ba-knob:hover { transform: scale(1.08); }
.ln-ba-knob:focus-visible { outline: 3px solid var(--color-amethyst, #b67cff); outline-offset: 3px; }
.ln-ba-tag { position: absolute; top: .75rem; padding: .25rem .55rem; border-radius: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgb(10 8 16 / .72); backdrop-filter: blur(4px); pointer-events: none; transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .ln-hero-media, .ln-hero-media.is-in { transform: none; transition: opacity .3s linear; }
  .ln-ba-knob, .ln-ba-tag { transition: none; }
}