/* ==========================================================================
   Travinity – Premium Luxury Travel Homepage Styles
   ========================================================================== */

/* ---- CSS Custom Properties ---- */
:root{
  --color-bg:#0a0a0f;
  --color-bg-elev:#111218;
  --color-surface:#1a1b22;
  --color-text:#f5f5f7;
  --color-text-muted:#a0a4b0;
  --color-primary:#FF6F00;          /* orange */
  --color-primary-dark:#E65C00;
  --color-secondary:#2F6BFF;        /* bright blue - matches icon blue loop */
  --color-secondary-dark:#0097A7;
  --color-accent:#E91E63;           /* pink/magenta for gradients */
  --color-glass:rgba(255,255,255,0.06);
  --color-glass-border:rgba(255,255,255,0.12);
  --font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shadow-soft:0 4px 24px rgba(0,0,0,0.4);
  --shadow-hard:0 12px 48px rgba(0,0,0,0.55);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --transition:0.4s cubic-bezier(0.22,1,0.36,1);
  --container-max:1280px;
  --header-h:80px;
}

/* ---- Reset ---- */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;background:none;border:none;cursor:pointer;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}

/* ---- Container ---- */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:linear-gradient(180deg,rgba(10,10,15,0.95),rgba(10,10,15,0.6));
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-glass-border);
  z-index:1000;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%;}

/* Logo */
.logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
.logo__icon{height:40px;width:auto;flex-shrink:0;}
.logo__text{font-weight:700;font-size:1.15rem;letter-spacing:0.02em;}
.logo__part--trav{color:var(--color-primary);}
.logo__part--inity{color:var(--color-secondary);}

/* Nav menu */
.nav__menu{display:flex;align-items:center;gap:2.5rem;}
.nav__menu a{font-weight:500;font-size:0.95rem;color:var(--color-text-muted);transition:color var(--transition);}
.nav__menu a:hover,.nav__menu a:focus{color:var(--color-text);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.7rem 1.6rem;font-weight:600;border-radius:var(--radius-md);
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);}
.btn--primary{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;box-shadow:var(--shadow-soft);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hard);}
.btn--ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-glass-border);}
.btn--ghost:hover{background:var(--color-glass);border-color:var(--color-primary);}
.btn--outline{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);}
.btn--outline:hover{background:var(--color-primary);color:#fff;}
.btn--lg{padding:0.9rem 2.2rem;font-size:1rem;}
.btn--full{width:100%;}

/* Mobile toggle */
.nav__toggle{display:none;flex-direction:column;gap:5px;width:28px;height:22px;justify-content:center;}
.hamburger,.hamburger::before,.hamburger::after{content:'';display:block;width:100%;height:2px;background:var(--color-text);border-radius:2px;transition:transform var(--transition),opacity var(--transition);}
.hamburger::before{transform:translateY(-7px);}
.hamburger::after{transform:translateY(7px);}
.nav__toggle[aria-expanded="true"] .hamburger{background:transparent;}
.nav__toggle[aria-expanded="true"] .hamburger::before{transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] .hamburger::after{transform:rotate(-45deg);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:var(--header-h);overflow:hidden;}
.hero__bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;filter:brightness(0.35) saturate(1.2);transform:scale(1.05);transition:transform 1.2s ease-out;}
.hero:hover .hero__bg{transform:scale(1);}
.hero__content{position:relative;z-index:1;text-align:center;max-width:860px;padding:2rem;}
.hero__title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.15;margin-bottom:1rem;color:var(--color-text);}
.accent{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__subtitle{font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--color-text-muted);max-width:640px;margin:0 auto 2.5rem;}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero__trust{margin-top:3.5rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;color:var(--color-text-muted);font-size:0.85rem;}
.hero__logos{display:flex;gap:2rem;font-size:1.6rem;opacity:0.6;}
.hero__scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);animation:bounce 2s infinite;color:var(--color-text-muted);opacity:0.7;}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}

/* ==========================================================================
   SECTION COMMON
   ========================================================================== */
.section{padding:7rem 0;}
.section--dark{background:var(--color-bg-elev);}
.section--preview{background:linear-gradient(180deg,var(--color-bg),var(--color-bg-elev));}
.section__header{text-align:center;margin-bottom:4rem;}
.section__title{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-0.02em;}
.section__lead{margin-top:0.8rem;color:var(--color-text-muted);font-size:1.1rem;}
.section__cta{text-align:center;margin-top:3rem;}

/* Grid */
.grid{display:grid;gap:2rem;}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

/* ==========================================================================
   CARD – Destinations
   ========================================================================== */
.card{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition);transform-style:preserve-3d;perspective:1000px;}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hard);}
.card__media{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform 0.4s ease;transform-origin:center;will-change:transform;}
.card:hover .card__media{transform:scale(1.05);}
.card__body{padding:1.8rem;display:flex;flex-direction:column;gap:0.8rem;transform:translateZ(20px);}
.card__title{font-size:1.35rem;font-weight:700;}
.card__desc{color:var(--color-text-muted);font-size:0.95rem;}
.card__link{margin-top:auto;font-weight:600;color:var(--color-primary);display:inline-flex;align-items:center;gap:0.3rem;transition:gap var(--transition);}
.card__link:hover{gap:0.6rem;}

/* 3D Tilt effect */
.card[data-tilt]{transition:transform 0.1s ease-out,box-shadow 0.1s ease-out;will-change:transform,box-shadow;}
.card[data-tilt]:hover .card__media{transition-duration:0.4s;}

/* ==========================================================================
   EXPERIENCE CARDS
   ========================================================================== */
.exp-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition);}
.exp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hard);}
.exp-card__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.exp-card__icon img{width:80px;height:80px;transition:transform 0.3s ease,filter 0.3s ease;filter:drop-shadow(0 12px 24px rgba(0,0,0,0.25));}
.exp-card:hover .exp-card__icon img{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 20px 32px rgba(0,0,0,0.35));}
.exp-card__title{font-size:1.25rem;font-weight:700;margin-bottom:0.5rem;}
.exp-card__desc{color:var(--color-text-muted);font-size:0.95rem;}

/* ==========================================================================
   WHY TRAVINITY / PILLAR CARDS
   ========================================================================== */
.section__eyebrow{display:inline-block;font-size:0.85rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:0.8rem;}
.pillar-card{background:var(--color-surface);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);padding:2rem 1.5rem;text-align:center;box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.pillar-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hard);border-color:var(--color-primary);}
.pillar-card__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.pillar-card__icon img{width:80px;height:80px;transition:transform 0.3s ease,filter 0.3s ease;filter:drop-shadow(0 12px 24px rgba(0,0,0,0.25));}
.pillar-card:hover .pillar-card__icon img{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 20px 32px rgba(0,0,0,0.35));}
.pillar-card__title{font-size:1.2rem;font-weight:700;margin-bottom:0.5rem;}
.pillar-card__desc{color:var(--color-text-muted);font-size:0.95rem;line-height:1.6;}

/* Responsive grid for pillar cards */
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid--4{grid-template-columns:1fr;}
}

/* ==========================================================================
   OUR CREATORS SECTION
   ========================================================================== */
.creators-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(6,1fr);align-items:stretch;}
@media (max-width:1200px){
  .creators-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:768px){
  .creators-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .creators-grid{grid-template-columns:1fr;}
}

.creator-card{background:var(--color-surface);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);padding:1.5rem 1rem 1rem;text-align:center;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);position:relative;}
.creator-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hard);border-color:transparent;box-shadow:0 0 0 1px var(--color-primary),0 0 0 3px var(--color-secondary),var(--shadow-hard);}
.creator-card__photo{position:relative;width:96px;height:96px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:3px solid var(--color-glass-border);transition:border-color var(--transition);}
.creator-card:hover .creator-card__photo{border-color:transparent;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));}
.creator-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition);}
.creator-card:hover .creator-card__photo img{transform:scale(1.05);}
.creator-card__platform{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.3);z-index:1;}
.creator-card__platform.platform--ig{background:linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);}
.creator-card__platform.platform--tt{background:#000;}
.creator-card__platform.platform--yt{background:#ff0000;}
.creator-card__info{display:flex;flex-direction:column;gap:0.25rem;}
.creator-card__name{font-size:1rem;font-weight:700;color:var(--color-text);margin:0;}
.creator-card__handle{font-size:0.85rem;color:var(--color-primary);font-weight:600;margin:0;}
.creator-card__followers{font-size:0.8rem;color:var(--color-text-muted);margin:0;}

/* Recent Trips Strip */
.recent-trips{margin-top:4rem;}
.recent-trips__title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;text-align:center;}
.recent-trips__strip{display:flex;gap:1.5rem;overflow-x:auto;padding:0.5rem 0.5rem 1.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-primary) var(--color-bg-elev);}
.recent-trips__strip::-webkit-scrollbar{height:6px;}
.recent-trips__strip::-webkit-scrollbar-track{background:var(--color-bg-elev);border-radius:3px;}
.recent-trips__strip::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:3px;}
.trip-card{flex:0 0 auto;width:320px;max-width:100%;scroll-snap-align:start;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition);}
.trip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard);}
.trip-card img{width:100%;height:220px;object-fit:cover;transition:transform 0.5s ease;}
.trip-card:hover img{transform:scale(1.05);}
.trip-card__overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1rem 1rem;background:linear-gradient(180deg,transparent,rgba(10,10,15,0.95));}
.trip-card__caption{font-size:0.85rem;font-weight:600;color:var(--color-text);text-shadow:0 2px 8px rgba(0,0,0,0.5);}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.about-grid{display:grid;gap:3rem;align-items:center;grid-template-columns:1fr 1fr;}
.about__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-hard);}
.about__media img{width:100%;height:auto;display:block;transition:transform 0.8s ease;}
.about__media:hover img{transform:scale(1.02);}
.about__content{display:flex;flex-direction:column;gap:1.5rem;}
.about__lead{font-size:1.2rem;color:var(--color-text-muted);}
.about__features{display:grid;gap:0.9rem;}
.about__features li{display:flex;align-items:flex-start;gap:0.8rem;color:var(--color-text-muted);font-size:0.95rem;}
.about__features strong{color:var(--color-text);}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-form{display:grid;gap:1.5rem;max-width:640px;margin:0 auto;}
.form-row{display:grid;gap:0.4rem;}
.form-row label{font-weight:500;font-size:0.9rem;color:var(--color-text-muted);}
.form-row input,.form-row textarea{background:var(--color-surface);border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);padding:0.9rem 1rem;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition);}
.form-row input:focus,.form-row textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,111,0,0.2);outline:none;}
.form-row textarea{resize:vertical;min-height:120px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--color-bg-elev);border-top:1px solid var(--color-glass-border);padding:4rem 0 2rem;}
.footer__grid{display:grid;gap:3rem;grid-template-columns:2fr 1fr 1fr;align-items:start;}
.footer__tagline{margin-top:0.6rem;color:var(--color-text-muted);font-size:0.95rem;}
.footer__nav ul{display:flex;flex-direction:column;gap:0.8rem;}
.footer__nav a{color:var(--color-text-muted);transition:color var(--transition);}
.footer__nav a:hover{color:var(--color-primary);}
.footer__social{display:flex;gap:1.2rem;font-size(1.4rem);}
.footer__social a{color:var(--color-text-muted);transition:color var(--transition),transform var(--transition);}
.footer__social a:hover{color:var(--color-primary);transform:translateY(-2px);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--color-glass-border);font-size:0.85rem;color:var(--color-text-muted);flex-wrap:wrap;gap:1rem;}
.footer__bottom a{color:var(--color-text-muted);}
.footer__bottom a:hover{color:var(--color-primary);}

/* ==========================================================================
   REVEAL ANIMATIONS (via IntersectionObserver in script.js)
   ========================================================================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav__menu{position:fixed;top:var(--header-h);left:0;right:0;background:rgba(10,10,15,0.98);backdrop-filter:blur(12px);flex-direction:column;padding:2rem;gap:1.5rem;border-bottom:1px solid var(--color-glass-border);transform:translateY(-120%);transition:transform var(--transition);pointer-events:none;}
  .nav__menu.is-open{transform:translateY(0);pointer-events:auto;}
  .nav__toggle{display:flex;}
  .hero__trust{flex-direction:column;gap:1rem;}
}
@media (max-width:480px){
  .btn--lg{padding:0.8rem 1.6rem;font-size:0.95rem;}
  .footer__grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}