/* ── Variables ──────────────────────────────────────── */
:root {
    --gold:     #C9A84C;
    --gold-lt:  #E8D5A0;
    --gold-dk:  #8B6E2A;
    --dark:     #0a0a0a;
}

/* ── Base ───────────────────────────────────────────── */
body { font-family: 'Inter', system-ui, sans-serif; background: #0c0c0c; color: #f0f0f0; }
h1, h2, h3, .font-display { font-family: 'Playfair Display', Georgia, serif; }

/* ── Logo gold (no webkit fill-color — avoids invisible text) */
.logo-cmd { color: var(--gold); }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════
   REVEAL LA SCROLL — înlocuiește AOS (vezi scripts.php).
   Folosește aceleași atribute data-aos="fade-up"/"zoom-in".
════════════════════════════════════════════════════════ */
[data-aos] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-aos="fade-up"]  { transform: translateY(32px); }
[data-aos="zoom-in"]  { transform: scale(.92); }
[data-aos].reveal-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════
   FUNDAL PARTAJAT — „fixed scene" tip GTA V: un singur strat
   fix (#storyBgLayer în index.php), toate secțiunile de
   poveste îl au dedesubt; se schimbă doar prin crossfade de
   opacitate, niciodată prin deplasare fizică. NU dezactivăm
   tranziția la prefers-reduced-motion — e strict un fade de
   opacitate, fără mișcare reală, considerat sigur.
════════════════════════════════════════════════════════ */
.story-bg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    will-change: opacity;
}
.story-bg-slide.is-active {
    opacity: 1;
}
.story-bg-slide img {
    /* Bleed anti-artefact de blur făcut prin transform, NU prin width:calc(100%+80px) —
       pe telefon, ceva pe hosting (probabil optimizarea de imagini din cPanel) injectează
       max-width:100% pe <img>, care tăia calc()-ul înapoi la 100% și lăsa o dungă neagră
       needecorată pe marginea dreaptă. transform nu participă la layout, deci nu poate
       fi prins de niciun max-width — acoperă mereu tot ecranul, indiferent de asta. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
}
.story-bg-overlay {
    position: absolute;
    inset: 0;
}

/* ═══════════════════════════════════════════════════════
   OPENER — CSS animations on load
════════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes growLine {
    from { width: 0; }
    to   { width: 48px; }
}
@keyframes pulseDot {
    0%,100% { opacity: .5; transform: scaleY(1); }
    50%     { opacity: 1;  transform: scaleY(1.6); }
}

.opener-logo   { animation: fadeUp 1.1s 0.1s cubic-bezier(.22,1,.36,1) both; }
.opener-line   { animation: growLine 0.7s 0.8s ease both; }
.opener-tag    { animation: fadeUp 1s 0.9s cubic-bezier(.22,1,.36,1) both; }
.opener-sub    { animation: fadeUp 1s 1.2s cubic-bezier(.22,1,.36,1) both; }
.opener-cta    { animation: fadeUp 1s 1.5s cubic-bezier(.22,1,.36,1) both; }

.scroll-cue span {
    display: block;
    width: 3px; height: 8px;
    background: var(--gold);
    border-radius: 2px;
    animation: pulseDot 1.2s infinite;
}
.scroll-cue span:nth-child(2) { animation-delay: .15s; }
.scroll-cue span:nth-child(3) { animation-delay: .30s; }

/* bară de progres a paginii (scroll simplu, vezi scripts.php) */
.story-progress-bar {
    position: fixed;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--gold);
    z-index: 100;
    transition: width .05s linear;
    width: 0%;
}

/* ═══════════════════════════════════════════════════════
   SERVICE CARDS
════════════════════════════════════════════════════════ */
.card-story {
    background: #141414;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                border-color .3s ease,
                box-shadow .4s ease;
}
.card-story:hover {
    transform: translateY(-6px);
    border-color: rgba(201,168,76,.4);
    box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.15);
}
.card-story img {
    width: 100%; height: 220px; object-fit: cover;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.card-story:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════
   MOBILE OVERRIDES  (≤ 767px)
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .story-progress-bar { display: none !important; }

    /* ── Two-column grids → single column ────────── */
    .two-col-grid {
        grid-template-columns: 1fr   !important;
        gap:                   2rem  !important;
    }

    /* ── Section padding: reduce on mobile ─────────── */
    .section-padded {
        padding-top:    4rem   !important;
        padding-bottom: 4rem   !important;
    }

    /* ── Page heroes: shorter on mobile ────────────── */
    section[style*="height:55vh"],
    section[style*="height:60vh"],
    section[style*="height:50vh"],
    section[style*="height:45vh"] {
        height: 40vh !important;
    }

    /* ── Cards: remove hover transform on touch ──── */
    .card-story:hover { transform: none !important; }

    /* ── Headings: tighten on small screens ────────── */
    h1, h2, h3 { letter-spacing: -.01em !important; }
}

/* ═══════════════════════════════════════════════════════
   NAV LINKS — gold glow underline on hover
════════════════════════════════════════════════════════ */
.nav-link {
    position: relative;
    color: rgba(255,255,255,.75);
    transition: color .25s ease;
    padding-bottom: 4px;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease, box-shadow .35s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
    color: var(--gold-lt);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 8px 1px rgba(201,168,76,.85), 0 0 18px 4px rgba(201,168,76,.45);
}
.nav-link.is-active {
    color: var(--gold);
}
.nav-link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 6px 1px rgba(201,168,76,.5);
}

/* ═══════════════════════════════════════════════════════
   SCROLL ZONES — hover sus/jos = auto-scroll continuu,
   click pe săgeată = jump direct la început/sfârșit
════════════════════════════════════════════════════════ */
.scroll-zone {
    position: fixed;
    left: 0;
    right: 0;
    height: 140px;
    display: flex;
    justify-content: center;
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.scroll-zone.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.scroll-zone-top {
    top: 92px;                 /* poziția normală — sub header, când e vizibil */
    align-items: flex-start;
    padding-top: .15rem;       /* săgeata cât mai sus, lipită de header */
    transition: opacity .4s ease, top .4s cubic-bezier(.22,1,.36,1);
}
/* header-ul se ascunde la scroll în jos (vezi header.php) — săgeata urcă
   mai sus, spre marginea ecranului; când header-ul reapare, coboară înapoi */
body.header-hidden .scroll-zone-top {
    top: 14px;
}
.scroll-zone-bottom {
    bottom: 0;
    align-items: flex-end;
    padding-bottom: .5rem;     /* săgeata cât mai jos, lipită de marginea ecranului */
    background: linear-gradient(to top, rgba(0,0,0,.32), transparent);
    z-index: 60;                /* peste footer, cât timp e vizibil */
}
.scroll-zone-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,.6);
    border: 1px solid rgba(201,168,76,.45);
    color: var(--gold);
    cursor: pointer;
    backdrop-filter: blur(6px);
    font-size: 1.25rem;
    transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.scroll-zone:hover .scroll-zone-btn {
    transform: scale(1.08);
    border-color: var(--gold);
    box-shadow: 0 0 18px 3px rgba(201,168,76,.55);
    background: rgba(10,10,10,.85);
}
@media (max-width: 767px) {
    .scroll-zone { display: none; }
}

/* ── Utility ─────────────────────────────────────────── */
.text-gold   { color: var(--gold); }
.bg-gold     { background: var(--gold); }
.border-gold { border-color: var(--gold); }
.gold-line   { display: inline-block; width: 48px; height: 2px; background: var(--gold); }