/* =========================================
   DRUTEX 40 LAT — CUSTOM ANIMATIONS
   Effects beyond animate.css / WOW.js globals.
   ========================================= */

/* =====================================================
   HERO intro
   ===================================================== */
.years-image {
    opacity: 0;
    animation: anniversaryZoomIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.hero-years {
    opacity: 0;
    animation: anniversaryFadeInUp 0.9s ease 0.7s forwards;
}

@keyframes anniversaryZoomIn {
    from { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
    to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes anniversaryFadeInUp {
    from { opacity: 0; transform: translate3d(0, 48px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* =====================================================
   STAT ITEMS hover
   ===================================================== */
.stat-item { transition: transform 0.3s ease; }
.stat-item:hover { transform: translateY(-6px); }

.stat-number { transition: color 0.3s ease, text-shadow 0.3s ease; }
.stat-item:hover .stat-number {
    text-shadow: 0 0 24px rgba(201, 168, 76, 0.45);
}

/* =====================================================
   HISTORIA nav stagger
   ===================================================== */
.historia-nav li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.historia-nav.in-view li {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   HISTORIA img — fade przy zmianie slajdu
   ===================================================== */
#historiaImg {
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

#historiaImg.img-changing {
    opacity: 0;
    transform: scale(0.96) translateY(14px);
}

/* HISTORIA year/desc fade */
.historia-year,
.historia-desc {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.historia-year.changing,
.historia-desc.changing {
    opacity: 0;
    transform: translateY(10px);
}

/* =====================================================
   WISHES — animowane orby w tle
   ===================================================== */
.wishes-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

@keyframes wishesGlow {
    0%   { opacity: 0.0; transform: scale(1);    }
    50%  { opacity: 1.0; transform: scale(1.12); }
    100% { opacity: 0.0; transform: scale(1);    }
}

.wishes-section::before,
.wishes-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0) 70%);
    z-index: 0;
}

.wishes-section::before {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -150px;
    animation: wishesGlow 8s ease-in-out infinite;
}

.wishes-section::after {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
    animation: wishesGlow 10s ease-in-out 3s infinite;
}

.wishes-section .container,
.wishes-section .wishes {
    position: relative;
    z-index: 1;
}

/* =====================================================
   PRODUKCJA reveal
   ===================================================== */
.produkcja-title {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1s ease, transform 1s ease;
}

.produkcja-section.in-view .produkcja-title {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   PARALLAX HERO — z opt-out na mobile (iOS bug)
   ===================================================== */
.hero-section { background-attachment: fixed; }

@media (max-width: 1024px) {
    .hero-section { background-attachment: scroll; }
}

/* =====================================================
   SCROLL INDICATOR
   ===================================================== */
@keyframes bounceDown {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: bounceDown 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 10;
    padding: 1rem;
    background: rgba(255, 255, 255, 1);
}

.scroll-indicator span {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #000;
    font-weight: 500;
}

.scroll-indicator svg { color: #C9A84C; }

@media (max-width: 767px) {
    .scroll-indicator { background: rgba(255, 255, 255, 0.5); }
}

/* =====================================================
   CURSOR GLOW (desktop only)
   ===================================================== */
.cursor-glow {
    position: fixed;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;
    transition: opacity 0.4s ease;
    opacity: 0;
    will-change: left, top;
}

@media (max-width: 1024px) {
    .cursor-glow { display: none; }
}

/* =====================================================
   REPEAT animations (IntersectionObserver — patrz JS)
   ===================================================== */
.wow-repeat-ready {
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.wow-repeat-ready.visible {
    opacity: 1 !important;
    transform: none !important;
}

.wow-repeat-ready.hidden {
    opacity: 0 !important;
    transform: translateY(36px) !important;
}

/* =====================================================
   STAT number sizing override (konwencja v3 poprawia sizing)
   ===================================================== */
.stat-number {
    font-size: clamp(1.6rem, 2.8vw, 2.6rem) !important;
    padding: 8px 0 !important;
    line-height: 1.1 !important;
}

@media (max-width: 768px) {
    .stat-number {
        font-size: 1.5rem !important;
        padding: 4px 0 !important;
    }
}