@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap");

:root{
  --adventure:#e63946;
  --nature:#2a9d8f;
  --culture:#8338ec;
  --wellness:#ffbe0b;
  --food:#fb5607;

  --dark:#121212;
  --white:#fff;

  --shadow:0 20px 50px rgba(0,0,0,.2);
  --gold-tile:400px;
  --wave-h:180px;

  --padX: clamp(16px, 6vw, 120px);
  --rowGap: clamp(60px, 8vw, 110px);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  color:#333;
  background:#fafafa url("../images/bg-pattern.png") repeat;
  background-size:400px 400px;
}

/* =========================
   INTRO
========================= */
.hub-intro{
  text-align:center;
  padding:100px 20px 50px;
  background:rgba(255,204,102,.1);
  position:relative;
  z-index:5;
}

.hub-intro h1{
  /* font-family:"Playfair Display",serif; */
  font-size:clamp(2rem, 5vw, 3.6rem);
  margin:0 0 15px;
}

.hub-intro p{
  max-width:650px;
  margin:0 auto;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:#555;
  padding:0 10px;
}

/* =========================
   GOLD CONTAINER + WAVE
========================= */
.experience-container{
  width:100%;
  padding:0 var(--padX) 70px;
  display:flex;
  flex-direction:column;
  gap:var(--rowGap);
  position:relative;
  z-index:1;

  background-image:url("../images/golden-background.jpg");
  background-repeat:repeat;
  background-size:var(--gold-tile);
  background-position:0 0;
}

/* wave top strip */
.experience-container::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: calc(var(--wave-h) * -.55);
  height: var(--wave-h);

  background-image:url("../images/golden-background.jpg");
  background-repeat:repeat;
  background-size:var(--gold-tile);
  background-position:0 0;

  z-index:0;
  pointer-events:none;

  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140'%3E%3Cpath d='M0,80 C180,20 360,120 540,80 C720,20 900,120 1080,80 C1260,20 1440,80 1440,0 L1440,140 L0,140 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  -webkit-mask-position:center;

  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140'%3E%3Cpath d='M0,80 C180,20 360,120 540,80 C720,20 900,120 1080,80 C1260,20 1440,80 1440,0 L1440,140 L0,140 Z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-size:100% 100%;
  mask-position:center;
}

/* keep children above wave */
.experience-container > *{
  position:relative;
  z-index:2;
}

/* fallback if mask unsupported */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))){
  .experience-container::before{ clip-path:none; }
}

/* =========================
   ROW LAYOUT (alternating)
========================= */
.experience-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px, 5vw, 60px);
  align-items:center;
}

/* rows 1,5,9... => text | image */
.experience-row:nth-child(4n+1){ grid-template-areas:"text image"; }
/* rows 3,7,11... => image | text */
.experience-row:nth-child(4n+3){ grid-template-areas:"image text"; }

.exp-text{ grid-area:text; }
.visual-box{ grid-area:image; }

/* =========================
   TEXT
========================= */
.exp-text h2{
  /* font-family:"Playfair Display",serif; */
  font-size:clamp(2rem, 4vw, 3rem);
  margin:0 0 15px;
}

.exp-text h2::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:currentColor;
  margin-top:10px;
  border-radius:2px;
}

.exp-text p{
  color:#555;
  font-size:clamp(.95rem, 1.4vw, 1rem);
  line-height:1.6;
}

/* =========================
   TAGS
========================= */
.exp-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:25px;
}

.tag{
  padding:10px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.06);
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  backdrop-filter: blur(6px);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.tag:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.tag.selected{
  background:rgba(18,18,18,.92);
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.muted{ color:rgba(0,0,0,.5); font-weight:600; }

/* =========================
   VISUAL BOX + SMOOTH ZOOM
========================= */
.visual-box{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  height:clamp(320px, 42vw, 520px);
  isolation:isolate;

  backface-visibility:hidden;
  transform: translateZ(0);
}

.img-wrapper{
  width:100%;
  height:100%;
  transform: scale(1.02) translateZ(0);
  will-change: transform;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}

.img-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.visual-box:hover .img-wrapper{
  transform: scale(1.10) translateZ(0);
}

/* =========================
   OVERLAY CARD (hover desktop + tap mobile)
========================= */
.overlay-card{
  position:absolute;
  bottom:26px;
  right:26px;
  background:rgba(255,255,255,.92);
  padding:22px;
  border-radius:18px;
  width:min(320px, 86%);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  z-index:2;

  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}

@media (hover:hover) and (pointer:fine){
  .visual-box:hover .overlay-card{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
}

.visual-box.is-open .overlay-card{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.overlay-card h4{
  margin:0 0 6px;
  font-size:1.1rem;
  color:#111;
}

.overlay-card p{
  margin:0;
  font-size:.88rem;
  color:#444;
  line-height:1.35;
}

.goto-more{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  border-radius:999px;
  background:#121212;
  color:#fff;
  text-decoration:none;
  font-size:.82rem;
  transition:transform .2s ease, opacity .2s ease;
}

.goto-more:hover{
  transform:translateY(-1px);
  opacity:.95;
}

/* themes (used by your headings) */
.adventure-theme{ color:var(--adventure); }
.nature-theme{ color:var(--nature); }
.culture-theme{ color:var(--culture); }
.wellness-theme{ color:var(--wellness); }
.food-theme{ color:var(--food); }

/* =========================
   REVEAL
========================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease, transform .85s ease;
}
.reveal.left{ transform:translateX(-42px); }
.reveal.right{ transform:translateX(42px); }
.reveal.active{ opacity:1; transform:translateX(0) translateY(0); }

/* =========================
   GOLD LUXE DIVIDER (longer)
========================= */
.gap-divider{
  width:100%;
  display:flex;
  justify-content:center;
  margin:clamp(35px, 6vw, 70px) 0;
  pointer-events:none;
  overflow:hidden;
}
.gap-divider svg{
  display:block;
  width:min(1200px, 96%);
  height:110px;
  max-width:100%;
  overflow:hidden;
}

/* base line */
.gap-divider .leftLine,
.gap-divider .rightLine{
  fill:none;
  stroke:url(#goldGradient);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.95;
  stroke-dasharray:var(--dash,600);
  stroke-dashoffset:var(--dash,600);
  filter:url(#goldEmboss);
}

/* glow */
.gap-divider .leftGlow,
.gap-divider .rightGlow{
  fill:none;
  stroke:url(#goldGradient);
  stroke-width:12;
  stroke-linecap:round;
  opacity:0;
  filter: blur(2px);
  stroke-dasharray:var(--dash,600);
  stroke-dashoffset:var(--dash,600);
}

/* scroll progress */
.gap-divider .leftProgress,
.gap-divider .rightProgress{
  fill:none;
  stroke:url(#goldGradient);
  stroke-width:4;
  stroke-linecap:round;
  opacity:0;
  filter:url(#goldEmboss);
  stroke-dasharray:var(--dash,600);
  stroke-dashoffset:var(--progOffset, var(--dash,600));
  transition: opacity .35s ease;
}

/* center sigil */
.gap-divider .sigilRing{
  fill:none;
  stroke:url(#goldGradient);
  stroke-width:2;
  opacity:0;
  transform-origin:450px 50px;
  transform:scale(.82);
  filter:url(#goldEmboss);
}
.gap-divider .sigilDot{
  fill:url(#goldGradient);
  opacity:0;
  transform-origin:450px 50px;
  transform:scale(.6);
  filter:url(#goldEmboss);
}

/* shimmer */
.gap-divider .shimmer{
  fill:none;
  stroke:white;
  stroke-width:4;
  stroke-linecap:round;
  opacity:0;
  filter: blur(.6px);
  mix-blend-mode:soft-light;
  stroke-dasharray:120 760;
  stroke-dashoffset:760;
}

/* activation */
.gap-divider.is-active .leftLine,
.gap-divider.is-active .rightLine,
.gap-divider.is-active .leftGlow,
.gap-divider.is-active .rightGlow{
  animation: drawGold 1.05s cubic-bezier(.22,.61,.36,1) forwards;
}

.gap-divider.is-active .leftProgress,
.gap-divider.is-active .rightProgress{ opacity:.95; }

.gap-divider.is-active .sigilDot{
  animation: goldPop .45s ease forwards;
  animation-delay:.65s;
}
.gap-divider.is-active .sigilRing{
  animation: ringGold .7s ease forwards;
  animation-delay:.45s;
}

.gap-divider.is-active .leftGlow,
.gap-divider.is-active .rightGlow{
  opacity:.18;
  animation:
    drawGold 1.05s cubic-bezier(.22,.61,.36,1) forwards,
    breatheGlow 2.8s ease-in-out 1.2s infinite;
}

.gap-divider.is-active .shimmer{
  animation: goldShimmer 1.1s ease forwards;
  animation-delay: 1.0s;
}

@keyframes drawGold{ to{ stroke-dashoffset:0 } }
@keyframes goldPop{ to{ opacity:1; transform:scale(1) } }
@keyframes ringGold{
  0%{ opacity:0; transform:scale(.72) rotate(-10deg) }
  100%{ opacity:.35; transform:scale(1) rotate(0deg) }
}
@keyframes goldShimmer{
  0%{ opacity:0; stroke-dashoffset:760 }
  15%{ opacity:.30 }
  100%{ opacity:0; stroke-dashoffset:0 }
}
@keyframes breatheGlow{
  0%, 100% { opacity:.14; }
  50%      { opacity:.24; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .gap-divider *{ animation:none!important; transition:none!important; }
  .gap-divider .leftLine,
  .gap-divider .rightLine,
  .gap-divider .leftGlow,
  .gap-divider .rightGlow{
    stroke-dashoffset:0!important;
    opacity:.18!important;
  }
  .gap-divider .leftProgress,
  .gap-divider .rightProgress{ opacity:.95!important; }
  .gap-divider .sigilDot{ opacity:1!important; transform:scale(1)!important; }
  .gap-divider .sigilRing{ opacity:.35!important; transform:scale(1)!important; }
  .gap-divider .shimmer{ display:none!important; }
}

/* responsive */
@media (max-width:900px){
  .experience-row{
    grid-template-columns:1fr !important;
    gap:18px;
  }
  .experience-row:nth-child(4n+1),
  .experience-row:nth-child(4n+3){
    grid-template-areas:"text" "image" !important;
  }

  .gap-divider svg{
    width:min(980px, 96%);
    height:100px;
  }
}

@media (max-width:520px){
  .gap-divider{ margin:28px 0; }
  .gap-divider svg{ width:98%; height:92px; }
}