/* ============================================================
   RESET STYLESHEET – CLEAN BASE FOR NAV + HERO
   ============================================================ */

body {
  margin: 0;
  padding: 0;
  background-color: #f9f8f1;
  font-family: 'Segoe UI', sans-serif;
}
/* Padding for wordpress admin bar*/
  sbody.admin-bar .bd-header {
  top: 32px; /* default height of WP admin bar */
}

/* ============================================================
   HEADER / NAVIGATION BAR
   ============================================================ */

.bd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.bd-logo {
  background-color: #007c5c;
  color: white;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 25px;
  text-decoration: none;
  display: flex; 
  align-items: center;
  margin-top: 6px;
  gap: 10px; /* space between feather and text */;
}
.bd-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

/* Feather animation at logo */
.logo-feather{
  width: 28px;
  height: auto;
  margin-right: 0;
  margin-left: -6px;
  display: inline-block;

  /* ✅ crucial for SVG/img so origin works as expected */
  transform-box: fill-box;
  transform-origin: 50% 100%;   /* bottom center */
}

/* Trigger sway on hover of logo wrapper */
.bd-logo-wrapper:hover .logo-feather{
  animation: feather-sway 1.5s ease-in-out both;
}

@keyframes feather-sway{
  0%   { transform: rotate(0deg) translateX(0); }
  50%  { transform: rotate(7deg) translateX(2px); }
  100% { transform: rotate(0deg) translateX(0); }
}


.bd-nav {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.bd-nav a {
  text-decoration: none;
  color: #2c2c2c;
  position: relative;
  text-decoration: none;
  padding: 0 16px;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.3s ease;
}

/* The selector .bd-nav a + a::before targets any a tag 
that directly follows another a tag, i.e., all except the first.*/
.bd-nav a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -14px; /* adjust spacing */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;              /* was 2px — too thin */
  height: 24px;             /* taller */
  background-image: url('http://bharatdestinations.local/wp-content/uploads/2025/11/sketch-line.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  z-index: 10;              /* ensure it appears above others */
}

.bd-nav a:not(:first-child)::before {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.bd-nav a:hover::before {
  transform: translateY(-50%) scaleY(1.2);
  opacity: 1;
}

.bd-nav a:hover {
  color: #007c5c;
}

.bd-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px; /* Adjust based on spacing */
  width: 100%;
  height: 12px; /* Increase height to fit sketch line */
  background-image: url('http://bharatdestinations.local/wp-content/uploads/sketch-underline.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;  /* Stretch fully to fit link */
  background-position: center;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.bd-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  opacity: 1;
}

.bd-cta {
  background: #007c5c;
  color: white;
  padding: 8px 18px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 6px;         
  transition: background 0.3s ease, transform 0.3s ease;
}

.bd-cta:hover {
  background: #005c45;
  transform: scale(1.05);
}

.bd-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.bd-header.visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 768px) {
  .bd-header-inner {
    flex-direction: column;
    gap: 10px;
  }
  .bd-nav {
    flex-direction: column;
    gap: 15px;
  }
}
/* ============================================================
   HERO SECTION — STACKED EPICS (RAMAYANA → MAHABHARATA)
   ============================================================ */

#epic-hero {
  position: relative;
  width: 100%;
  height: 90svh;
  overflow: hidden;
  background: #f9f8f1;
  transition: background 1.5s ease-in-out;
}

.epic-mahabharata.epic-active ~ #epic-hero {
  background: #f0f5f6;
}

/* ------------------------------------------
   OVERLAPPING LAYERS (Only one is visible)
------------------------------------------- */
.epic-layer {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  column-gap: 3vw;
  padding: clamp(2rem, 5vw, 6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  background #f9f8f1;
  z-index:1;
  will-change: opacity;
}

.epic-layer.epic-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ------------------------------------------
   IMAGE (Bow / Chakra) — with Animation
------------------------------------------- */
.epic-layer .near {
  width: clamp(340px, 34vw, 560px);
  justify-self: end;
  max-height: min(65vh, 650px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0px 12px 28px rgba(0, 0, 0, 0.12));
  animation: sway 8s ease-in-out infinite alternate;
}

@keyframes sway {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  100% {
    transform: translateY(-8px) rotate(-1.2deg) scale(1.01);
  }
}

.epic-mahabharata .near {
  width: clamp(300px, 32vw, 520px);
  justify-self: end;
}

/* ------------------------------------------
   TITLE + TEXT
------------------------------------------- */
.era-title {
  max-width: 40ch;
  justify-self: start;
  position: relative;
}

/* ------------------------------------------
   DEVANAGARI TITLE (ANIMATED)
------------------------------------------- */
.dev-title {
  width: min(760px, 90vw);
  margin-bottom: 0.5rem;
}

.dev-title text {
  font-family: "NotoSerifDeva", serif;
  font-size: clamp(64px, 8vw, 130px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dev-title .stroke {
  fill: none;
  stroke: #0a6f70;
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  opacity: 0.8;
}

.dev-title .fill {
  fill: #0a6f70;
  opacity: 0;
}

.epic-active .dev-title .stroke {
  animation: devanagariStroke 2s ease forwards;
}

.epic-active .dev-title .fill {
  animation: devanagariFill 1.1s ease forwards;
  animation-delay: 1.2s;
}

@keyframes devanagariStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes devanagariFill {
  to {
    opacity: 1;
  }
}

/* Subtitle */
.era-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: #263238;
  margin-top: 0.6rem;
  max-width: 40ch;
  line-height: 1.55;
}

/* ------------------------------------------
   MOBILE VERSION
------------------------------------------- */
@media (max-width: 900px) {
  .epic-layer {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .epic-layer .near {
    justify-self: center;
    width: clamp(260px, 80vw, 520px);
  }

  .era-title {
    justify-self: center;
    text-align: center;
  }

  .dev-title text {
    font-size: clamp(54px, 12vw, 110px);
  }
}

/* ------------------------------------------
   REDUCED MOTION
------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Animations on Hero Image , Title and Subtitle
============================================================ */
/* ---------- BASE TRANSITIONS ---------- */
#epic-hero .epic-layer .near,
#epic-hero .epic-layer .era-title,
#epic-hero .epic-layer .dev-title text,
#epic-hero .epic-layer .era-sub {
  transition: transform .45s ease, filter .45s ease, opacity .45s ease, letter-spacing .35s ease, text-shadow .35s ease;
}

/* ---------- IMAGE ( .near ) HOVER ---------- */
/* subtle lift + micro-tilt + richer shadow */
#epic-hero .epic-layer .near {
  position: relative; /* for the specular sweep overlay below */
  will-change: transform, filter;
}
#epic-hero .epic-layer .near:hover {
  transform: translateY(-6px) scale(1.03) rotate(-1deg);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
}

/* glossy “specular sweep” shimmer on image */
#epic-hero .epic-layer .near::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 90%);
  transform: translateX(-120%) skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
#epic-hero .epic-layer .near:hover::after {
  animation: bdSweep 1000ms ease forwards;
  opacity: .55;
}
@keyframes bdSweep {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(120%)  skewX(-20deg); }
}

/* ---------- TITLE ( .dev-title ) HOVER ---------- */
/* re-write the Devanagari stroke, then fill/glow */
#epic-hero .epic-layer .dev-title .stroke {
  stroke: #0a6f70;
  stroke-width: 3.2px;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0; /* sits filled by default */
  opacity: .9;
}
#epic-hero .epic-layer .dev-title .fill {
  fill: #0a6f70;            /* final solid color */
  opacity: .8;              /* softer at rest */
  transition: opacity .35s ease;
}
/* on hover, briefly “retrace” and brighten */
#epic-hero .epic-layer .dev-title:hover .stroke {
  animation: bdWrite 1100ms ease forwards;
}
#epic-hero .epic-layer .dev-title:hover .fill {
  opacity: 1;
  text-shadow: 0 0 18px rgba(10,111,112,.18);
}
@keyframes bdWrite {
  0%   { stroke-dashoffset: 1200; opacity: 1; }
  70%  { stroke-dashoffset: 0;    opacity: 1; }
  100% { stroke-dashoffset: 0;    opacity: 0; } /* fade stroke, keep fill visible */
}

/* ---------- SUBTITLE ( .era-sub ) HOVER ---------- */
/* elegant underline grow + slight track expand */
#epic-hero .epic-layer .era-sub {
  position: relative;
  letter-spacing: 0;
}
#epic-hero .epic-layer .era-sub::after {
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:100%; height:2px;
  background: linear-gradient(90deg, rgba(10,111,112,0), rgba(10,111,112,.6), rgba(10,111,112,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  opacity: .9;
}
#epic-hero .epic-layer .era-sub:hover {
  letter-spacing: .5px;
}
#epic-hero .epic-layer .era-sub:hover::after {
  transform: scaleX(1);
}

/* ---------- CROSS-NUDGE WITHOUT JS (limited) ---------- */
/* if user hovers image, nudge title a touch */
#epic-hero .epic-layer .near:hover ~ .era-title {
  transform: translateY(-2px);
}
/* if user hovers title/subtitle, nudge image a touch */
#epic-hero .epic-layer .era-title:hover ~ .near {
  transform: translateY(-4px) scale(1.02);
}

/* ---------- REDUCED MOTION RESPECT ---------- */
@media (prefers-reduced-motion: reduce) {
  #epic-hero .epic-layer .near,
  #epic-hero .epic-layer .era-title,
  #epic-hero .epic-layer .dev-title text,
  #epic-hero .epic-layer .era-sub,
  #epic-hero .epic-layer .near::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   GLOBAL TRAVEL CATEGORY STRIP (below hero)
============================================================ */
#travel-category-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;         /* distance from bottom edge */
  padding: 0 3rem;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
  z-index: 2;
}

.travel-strip-inner {
  white-space: nowrap;
}

.travel-track {
  display: inline-flex;
  gap: 2.5rem;
  animation: travelMarquee 40s linear infinite;
  white-space: nowrap;
  padding-right: 4rem; /* ensures final spacing feels natural */
}

.travel-chip {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #45525b;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.9;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  will-change: transform;
}

.travel-chip:hover {
  color: #0a6f70;
  opacity: 1;
  transform: translateY(-1px);
}

travel-chip-separator {
  display: inline-block;
  width: 2rem;
  color: #bbb;
  font-size: 1.5rem;
  text-align: center;
  opacity: 0.4;
  padding: 0 1rem;
  user-select: none;
  pointer-events: none;
}
@keyframes travelMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Optional: pause scrolling when user hovers anywhere on the strip */
#travel-category-strip:hover .travel-track {
  animation-play-state: paused;
}

/* mobile: slightly smaller & closer to bottom */
 @media (max-width: 900px) {
  #travel-category-strip {
    bottom: 1rem;
    padding: 0 1.25rem;
  }

  .travel-track {
    animation-duration: 32s; /* a bit faster on small screens */
  }

}
/* ============================================================
   TRAVEL EXPLORE SECTION
============================================================ */
#travel-explore {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem);
  background: #f9f8f1;     /* same as body/hero */
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
}

#travel-explore::before,
#travel-explore::after{
  content: none !important;        /* kill theme pseudo separators */
}

/* wrappers must be invisible */
.travel-explore-inner,
.travel-places-wrapper,
.travel-places-row,
.travel-places-empty,
.travel-places-grid{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* just in case theme adds any background on row/grid */
.travel-places-grid{
  flex: 1;
  display: flex;
  gap: 1.5rem;
  overflow-x: hidden;
  padding: 0.5rem 0;

  justify-content: flex-start;   /* ✅ IMPORTANT */
  align-items: stretch;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* keep your safe padding if arrows overlap */
  padding-left: calc(3rem + 44px);
  padding-right: calc(3rem + 44px);
  scroll-padding-left: calc(3rem + 44px);
  scroll-padding-right: calc(3rem + 44px);

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.travel-places-grid::-webkit-scrollbar{ display:none; }
adding-right: calc(3rem + 44px);
}


.travel-explore-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%
  position: relative;
  z-index: 1;
}

/* Filters row */
.travel-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.75rem;
}

.filter-field label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a88;
  margin-bottom: 0.35rem;
}

.filter-field input,
.filter-field select {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #c4d0d5;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  background: #ffffffdd;
  backdrop-filter: blur(4px);
}

.btn-ghost {
  border-radius: 999px;
  border: 1px solid #c4d0d5;
  background: transparent;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  color: #45525b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.btn-ghost:hover {
  border-color: #0a6f70;
  color: #0a6f70;
}

/* ============================================================
   PLAN A QUICK TRAVEL – Title styling (same as Bharat Stories)
============================================================ */
.explore-header {
  z-index: 5;
  text-align: center;
  margin-bottom: 1.6rem;
  position: relative;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  
}

.explore-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.explore-title {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 800;
  color: #0a6f70;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
  display: inline-block;
  position: relative;
  animation: titleFloat 6s ease-in-out infinite; /* reuses same keyframes */
}

.explore-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.32rem;
  transform: translateX(-50%);
  width: 72%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0a6f70, transparent);
  opacity: 0.6;
}

.explore-kicker {
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  color: #55636d;
  max-width: 55ch;
  margin: 0 auto;
}


/* ============================================================
   CITY STRIP
============================================================ */
.travel-city-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.city-strip-viewport {
  overflow: hidden;
}

.city-strip-track {
  display: inline-flex;
  gap: 0.5rem;
  transition: transform 0.35s ease;
  will-change: transform;
}

.city-pill {
  border-radius: 999px;
  border: 1px solid #c4d0d5;
  background: #ffffffcc;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.city-pill:hover {
  border-color: #0a6f70;
  color: #0a6f70;
}
.city-pill.active {
  background: #0a6f70;
  color: #fff;
  border-color: #0a6f70;
}

.city-nav {
display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  color: #0a6f70;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.city-nav:hover {
  background: #0a6f70;
  color: #fff;
  transform: scale(1.1);
}

.city-nav:active, .places-nav:active {
  transform: scale(0.95);
}
/* ============================================================
   PLACES WRAPPER & ROW
============================================================ */
.travel-places-wrapper {
  position: relative;
  margin-top: 2rem;
  max-height: 1200px;
  opacity: 1;
  background: transparent
  transform: translateY(0);
  transition:all 0.6s ease;

}
.travel-places-wrapper.is-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(15px);
  overflow: hidden;
}

.travel-places-empty {
  text-align: center;
  color: #6b7a88;
  background: transparent
  font-size: 0.95rem;
}

.travel-places-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: transparent;
  margin-top: 1.2rem;
  position: relative;
  left: 50%;
  width: 100vw;          /* full viewport width */
  transform: translateX(-50%);
  padding: 0 2rem;       /* optional side breathing space */
  box-sizing: border-box;
}

.travel-places-grid {
  box-sizing: border-box;
  padding: 0.5rem 3rem 1rem;  
  flex: 1;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.5rem 0.25rem 1rem;
  justify-content: flex-start;
  width: 100%;
}

.travel-places-grid.few-cards {
  justify-content: center;
}

.travel-places-grid::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}
/* Arrow buttons */
.places-nav {
display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  color: #0a6f70;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.places-nav:hover {
background: #0a6f70;
  color: #fff;
  transform: scale(1.1);

}


/* ============================================================
   FLIP CARDS
============================================================ */
.place-card {
  flex: 0 0 min(280px, 80vw);
  max-width: 320px;
  perspective: 1200px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.place-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform 0.65s ease;
  cursor: pointer;
}
.place-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.place-card-front,
.place-card-back {
  position: absolute;
  inset: 0;
  padding: 1rem 1.1rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: none;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Back face */
.place-card-back {
  transform: rotateY(180deg);
  background: #faf7ef;
  border: 1px solid rgba(0,0,0,0.05);
}

/* Front content */
.place-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #263238;
  margin-bottom: 0.25rem;
}
.place-meta {
  font-size: 0.85rem;
  color: #6b7a88;
}
.place-distance {
  font-size: 0.85rem;
  color: #0a6f70;
  margin-top: 0.4rem;
}
.place-tags {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.place-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e0f3f5;
  color: #0a6f70;
}
.place-front-footer {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: #424242;
}

/* Back content */
.place-back-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.place-back-heading {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #37474f;
}
.place-back-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4b5964;
}

/* Hidden state text */
.travel-places-wrapper.is-hidden .travel-places-empty {
  text-align: center;
  font-style: italic;
  color: #8a97a0;
}

/* ============================================================
   RESPONSIVE TWEAKS
============================================================ */
@media (max-width: 900px) {
  .travel-filters {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .travel-city-strip {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ============================================================
   PREMIUM TILT + SHINE HOVER (outer card only)
============================================================ */

.place-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.25s ease;
  will-change: transform;
}

/* subtle lift + depth while tilting */
.place-card.is-tilting {
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(8px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.14);
}

/* Shine layer */
.place-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* light follows mouse */
  background:
    radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0) 55%
    );

  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.18s ease;
}

.place-card.is-tilting::after {
  opacity: 1;
}

/* optional: tiny micro-contrast on hover */
.place-card.is-tilting .place-card-front,
.place-card.is-tilting .place-card-back {
  filter: saturate(1.03) contrast(1.02);
}

/* ============================================================
   BHARAT STORIES – PREMIUM ARTICLES SECTION (clean rewrite)
   Replace your entire old block with this.
============================================================ */

#travel-articles {
  position: relative;
  padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 6vw, 5rem);
  background: #f9f8f1;
  overflow: visible;
}

.travel-articles-inner {
  width: 100%;
  margin: 0 auto;
  max-width: none;
}

/* -----------------------------
   Title block (same theme)
------------------------------ */
.articles-header {
  text-align: center;
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}

.articles-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0a6f70;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
  display: inline-block;
  position: relative;
  animation: titleFloat 6s ease-in-out infinite;
}

.articles-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
  width: 72%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0a6f70, transparent);
  opacity: 0.6;
}

.articles-kicker {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: #55636d;
  max-width: 55ch;
  margin: 0 auto;
}

@keyframes titleFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* -----------------------------
   Stack wrapper
------------------------------ */
.articles-stack {
  position: relative;
  display: grid;
  gap: 0.9rem;
  max-width: 1200px;     /* slightly tighter than before */
  margin: 0.2rem auto 0;
  z-index: 0;
}

/* -----------------------------
   Base card (uniform width)
   ↓ fixes empty-width issue
------------------------------ */
.article-card {
  position: relative;
  width: min(70%, 820px);   /* ✅ narrower, consistent for all cards */
  margin: 0 auto;
  border-radius: 1.6rem;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
  will-change: transform;
  z-index: 1;
}

/* pleasant palette */
.article-card[data-article-index="0"] { background: #ffffff; }
.article-card[data-article-index="1"] { background: #fff4ea; }
.article-card[data-article-index="2"] { background: #e9f8f4; }

/* -----------------------------
   Overlap for 2nd & 3rd
   (tight, premium stack)
------------------------------ */
.article-card--secondary[data-article-index="1"] {
  transform: translateY(-2.4rem);
  z-index: 2;
}

.article-card--secondary[data-article-index="2"] {
  transform: translateY(-4.8rem);
  z-index: 3;
}

/* -----------------------------
   Fancy hover (premium)
------------------------------ */
.article-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,0.7), transparent 40%),
    linear-gradient(120deg, rgba(10,111,112,0.08), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.article-card:hover {
  z-index: 50;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14);
  filter: saturate(1.03);
}

.article-card:hover::after {
  opacity: 1;
}

/* -----------------------------
   Active / expanded state
------------------------------ */
.article-card.is-active {
  z-index: 100;
  transform: translateY(-10px) scale(1.025);
  box-shadow: 0 26px 60px rgba(0,0,0,0.18);
}

.article-card.is-active:hover {
  transform: translateY(-10px) scale(1.025);
}

/* -----------------------------
   Image sizing (consistent)
------------------------------ */
.article-card-image {
  background-size: cover;
  background-position: center;
  height: 230px;           /* ✅ fixed height = equal tops */
}

/* -----------------------------
   Content block
------------------------------ */
.article-card-content {
  padding: 1.35rem 1.7rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;             /* ✅ tighter vertical rhythm */
  justify-content: flex-start;
}

/* Titles */
.article-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: #263238;
}

.article-subtitle {
  font-size: 1rem;
  color: #60707a;
  margin: 0;
}

/* Mood chip */
.article-mood {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #e0f3f5;
  color: #0a6f70;
  font-weight: 600;
  margin-top: 0.1rem;
}

/* Preview vs full text */
.article-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #3b3b3b;
}

.article-body--preview {
  transition: opacity 0.25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 4;     /* same preview height */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* full text hidden by default */
.article-body--full {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
  padding-top: 0.1rem;       /* ✅ removes big subtitle→body gap */
}

.article-card.is-active .article-body--full {
  margin-top: 0.15rem;
  padding-top: 0;
}

/* Read more */
.article-readmore {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: #0a6f70;
  text-decoration: none;
}
.article-readmore:hover { text-decoration: underline; }

/* -----------------------------
   Scroll-reveal fade-up
------------------------------ */
.articles-header,
.articles-stack {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.articles-header.is-visible,
.articles-stack.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 900px) {
  .article-card {
    width: 96%;
  }
  .article-card-image {
    height: 200px;
  }
  .article-card--secondary[data-article-index="1"] {
    transform: translateY(-1.6rem);
  }
  .article-card--secondary[data-article-index="2"] {
    transform: translateY(-3.1rem);
  }
}

/* ============================================================
   BHARAT PREMIUM FOOTER
============================================================ */

.bharat-footer{
  position: relative;
  background:#0b3b3b;
  color:#e9f4f1;
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow:hidden;
}

/* dreamy travel map wash */
.bharat-footer-bg{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(10,111,112,0.25), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,0.03), transparent 40%);
  filter: blur(22px);
  opacity:0.9;
  animation: footerGlow 10s ease-in-out infinite;
  pointer-events:none;
}

@keyframes footerGlow{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.03); }
}

.bharat-footer-inner{
  position: relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 6vw, 3rem);
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr;
  gap: clamp(1.2rem, 3vw, 2rem);
}

/* Brand */
.footer-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.7rem;
}
.footer-logo-mark{
  font-family:"NotoSerifDeva", serif;
  font-weight:800;
  font-size:1.6rem;
  color:#e6fff7;
  letter-spacing:.02em;
}
.footer-logo-text{
  font-weight:700;
  font-size:1.2rem;
  opacity:.95;
}
.footer-tagline{
  font-size:.95rem;
  line-height:1.6;
  opacity:.9;
  max-width:32ch;
}

/* Social */
.footer-social{
  display:flex;
  gap:.5rem;
  margin-top:1rem;
}
.footer-social .soc{
  width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.08);
  color:#fff;text-decoration:none;font-weight:700;
  transition:transform .25s ease, background .25s ease;
}
.footer-social .soc:hover{
  transform:translateY(-3px) scale(1.06);
  background:rgba(255,255,255,0.16);
}

/* Columns */
.footer-title{
  font-size:1rem;
  font-weight:700;
  margin:0 0 .9rem;
  color:#cfeee6;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.footer-muted{
  font-size:.9rem;
  opacity:.85;
  line-height:1.6;
}

/* Footer menu */
.footer-menu{
  list-style:none;
  padding:0;margin:0;
  display:grid; gap:.55rem;
}
.footer-menu a{
  color:#e9f4f1;text-decoration:none;
  opacity:.9; transition:opacity .2s ease, transform .2s ease;
}
.footer-menu a:hover{
  opacity:1; transform:translateX(3px);
}

/* Chips */
.footer-chips{
  display:flex; flex-wrap:wrap;
  gap:.45rem;
}
.footer-chip{
  font-size:.82rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#e9f4f1;text-decoration:none;
  transition:transform .2s ease, background .2s ease;
}
.footer-chip:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.14);
}

/* Newsletter */
.footer-form{
  display:flex; gap:.5rem; margin-top:.9rem;
}
.footer-form input{
  flex:1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.25);
  padding:.6rem .9rem;
  color:#fff; font-size:.9rem;
  outline:none;
}
.footer-form input::placeholder{ color:rgba(255,255,255,0.6); }
.footer-form button{
  border:none;
  border-radius:999px;
  background:#0a6f70;
  color:#fff;
  font-weight:700;
  padding:.6rem 1rem;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.footer-form button:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
}

.footer-contact{
  margin-top:1rem;
  font-size:.9rem; opacity:.9; line-height:1.6;
}

/* Bottom bar */
.bharat-footer-bottom{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,0.12);
  padding: .9rem clamp(1.4rem, 6vw, 3rem);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.9rem;
  opacity:.92;
}

.back-top{
  width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  color:#fff; font-size:1.1rem; font-weight:800;
  cursor:pointer;
  display:grid; place-items:center;
  transition:transform .25s ease, background .25s ease;
}
.back-top:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.16);
}

/* Scroll-reveal */
.bharat-footer.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.bharat-footer.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width: 1000px){
  .bharat-footer-inner{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 620px){
  .bharat-footer-inner{
    grid-template-columns:1fr;
  }
  .bharat-footer-bottom{
    flex-direction:column; gap:.6rem;
  }
}

/* ============================================================
   FOOTER ROUTE DOODLE (SVG)
============================================================ */
.footer-doodle{
  position:absolute;
  left:-5%;
  bottom:8%;
  width:110%;
  height:auto;
  z-index:1;                 /* behind content, above glow */
  opacity:0.35;
  pointer-events:none;
  filter: blur(0.2px);
}

.footer-doodle-path{
  fill:none;
  stroke: rgba(233,244,241,0.9);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* draw animation */
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: doodleDraw 9s ease forwards, doodleFloat 10s ease-in-out infinite;
}

.footer-doodle-dot{
  fill: rgba(233,244,241,0.95);
  opacity:0.7;
  animation: dotPulse 3.2s ease-in-out infinite;
}

.footer-doodle-dot:nth-child(2){ animation-delay: .4s; }
.footer-doodle-dot:nth-child(3){ animation-delay: .8s; }
.footer-doodle-dot:nth-child(4){ animation-delay: 1.2s; }
.footer-doodle-dot:nth-child(5){ animation-delay: 1.6s; }

@keyframes doodleDraw{
  to { stroke-dashoffset: 0; }
}

@keyframes doodleFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

@keyframes dotPulse{
  0%,100% { transform: scale(1); opacity:0.7; }
  50%     { transform: scale(1.25); opacity:1; }
}