/* ========================================
   BeyondTrails — PREMIUM DESIGN SYSTEM
   ======================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

body.page-transition {
    opacity: 0;
}

/* ── Loading Screen ── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: hsl(103, 18%, 45%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

#preloader .loader-tiger {
    width: 400px;
    height: auto;
    max-width: 80vw;
    animation: pulse-glow 2s ease-in-out infinite;
}

#preloader .loader-text {
    font-family: 'Playfair Display', serif;
    color: #efefef;
    font-size: 1.5rem;
    margin-top: 1.5rem;
    letter-spacing: 0.3em;
    animation: fadeInUp 1s ease-out;
}

#preloader .loader-bar {
    width: 200px;
    height: 2px;
    background: rgba(197, 160, 89, 0.2);
    margin-top: 1rem;
    border-radius: 2px;
    overflow: hidden;
}

#preloader .loader-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #C5A059, #D48227);
    animation: loading-bar 2s ease-in-out forwards;
}

@keyframes loading-bar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* ── Navbar ── */
.nav-scrolled {
    background-color: rgb(244, 241, 234) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, #D4853A, #C8935A);
    color: #F9F6F0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #C8935A, #D4853A);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 133, 58, 0.4);
    letter-spacing: 0.15em;
}

.btn-primary span {
    position: relative;
    z-index: 1;
}

.btn-outline-gold {
    border: 1px solid #C8935A;
    color: #C8935A;
    background: transparent;
    transition: all 0.4s ease;
}

.btn-outline-gold:hover {
    background: #C8935A;
    color: #1A2332;
    box-shadow: 0 8px 25px rgba(200, 147, 90, 0.3);
}

/* ── Photo clipped to the Sawai Madhopur district outline ──
   images/swm_map_mask.png is a transparent-background silhouette extracted from
   real_images/swmmap.png (blue fill selected, title and drop shadow dropped).
   Alpha mask, so the photo shows only inside the district. */
.map-mask {
    -webkit-mask-image: url('../images/swm_map_mask.png');
    mask-image: url('../images/swm_map_mask.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ── Link Hover Effect: glassmorphism strip ── */
.nav-link {
    position: relative;
    z-index: 0;
    padding: 0.55rem 0.95rem;
    border-radius: 9999px;
    transition: color 0.25s ease;
}

/* The frosted strip that fades in behind the label on hover/focus. */
.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.4);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    box-shadow: 0 6px 18px rgba(19, 42, 19, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::before,
.nav-link:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

/* #132A13 on the strip is 11.9:1 — the old #C8935A hover was 2.39:1 on cream. */
.nav-link:hover,
.nav-link:focus-visible {
    color: #132A13;
}

.nav-link:focus-visible {
    outline: 2px solid #132A13;
    outline-offset: 2px;
}

/* Over the hero video the nav is transparent, so the tabs read white; once the
   beige strip fades in (.bg-transparent dropped) they fall back to the dark
   Tailwind colour. Keyed on .bg-transparent, not .nav-scrolled, so pages whose
   nav is beige from the top keep dark tabs. #main-nav out-specifies text-accent. */
#main-nav .nav-link {
    transition: color 0.5s ease;
}

/* Floats the nav down off the top edge over the hero; the gap collapses as the
   beige strip fades in. ponytail: one eased step on the scroll toggle, not a
   scroll-linked value — swap to an animation-timeline if you want it to track
   the scroll position exactly. */
#main-nav.bg-transparent {
    padding-top: 2rem;
}

#main-nav.bg-transparent .nav-link,
#main-nav.bg-transparent #mobile-menu-toggle {
    color: #FFFFFF;
}

#main-nav.bg-transparent .nav-link:hover,
#main-nav.bg-transparent .nav-link:focus-visible {
    color: #132A13;
}

/* Dark surfaces (mobile drawer on forest green) need a light-on-dark strip. */
.nav-link--on-dark:hover,
.nav-link--on-dark:focus-visible {
    color: #FFFFFF;
}

.nav-link--on-dark::before {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-link--on-dark:focus-visible {
    outline-color: #D4AF37;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link::before {
        transition: opacity 0.01ms linear;
        transform: none;
    }
    .nav-link:hover::before,
    .nav-link:focus-visible::before {
        transform: none;
    }
}

/* ── Section Divider SVGs ── */
.tiger-divider {
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden;
}

.tiger-divider svg {
    width: 100%;
    height: 100%;
}

/* ── Parallax Image Container ── */
.parallax-img {
    transition: transform 0.1s linear;
}

/* ── Keyframe Animations ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.8;
        filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.3));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.6));
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes draw-line {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes tiger-walk {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(100vw);
        opacity: 0;
    }
}

@keyframes birds-fly {
    0% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(15px) translateY(-8px);
    }

    50% {
        transform: translateX(30px) translateY(0);
    }

    75% {
        transform: translateX(45px) translateY(-5px);
    }

    100% {
        transform: translateX(60px) translateY(0);
    }
}

/* ── Scroll-Reveal Classes ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* ── Stagger Delay ── */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

/* ── Counter Animation ── */
.counter-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── Image Hover Effects ── */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-zoom:hover img {
    transform: scale(1.08);
}

/* ── Card grows on hover, settles back on leave ──
   Scales the whole card (not width/height, which would reflow the page).
   Keep this off any element that carries data-aos: AOS drives `transform`
   too, and the two rules fight over the same property. */
.hover-grow {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

@media (hover: hover) {
    .hover-grow:hover {
        transform: scale(1.12);
        box-shadow: 0 25px 50px -12px rgba(19, 42, 19, 0.45);
        z-index: 30;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-grow {
        transition: box-shadow 0.2s ease;
    }
    .hover-grow:hover {
        transform: none;
    }
}

/* ── Gold shimmer text ── */
.text-shimmer {
    background: linear-gradient(90deg, #C8935A, #D4853A, #C8935A, #D4853A);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

/* ── Decorative gold line ── */
.gold-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #C8935A, #E48257);
}

/* ── Scroll-snap sliders: keep the track scrollable, hide the bar ── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Card Hover Lift ── */
.card-lift {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ── Wonder cards: a torch-beam highlight that follows the pointer ── */
.spotlight-card {
    --mx: 50%;
    --my: 50%;
}

.spotlight-card .spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle 320px at var(--mx) var(--my),
            rgba(255, 216, 150, 0.60),
            rgba(255, 198, 110, 0.26) 38%,
            rgba(255, 190, 100, 0.08) 62%,
            transparent 78%);
}

.spotlight-card:hover .spotlight,
.spotlight-card:focus-visible .spotlight {
    opacity: 1;
}

.spotlight-card img {
    filter: saturate(0.92) brightness(0.96);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.spotlight-card:hover img,
.spotlight-card:focus-visible img {
    filter: saturate(1.08) brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {

    .spotlight-card .spotlight {
        display: none;
    }

    .spotlight-card img {
        filter: none;
        transition: none;
    }
}

/* ── Diorama tilt: the card rotates toward the pointer and the caption floats
   above the photo, so it reads as a physical object rather than a flat panel.
   Driven by --rx/--ry, which the pointermove handler in Wonders.js already
   writes alongside the spotlight's --mx/--my.

   Gotcha worth knowing: the element carrying `transform-style: preserve-3d`
   must not clip its content. Any overflow other than `visible` forces the
   used value back to `flat` and the depth silently disappears. That is why
   .tilt__body is unclipped and the photo keeps its own overflow-hidden
   wrapper nested inside it. */
.tilt {
    --rx: 0deg;
    --ry: 0deg;
    perspective: 1200px;
}

.tilt__body {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms ease;
}

/* Depth only arms for real pointers. On touch there is no hover to track, so
   the card stays flat instead of sticking at whatever angle it was last
   tapped at. */
@media (hover: hover) and (pointer: fine) {
    .tilt__body {
        transform: rotateX(var(--rx)) rotateY(var(--ry));
    }

    /* Snappy while tracking the cursor, slow and eased on the way back. */
    .tilt:hover .tilt__body {
        transition: transform 120ms ease-out, box-shadow 400ms ease;
        box-shadow: 0 30px 60px -20px rgba(19, 42, 19, 0.55);
    }

    .tilt__text {
        transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* 55px at 1200px perspective scales the caption ~1.05x: enough to sit
       clearly in front of the photo, not enough to read as a zoom. */
    .tilt:hover .tilt__text,
    .tilt:focus-visible .tilt__text {
        transform: translateZ(55px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tilt__body,
    .tilt__text {
        transform: none !important;
        transition: box-shadow 0.2s ease;
    }
}

/* ── Testimonial ── */
.testimonial-card {
    position: relative;
}

.testimonial-card::before {
    content: '"';
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    color: rgba(197, 160, 89, 0.15);
    position: absolute;
    top: -20px;
    left: 20px;
    line-height: 1;
}

/* ── Tiger Paw Print Trail ── */
.paw-print {
    opacity: 0.08;
    position: absolute;
    transition: opacity 0.3s ease;
}

/* ── Modal Overlay ── */
.modal-overlay {
    background-color: rgba(26, 35, 50, 0.85);
    backdrop-filter: blur(8px);
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F9F6F0;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1A2332, #C8935A);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #D4853A;
}

/* ── Selection Color ── */
::selection {
    background: rgba(212, 133, 58, 0.3);
    color: #1A2332;
}

/* ── Leaflet Custom Styling ── */
.map-beacon {
    width: 24px;
    height: 24px;
    background: #C8935A;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px #C5A059;
    border: 2px solid #F9F6F0;
    animation: map-pulse 2s infinite;
}

@keyframes map-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(197, 160, 89, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
    }
}

.leaflet-popup-content-wrapper {
    background: rgba(15, 46, 30, 0.95) !important;
    border: 1px solid #C8935A;
    color: #F9F6F0 !important;
    border-radius: 4px !important;
    backdrop-filter: blur(10px);
}

.leaflet-popup-tip {
    background: rgba(15, 46, 30, 0.95) !important;
}

.leaflet-popup-content {
    margin: 12px !important;
}

.leaflet-popup-content h3 {
    color: #C8935A;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.leaflet-popup-content img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 8px;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.leaflet-popup-close-button {
    color: #C8935A !important;
}

/* ═══ WILDLIFE SILHOUETTE CUTOUTS ═══ */
.wildlife-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.wildlife-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Tiger walking silhouette strip */
.tiger-silhouette-strip {
    background: #1A2332;
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
}

.tiger-silhouette-strip::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' fill='%23243447'%3E%3Cpath d='M0 60 L10 50 Q15 45 20 50 L25 55 Q30 60 35 55 L40 48 Q45 42 50 48 L60 58 Q65 60 70 55 L80 42 Q85 38 90 42 L100 55 Q105 60 110 55 L120 42 Q125 38 130 42 L140 55 Q145 60 150 55 L160 42 Q165 38 170 42 L180 55 Q185 60 190 55 L200 45 L200 60 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 200px 60px;
    background-position: bottom;
    opacity: 0.5;
}

/* Grass/vegetation silhouette for section bottoms */
.grass-cutout {
    position: relative;
}

.grass-cutout::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 45 Q20 20 40 35 Q50 42 55 30 Q65 10 80 25 Q90 35 100 20 Q110 5 125 25 Q135 40 150 30 Q160 18 180 35 Q195 48 210 30 Q225 12 240 28 Q255 42 270 25 Q285 8 300 25 Q315 40 330 22 Q345 5 360 30 Q375 48 390 28 Q405 10 420 32 Q435 48 450 25 Q465 5 480 30 Q495 48 510 28 Q525 10 540 32 Q555 48 570 25 Q585 5 600 30 Q615 48 630 28 Q645 10 660 32 Q675 48 690 25 Q705 5 720 30 Q735 48 750 28 Q765 10 780 32 Q795 48 810 25 Q825 5 840 30 Q855 48 870 28 Q885 10 900 32 Q915 48 930 25 Q945 5 960 30 Q975 48 990 28 Q1005 10 1020 32 Q1035 48 1050 25 Q1065 5 1080 30 Q1095 48 1110 28 Q1125 10 1140 32 Q1155 48 1170 25 Q1185 8 1200 30 L1200 80 Z' fill='%23FAF7F2'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 10;
}

/* Mountain range silhouette */
.mountain-cutout {
    position: relative;
}

.mountain-cutout::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L0 80 L120 30 L200 55 L280 15 L360 50 L440 25 L520 60 L600 10 L680 45 L760 20 L840 55 L920 30 L1000 65 L1080 15 L1160 50 L1240 25 L1320 55 L1440 20 L1440 100 Z' fill='%23FAF7F2'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 10;
}

/* Animal track scatter decoration */
.animal-tracks {
    position: relative;
}

.animal-tracks::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23C8935A'%3E%3Cellipse cx='50' cy='65' rx='14' ry='18'/%3E%3Cellipse cx='35' cy='38' rx='8' ry='10'/%3E%3Cellipse cx='65' cy='38' rx='8' ry='10'/%3E%3Cellipse cx='25' cy='55' rx='6' ry='9'/%3E%3Cellipse cx='75' cy='55' rx='6' ry='9'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    pointer-events: none;
}

/* ── Hero Video Volume Slider ── */
#hero-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    height: 4px;
    border-radius: 2px;
    outline: none;
    transition: background 0.3s ease;
}

#hero-volume-slider:hover {
    background: rgba(255, 255, 255, 0.35);
}

#hero-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D4AF37; /* Accent Gold */
    cursor: pointer;
    transition: transform 0.15s ease-in-out, background 0.15s ease-in-out;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#hero-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    background: #E65C00; /* Tiger Orange */
}

#hero-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D4AF37;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease-in-out, background 0.15s ease-in-out;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#hero-volume-slider::-moz-range-thumb:hover {
    transform: scale(1.3);
    background: #E65C00;
}