/* ══════════════════════════════════════════════════════════════
   TRAVEL TRIPORA — LUXURY DESIGN SYSTEM
   Loaded after Tailwind CDN. Provides premium tokens, refined
   components, and micro-interactions across every page.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand palette ── */
    --ink: #0B1A2E;          /* deep navy — primary text / dark sections */
    --ink-800: #12233b;
    --ink-700: #1c3350;
    --sky: #0284c7;          /* brand sky */
    --sky-600: #0369a1;
    --sky-glow: rgba(2, 132, 199, .18);

    /* ── Luxury accent — champagne gold ── */
    --gold: #C7A15A;
    --gold-soft: #D9BE86;
    --gold-deep: #A9853F;
    --gold-glow: rgba(199, 161, 90, .22);

    /* ── Neutrals — warm ivory system ── */
    --ivory: #FAF7F1;        /* page background */
    --ivory-100: #F3EEE4;
    --cream-line: #ECE4D6;
    --paper: #ffffff;
    --muted: #6b7280;
    --muted-soft: #9aa3af;

    /* ── Shadows — soft, layered ── */
    --shadow-sm: 0 1px 2px rgba(11, 26, 46, .04), 0 2px 6px rgba(11, 26, 46, .04);
    --shadow-md: 0 6px 18px rgba(11, 26, 46, .07), 0 2px 6px rgba(11, 26, 46, .05);
    --shadow-lg: 0 24px 60px -18px rgba(11, 26, 46, .28), 0 8px 24px -12px rgba(11, 26, 46, .16);
    --shadow-gold: 0 16px 40px -14px var(--gold-glow);

    /* ── Motion ── */
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background-color: var(--ivory);
    color: #26313f;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Warm ivory replaces flat gray page backgrounds */
body.bg-gray-50, body.bg-gray-100 { background-color: var(--ivory) !important; }

::selection { background: var(--gold); color: #fff; }

/* Refined scrollbar (desktop) */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: var(--ivory-100); }
    ::-webkit-scrollbar-thumb {
        background: #c9cfd8; border-radius: 99px;
        border: 3px solid var(--ivory-100);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--sky); }
}

/* ── Typography refinements ── */
[style*="Playfair"], .font-display,
h1, h2, h3 { letter-spacing: -0.01em; }

.trip-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.trip-eyebrow::before {
    content: "";
    width: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.trip-eyebrow.center::before { display: none; }

/* Gold accent utilities */
.text-gold { color: var(--gold) !important; }
.text-gold-deep { color: var(--gold-deep) !important; }
.bg-gold { background-color: var(--gold) !important; }
.border-gold { border-color: var(--gold) !important; }

.trip-rule {
    height: 1px; width: 64px; border: 0;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: 0;
}
.trip-rule.center { background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto; }

/* ══════════════════════════════════════
   PREMIUM BUTTONS
   ══════════════════════════════════════ */
.btn-lux {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem;
    font-weight: 700; font-size: .875rem; line-height: 1;
    padding: .85rem 1.6rem; border-radius: 12px;
    letter-spacing: .01em;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    cursor: pointer; border: 0; overflow: hidden;
}
.btn-lux:active { transform: translateY(1px); }

.btn-lux-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-600) 100%);
    box-shadow: 0 12px 26px -12px var(--sky-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-lux-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -14px rgba(2,132,199,.5), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-lux-gold {
    color: #21170a;
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow: 0 12px 28px -12px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-lux-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.45);
}

.btn-lux-dark {
    color: #fff;
    background: linear-gradient(135deg, var(--ink-700), var(--ink));
    box-shadow: var(--shadow-md);
}
.btn-lux-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-lux-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
}
.btn-lux-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* Sheen sweep on primary/gold buttons */
.btn-lux-primary::after, .btn-lux-gold::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-lux-primary:hover::after, .btn-lux-gold:hover::after { transform: translateX(120%); }

/* ══════════════════════════════════════
   PREMIUM CARDS & SURFACES
   ══════════════════════════════════════ */
.card-lux {
    background: var(--paper);
    border: 1px solid var(--cream-line);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card-lux-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(199,161,90,.4);
}

/* Gold top-hairline accent for feature cards */
.card-topline { position: relative; }
.card-topline::before {
    content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0; transition: opacity .4s var(--ease);
}
.card-topline:hover::before { opacity: 1; }

.glass-dark {
    background: rgba(11, 26, 46, .55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.12);
}
.glass-light {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════
   PREMIUM INPUTS
   ══════════════════════════════════════ */
.input-lux, input.input-lux, select.input-lux, textarea.input-lux {
    width: 100%;
    border: 1px solid #d9dee6;
    background: #fff;
    border-radius: 12px;
    padding: .8rem .95rem;
    font-size: .9rem;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.input-lux:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px var(--sky-glow);
    background: #fff;
}

/* Global lift for existing plain inputs on premium pages */
.lux-scope input:not([type=checkbox]):not([type=radio]):focus,
.lux-scope select:focus,
.lux-scope textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px var(--sky-glow);
}

/* ══════════════════════════════════════
   NAV
   ══════════════════════════════════════ */
.nav-glass-lux {
    background: rgba(11, 26, 46, .38);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,.10);
    transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav-glass-lux.scrolled {
    background: rgba(11, 26, 46, .92);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
}
.nav-link-lux { position: relative; color: rgba(255,255,255,.82); transition: color .3s; }
.nav-link-lux::after {
    content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0;
    background: var(--gold); transition: width .3s var(--ease);
}
.nav-link-lux:hover { color: #fff; }
.nav-link-lux:hover::after { width: 100%; }

/* Brand lockup gold plane */
.brand-plane { color: var(--gold); }

/* ══════════════════════════════════════
   SLIDE-OUT MENU (phones and tablets)
   ══════════════════════════════════════ */
.nav-menu-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; color: #fff; font-size: 1rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);
    transition: background .3s var(--ease);
}
.nav-menu-btn:hover { background: rgba(255,255,255,.20); }
.nav-menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.mobile-menu { position: fixed; inset: 0; z-index: 70; }
.mobile-menu-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 20, 34, .6);
    opacity: 0; transition: opacity .3s var(--ease);
}
.mobile-menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: var(--ink); color: #fff;
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    box-shadow: -24px 0 48px -24px rgba(0,0,0,.6);
}
.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .95rem 0;
    font-size: 1.05rem; font-weight: 600;
    color: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: color .2s;
}
.mobile-menu-link:hover, .mobile-menu-link:focus-visible { color: var(--gold); outline: none; }

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-panel, .mobile-menu-backdrop { transition: none; }
}

/* ══════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════
   DECORATIVE
   ══════════════════════════════════════ */
.hero-overlay {
    background:
        linear-gradient(180deg, rgba(11,26,46,.72) 0%, rgba(11,26,46,.45) 45%, rgba(11,26,46,.68) 100%);
}
.ken-burns { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

.grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 4px 4px; mix-blend-mode: overlay; opacity: .35;
}

/* Gold chip / badge */
.chip-gold {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-deep);
    background: linear-gradient(180deg, #fff, #fbf6ec);
    border: 1px solid rgba(199,161,90,.35);
    padding: .4rem .85rem; border-radius: 99px;
    box-shadow: var(--shadow-sm);
}

/* Star rating */
.stars-gold { color: var(--gold); letter-spacing: .08em; }

/* Section spacing helper */
.section-lux { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

/* Link underline refinement */
.link-gold { color: var(--gold-deep); text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom; transition: background-size .3s var(--ease); }
.link-gold:hover { background-size: 100% 1.5px; }