/* ERLUS — small layer for what the Tailwind CDN can't express cleanly.
   Animation technique (reveal gating, magnetic, parallax) is reused from the
   ClaudeInHand lander; all visual tokens are ERLUS brand. */

/* ---- Component classes (Tailwind @apply isn't available on the Play CDN, so plain CSS) ---- */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1b;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover { color: #e42313; }
.nav-link--active { color: #e42313; }

.nav-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    min-width: 15rem;
    padding: 0.5rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 24px 50px -30px rgba(29, 29, 27, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.group:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drop-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #3d3d3d;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-drop-link:hover { background: #f8f8f8; color: #e42313; }

.mobile-link {
    display: block;
    padding: 0.7rem 0.5rem;
    border-radius: 0.55rem;
    font-weight: 600;
    color: #1d1d1b;
}
.mobile-link:hover { background: #f8f8f8; }
.mobile-sublink {
    display: block;
    padding: 0.5rem;
    font-size: 0.9rem;
    color: #3d3d3d;
}
.mobile-sublink:hover { color: #e42313; }
.mobile-details > summary { list-style: none; }
.mobile-details > summary::-webkit-details-marker { display: none; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 0.65rem;
    background: #e42313;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 18px 40px -22px rgba(228, 35, 19, 0.7);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { background: #c01d0f; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }

.footer-h { font-family: "Titillium Web", Inter, sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b2b2b2; }
.footer-link { color: #e5e5e5; transition: color 0.15s ease; }
.footer-link:hover { color: #e42313; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Titillium Web", Inter, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e42313;
}

/* ---- Forms ---- */
.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1b;
}
.form-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #1d1d1b;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
    outline: none;
    border-color: #e42313;
    box-shadow: 0 0 0 3px rgba(228, 35, 19, 0.12);
}
.form-error { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: #e42313; }
.input-validation-error { border-color: #e42313; }

/* ---- Catalog filter buttons ---- */
.filter-btn {
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3d3d3d;
    background: #fff;
    border: 1px solid #e5e5e5;
    transition: all 0.18s ease;
}
.filter-btn:hover { border-color: #b2b2b2; }
.filter-btn.is-active {
    background: #e42313;
    border-color: #e42313;
    color: #fff;
    box-shadow: 0 12px 26px -16px rgba(228, 35, 19, 0.8);
}

/* ---- Reveal animations: initial states gated behind .js so content never hides
       if the GSAP CDN fails (technique reused from ClaudeInHand). ---- */
.js [data-reveal],
.js [data-hero-item] {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-hero-item] { opacity: 1; transform: none; }
}

/* ---- Scroll progress bar (width set in site.js) ---- */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0;
    z-index: 60;
    background: linear-gradient(90deg, #c01d0f, #e42313);
    box-shadow: 0 0 10px rgba(228, 35, 19, 0.6);
    transition: width 0.08s linear;
    pointer-events: none;
}

/* ---- Card hover lift ---- */
.card-lift { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover {
    transform: translateY(-6px);
    border-color: rgba(228, 35, 19, 0.35);
    box-shadow: 0 26px 50px -30px rgba(29, 29, 27, 0.45);
}

/* ---- FAQ / details chevron ---- */
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { display: inline-block; transition: transform 0.2s ease; }

/* ---- Hero carousel (Swiper) ---- */
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-slide { overflow: hidden; }
.hero-slide-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.08);
}
/* Ken Burns: slow zoom on the active slide */
.hero-swiper .swiper-slide-active .hero-slide-img {
    animation: ken-burns 7s ease-out forwards;
}
@keyframes ken-burns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0); }
}
.hero-swiper .swiper-pagination-bullet {
    width: 10px; height: 10px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.hero-swiper .swiper-pagination-bullet-active {
    width: 28px; border-radius: 5px; background: #e42313;
}

/* ---- Grand hero slow zoom ---- */
.grand-hero-img {
    transform: scale(1.06);
    animation: grand-zoom 14s ease-out forwards;
}
@keyframes grand-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
    .grand-hero-img { animation: none; transform: scale(1); }
}

/* ---- Roof pitch comparison (nizki nakloni) ---- */
.pitch-roof {
    transform-origin: left bottom;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Hail resistance scale (odpornost na točo) ---- */
.hirc-bar { transition: height 1s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- Headline shimmer accent ---- */
.shine {
    background-size: 220% auto;
    animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

/* ---- Animated counter baseline ---- */
.stat-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .shine { animation: none; }
    .hero-swiper .swiper-slide-active .hero-slide-img { animation: none; transform: scale(1); }
    #scroll-progress { transition: none; }
    .card-lift:hover { transform: none; }
}