/* 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ă pe TOT site-ul. Stă sub conținut, deci pozele o acoperă.
   „fixed” ține toate grilele aliniate între ele (una peste alta nu apar decalate). */
html,
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; }
.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; }
}