/* ============================================
   PREMIUM FX
   GSAP-driven scroll animation support styles
   ============================================ */

/* Reduce layout thrash on animated elements */
.hero-kinetic,
.hero-kinetic__title,
.card-scatter-stage .place-card,
.split-char .char,
.split-word .word,
.mask-reveal__panel,
.mask-reveal__circle {
    will-change: transform, opacity;
}

/* ============================================
   HOME HERO VIDEO BACKGROUND
   Sits above the fallback image slideshow (shown only if the
   video fails to load) and below the gradient overlay/shapes/kinetic title.
   ============================================ */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero__slideshow {
    z-index: 0;
}

/* ============================================
   LUXURY DARK-NAVY + GOLD THEME
   Page chrome only — component cards (place-card,
   gem-card, event-slide, forms) keep their light
   theme from styles.css for contrast.
   ============================================ */
body {
    background-color: var(--page-bg);
    color: var(--page-text);
}

.categories,
.neighborhoods,
.events-section {
    background: var(--page-bg);
}

.hidden-gems,
.contact,
.featured,
.filters-section {
    background: var(--page-bg-alt) !important;
}

.filters-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Gold shimmer sweep for section titles (index.html only) */
.section__title {
    background: linear-gradient(120deg, #ffe9a8 0%, #ffd700 25%, #b8860b 45%, #ffd700 65%, #ffe9a8 85%, #ffd700 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldTextShimmer 6s linear infinite;
}

.section__description {
    color: var(--page-text-secondary) !important;
}

/* .section__title uses background-clip:text + transparent text-fill-color
   for its gradient. That transparent fill inherits down into the .char
   spans the char-split reveal creates, which have no background of their
   own to clip — leaving every letter invisible. Give the split chars an
   explicit solid color so they're never see-through. */
.section__title.split-char .char {
    -webkit-text-fill-color: #ffd700;
    color: #ffd700;
}

.mask-reveal__base-inner h2,
.mask-reveal__panel-inner h2 {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
}

@keyframes goldTextShimmer {
    0% { background-position: 0% center; }
    100% { background-position: -250% center; }
}

/* Gold shimmer utility for buttons/dividers */
.gold-shimmer {
    position: relative;
    overflow: hidden;
}

.gold-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 45%, transparent 70%);
    background-size: 200% 100%;
    animation: goldSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goldSweep {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Header + footer become the FeelBG gold gradient on every page */
.header,
.header.scroll-header {
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%) !important;
}

.nav__actions .nav__toggle,
.language-indicator {
    background: rgba(10, 17, 40, 0.18) !important;
    color: var(--primary-dark) !important;
    border-color: rgba(10, 17, 40, 0.25) !important;
}

.nav__actions .nav__toggle:hover,
.language-indicator:hover {
    background: rgba(10, 17, 40, 0.3) !important;
}

.nav__logo-text {
    color: var(--primary-dark) !important;
}

/* The FeelBG logo artwork is gold-on-transparent — give it a navy plate
   so it stays legible against the new gold header/footer bars */
.nav__logo-link {
    background: rgba(10, 17, 40, 0.85);
    padding: 0.4rem 0.9rem;
    border-radius: 0.85rem;
}

.footer-main-logo {
    display: inline-block;
    background: rgba(10, 17, 40, 0.9);
    padding: 1.25rem 1.75rem;
    border-radius: 1.25rem;
}

/* Home page only: no static logo in the header — the kinetic FeelBG
   title (Phase 1) already carries the branding there. opacity (not
   display:none) keeps the element's layout box intact so the kinetic
   title's scroll animation can still measure it as its landing target. */
.page-home .nav__logo-link {
    opacity: 0;
    pointer-events: none;
}

.footer {
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 55%, #b8860b 100%) !important;
    color: #14204a !important;
}

.footer__title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #0f1e4d !important;
}

.footer__subtitle {
    color: #14204a !important;
}

.footer__text,
.footer__trust span {
    color: rgba(15, 30, 77, 0.8) !important;
}

.footer__links a {
    color: rgba(15, 30, 77, 0.75) !important;
}

.footer__links a:hover {
    color: #0f1e4d !important;
}

.footer__trust i,
.footer-logo-section .logo-accent {
    color: #0f1e4d !important;
}

.footer__bottom {
    border-top-color: rgba(15, 30, 77, 0.2) !important;
    color: rgba(15, 30, 77, 0.65) !important;
}

.footer__bottom-links a {
    color: rgba(15, 30, 77, 0.65) !important;
}

.footer__bottom-links a:hover {
    color: #0f1e4d !important;
}

.social__link {
    background: rgba(15, 30, 77, 0.12) !important;
    color: #14204a !important;
}

/* ============================================
   PHASE 1 — KINETIC HERO TITLE
   FeelBG shrinks into the navbar logo while the
   "Discover the Heart of Serbia" tagline stays put
   underneath — both are always visible, no overlap.
   ============================================ */
.hero-kinetic {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    pointer-events: none;
    z-index: 90;
    opacity: 1;
}

.hero-kinetic__title {
    margin: 0;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: clamp(3rem, 13vw, 11rem);
    color: #ffffff;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform-origin: 50% 50%;
    white-space: nowrap;
}

/* Fallback colors in case the Tailwind CDN script fails to load
   (network hiccup / ad-blocker) — matches the Tailwind utility values
   so the two never disagree when Tailwind does load. */
.mask-reveal__base-inner h2,
.mask-reveal__base-inner p {
    color: #ffffff;
}

.mask-reveal__panel-inner h2 {
    color: var(--primary-color);
}

.mask-reveal__panel-inner p {
    color: var(--text-secondary);
}

.detail-modal__category-tag {
    color: #ffffff;
}

body.hero-kinetic-done .hero-kinetic {
    visibility: hidden;
}

.hero__container {
    margin-top: 32vh;
}

@media (max-width: 767px) {
    .hero-kinetic {
        padding-top: 10vh;
    }
    .hero-kinetic__title {
        font-size: clamp(2.5rem, 18vw, 5rem);
    }
    .hero__container {
        margin-top: 24vh;
    }
}

/* ============================================
   PHASE 2 — 3D PERSPECTIVE CARD SCATTER
   ============================================ */
.card-scatter-stage {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.card-scatter-stage .places-grid {
    transform-style: preserve-3d;
}

.card-scatter-stage .place-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Premium hover refinements for business cards */
.place-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-position 0.6s ease;
}

.place-card:hover {
    box-shadow: 0 30px 70px -20px rgba(30, 58, 138, 0.4), 0 10px 30px -10px rgba(184, 134, 11, 0.3);
}

/* Gold texture for business cards + their detail popup — same family as
   the header/footer gold, with dark-navy text for contrast. */
.place-card,
.detail-modal {
    background: linear-gradient(135deg, #b8860b 0%, #ffe9a8 30%, #ffd700 50%, #ffe9a8 70%, #b8860b 100%);
    background-size: 220% 220%;
}

.place-card:hover {
    background-position: 100% 0;
}

.place-card__title,
.detail-modal__title {
    color: #14204a;
}

.place-card__cuisine,
.place-card__location,
.place-card__description,
.detail-modal__location,
.detail-modal__desc {
    color: rgba(20, 32, 74, 0.8);
}

.place-card__cuisine i,
.place-card__location i {
    color: #14204a;
}

.place-card__rating,
.detail-modal__rating {
    background: rgba(255, 255, 255, 0.4);
    color: #14204a;
}

.place-card__meta {
    border-top-color: rgba(20, 32, 74, 0.2);
    border-bottom-color: rgba(20, 32, 74, 0.2);
}

.price-range {
    color: #14204a;
}

.place-card__heart {
    background: rgba(255, 255, 255, 0.55);
}

.btn-icon {
    background: rgba(255, 255, 255, 0.4);
    color: #14204a;
}

.btn-icon:hover {
    background: #14204a;
    color: #ffd700;
}

.btn-details {
    background: linear-gradient(135deg, #14204a 0%, #1e3a8a 100%);
    color: #ffd700;
}

.detail-modal__section-title {
    color: #14204a !important;
}

.detail-modal__info {
    background: rgba(10, 17, 40, 0.88);
    border-color: transparent;
}

.detail-modal__info-row {
    color: #f4efe2 !important;
}

.detail-modal__info-row i {
    color: #ffd700;
}

.detail-modal__close-btn {
    background: rgba(10, 17, 40, 0.15);
    color: #14204a;
}

.detail-modal__close-btn:hover {
    background: rgba(10, 17, 40, 0.28);
}

.place-card__image {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.place-card:hover .place-card__image {
    transform: scale(1.08);
}

.place-card__footer .btn-details,
.place-card__footer .btn-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease;
}

.place-card:hover .btn-details {
    box-shadow: var(--shadow-gold);
}

/* ============================================
   PHASE 3 — CLIP-PATH MASK REVEAL
   ============================================ */
.mask-reveal {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #05081a;
}

.mask-reveal__base {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(30, 58, 138, 0.55), #05081a 75%);
}

.mask-reveal__panel {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fdf6e3 0%, #ffffff 55%, #fff8e1 100%);
    clip-path: circle(0% at 50% 50%);
}

/* ============================================
   PHASE 4 — CHAR / WORD SPLIT SCRUB REVEAL
   ============================================ */
.split-char,
.split-word {
    display: inline-block;
    perspective: 600px;
}

.split-char .char {
    display: inline-block;
    opacity: 0;
    transform: rotateX(-90deg) translateY(0.2em);
    transform-origin: 50% 100%;
}

.split-word .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotateX(-40deg);
    transform-origin: 50% 100%;
}

/* ============================================
   PREMIUM MODAL — GALLERY + RICH DETAILS
   ============================================ */
.detail-modal-overlay {
    backdrop-filter: blur(6px);
}

.detail-modal.detail-modal--premium {
    max-width: 640px;
    border-radius: 1.5rem;
    clip-path: circle(0% at 50% 50%);
    transform: none;
    transition: clip-path 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-modal-overlay.active .detail-modal.detail-modal--premium {
    clip-path: circle(150% at 50% 50%);
}

.modal-gallery {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #111;
}

.modal-gallery__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-gallery__slide {
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.modal-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

.modal-gallery__arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.12);
}

.modal-gallery__arrow--prev { left: 12px; }
.modal-gallery__arrow--next { right: 12px; }

.modal-gallery__dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    z-index: 3;
}

.modal-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s, background 0.3s;
}

.modal-gallery__dot.active {
    background: #ffd700;
    transform: scale(1.3);
}

.modal-gallery__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 4;
    transition: background 0.2s, transform 0.3s;
}

.modal-gallery__close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: rotate(90deg);
}

/* .detail-modal__category-tag and .detail-modal__section-title are styled
   with Tailwind utility classes directly in the markup (js/pages.js) */

@media (max-width: 480px) {
    .modal-gallery { height: 220px; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-kinetic,
    .split-char .char,
    .split-word .word,
    .mask-reveal__panel,
    .place-card,
    .place-card__image,
    .section__title,
    .gold-shimmer::after {
        transition: none !important;
        animation: none !important;
    }
}