/* ============================================================
   Pearl Voyages — homepage
   Mirrors theeditedtraveler.com structure + Elementor-style
   fade / fade-up / fade-left / fade-right scroll animations
   ============================================================ */

/* ---------- scroll animation system ---------- */
[data-anim]{
  opacity:0;
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),
             transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-anim="fade-up"]{transform:translateY(42px)}
[data-anim="fade-left"]{transform:translateX(-52px)}
[data-anim="fade-right"]{transform:translateX(52px)}
[data-anim].anim-in{opacity:1;transform:none}

/* image "wipe" reveal */
.img-reveal{position:relative;overflow:hidden;border-radius:3px;margin:0}
.img-reveal img{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.14);
  transition:clip-path 1.15s cubic-bezier(.7,0,.2,1),transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.img-reveal.anim-in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.tilt{transform:rotate(-3deg)}

/* static-capture mode */
.shot [data-anim]{opacity:1!important;transform:none!important}
.shot .img-reveal img{clip-path:inset(0 0 0 0)!important;transform:none!important}
.shot .hp-slide{transition:none!important;transform:none!important}
.shot .hp-hero__dots{display:none}
.shot .hp-hero{min-height:0;height:760px}

/* ---------- header: solid on the homepage ---------- */
.site-header.solid{
  background:#fff;
  backdrop-filter:blur(10px);
  border-color:var(--line);
  box-shadow:0 1px 0 rgba(22,37,46,.04);
}
.site-header.solid .brand-mark{display:block;height:54px;mix-blend-mode:multiply}
.site-header.solid .brand-word{display:none}
.site-header.solid .nav a{color:var(--ink)}
.site-header.solid .header-cta{background:var(--teal);color:var(--paper)}
.site-header.solid .hamburger{border-color:var(--line)}
.site-header.solid .hamburger span{background:var(--ink)}

/* ---------- shared bits ---------- */
.hp-eyebrow{
  font-family:var(--font-body);font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.9rem);color:var(--ink);
  margin:0 0 2.4rem;
}
.hp-textlink{
  font-family:var(--font-ui);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--teal);border-bottom:1px solid var(--line);padding-bottom:.3rem;
  display:inline-block;transition:border-color .3s;
}
.hp-textlink:hover{border-color:var(--teal)}

/* ============================================================
   HERO
   ============================================================ */
.hp-hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(9rem,18vh,13rem) 0 clamp(5rem,10vh,7rem);
  overflow:hidden;color:var(--paper);
}
.hp-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0a1a22}
/* Ken Burns via transitions, not an animation: an animation is dropped the
   instant .is-active comes off, so the outgoing slide snapped back to full
   size mid-fade (the "jitter"). Here the outgoing slide holds its scale while
   it fades, and only resets (instantly, delay = fade time) once invisible. */
.hp-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  opacity:0;transform:scale(1.14);backface-visibility:hidden;
  transition:opacity 1.6s ease,transform 0s linear 1.6s;
}
.hp-slide.is-active{
  opacity:1;transform:scale(1.01);
  transition:opacity 1.6s ease,transform 9s ease-out;
}

.hp-hero__dots{
  position:absolute;left:var(--gutter);right:auto;bottom:2.4rem;z-index:2;
  display:flex;gap:.55rem;justify-content:flex-start;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.hp-hero__dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .3s,transform .3s;
}
.hp-hero__dots button:hover{background:rgba(255,255,255,.75)}
.hp-hero__dots button.is-active{background:var(--paper);transform:scale(1.35)}
.hp-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 60% at 50% 62%,rgba(8,22,30,.5),transparent 75%),
    linear-gradient(180deg,rgba(8,22,30,.52),rgba(8,22,30,.12) 26%,rgba(8,22,30,.2) 52%,rgba(8,22,30,.78));
}
.hp-hero__inner{position:relative;max-width:60rem}
.hp-hero .kicker{text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hp-hero h1{
  font-size:clamp(2.6rem,6.4vw,5rem);
  line-height:1.08;letter-spacing:.01em;
  margin:0 0 1.6rem;
  text-shadow:0 2px 34px rgba(0,0,0,.4);
}
.hp-hero__sub{
  max-width:44ch;margin:0 auto 2.4rem;
  font-size:clamp(1.05rem,.5vw + 1rem,1.28rem);
  color:rgba(255,255,255,.92);
}
.hp-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hp-hero .scroll-cue{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%)}

/* ============================================================
   VALUE
   ============================================================ */
.hp-value__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.hp-pills{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.hp-pills li{
  font-family:var(--font-ui);font-size:.74rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .95rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);
}
.hp-value__text>p{color:var(--ink-soft);font-size:1.1rem;max-width:46ch;margin-bottom:1.8rem}
.hp-value__media{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.hp-value__media .img-reveal:first-child{aspect-ratio:3/4;margin-top:2.5rem}
.hp-value__media .img-reveal:last-child{aspect-ratio:4/5}
.hp-value__media .img-reveal img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   STATS
   ============================================================ */
.hp-stats{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,4.5rem)}
.hp-stats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.hp-stats__row b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--sky-ink);
}
.hp-stats__row span{
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.6rem;display:block;
}

/* ============================================================
   SERVICES OVERVIEW
   ============================================================ */
.hp-services h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.hp-serv__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.hp-serv__card{border-top:2px solid var(--ink);padding-top:1.4rem}
.hp-serv__no{font-family:var(--font-display);font-size:1.1rem;color:var(--sand)}
.hp-serv__card h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.5rem 0 .7rem}
.hp-serv__card p{color:var(--ink-soft);margin:0}
.hp-serv__note{margin-top:2.5rem;color:var(--ink-soft)}
.hp-serv__note a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--line)}
.hp-serv__note a:hover{border-color:var(--teal)}

/* ============================================================
   WHO WE PLAN TRIPS FOR
   ============================================================ */
.hp-who{background:var(--paper-2);border-block:1px solid var(--line)}
.hp-who__head{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  align-items:end;margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.hp-who__head h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.hp-who__head>p{color:var(--ink-soft)}
.hp-who__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.hp-who__card{
  position:relative;display:flex;align-items:flex-end;
  min-height:260px;padding:1.4rem;overflow:hidden;border-radius:3px;
  text-decoration:none;color:var(--paper);background:var(--teal);
}
.hp-who__card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.hp-who__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,22,30,.78),rgba(8,22,30,.05) 60%);
}
.hp-who__card span{
  position:relative;z-index:1;font-family:var(--font-display);font-size:1.3rem;line-height:1.15;
}
.hp-who__card.is-text{background:var(--teal)}
.hp-who__card.is-text::after{display:none}
.hp-who__card.is-text span{color:var(--paper)}
.hp-who__card:hover img{transform:scale(1.07)}

/* ============================================================
   ABOUT (homepage teaser — short, links to the full About page)
   ============================================================ */
.hp-about{text-align:center}
.hp-local{text-align:center;background:var(--paper-2);border-block:1px solid var(--line)}
.hp-about__band{max-width:44rem;margin-inline:auto}
.hp-about__band h2{font-size:clamp(2rem,4vw,3rem);margin:.4rem auto 1.4rem;max-width:20ch}
.hp-about__band p{color:var(--ink-soft);font-size:1.12rem;margin:0 auto 1.8rem;max-width:52ch}
.hp-about__band .hp-textlink{margin-top:.2rem}

/* ============================================================
   PROCESS
   ============================================================ */
.hp-process h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:.4rem 0 1rem}
.hp-process__sub{max-width:52ch;color:var(--ink-soft);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.hp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.hp-steps li{border-top:2px solid var(--ink);padding-top:1.2rem}
.hp-steps span{font-family:var(--font-display);font-size:1.5rem;color:var(--teal);display:block;margin-bottom:.5rem}
.hp-steps h3{font-size:1.35rem;margin-bottom:.5rem}
.hp-steps p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ============================================================
   FINAL CTA
   ============================================================ */
.hp-final{
  position:relative;overflow:hidden;color:var(--paper);text-align:center;
  padding-block:clamp(6rem,14vw,10rem);
}
.hp-final__media{position:absolute;inset:0;z-index:-2}
.hp-final__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hp-final::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,22,30,.62)}
.hp-final__inner{max-width:40rem}
.hp-final h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem}
.hp-final p{color:rgba(255,255,255,.9);font-size:1.15rem;margin-bottom:2rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hp-value__grid{grid-template-columns:1fr;gap:2.5rem}
  .hp-value__media .img-reveal:first-child{margin-top:0}
  .hp-serv__cards{grid-template-columns:1fr;gap:1.5rem}
  .hp-who__head{grid-template-columns:1fr;gap:1rem;align-items:start}
  .hp-who__grid{grid-template-columns:1fr 1fr}
  .hp-about__grid{grid-template-columns:1fr;gap:2.5rem}
  .hp-about__media img{aspect-ratio:16/11;max-height:440px;border-radius:140px 140px 4px 4px}
  .hp-about__badge{left:1rem}
  .hp-steps{grid-template-columns:1fr 1fr;gap:2rem}
  .hp-stats__row{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:560px){
  .hp-who__grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .hp-who__card{min-height:170px;padding:1rem}
  .hp-who__card span{font-size:1.08rem}
  .hp-steps{grid-template-columns:1fr}
  .hp-value__media{gap:.8rem}
  .hp-value__media .img-reveal:first-child{margin-top:1.5rem}
  .hp-attr__grid{gap:.7rem}
  .hp-attr__card{padding:.9rem}
  .hp-attr__card span{font-size:1.15rem}
}

/* ============================================================
   2026-09-26 client text revision
   ============================================================ */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* hero: image-led, only the kicker sits on the photo */
.hp-hero--clean::after{
  background:linear-gradient(180deg,rgba(8,22,30,.62),rgba(8,22,30,.18) 20%,rgba(8,22,30,0) 38%,rgba(8,22,30,0) 62%,rgba(8,22,30,.45));
}
.site-header:not(.scrolled):not(.solid) .nav a,.site-header:not(.scrolled):not(.solid) .brand-word{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hp-hero--clean .kicker{
  font-size:clamp(.85rem,.4vw + .75rem,1.05rem);letter-spacing:.34em;margin:0;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 24px rgba(0,0,0,.55);
}

/* value */
.hp-value__title{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;margin:0 0 1.8rem;max-width:16ch}
.hp-value__text>p{margin-bottom:1.2rem}
.hp-value__text>p.hp-value__sign{
  font-family:var(--font-body);font-style:italic;color:var(--ink);
  font-size:1.2rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
}

/* what makes Sri Lanka special */
.hp-special{background:var(--paper-2);border-block:1px solid var(--line)}
.hp-special__head{text-align:center;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.hp-special__head h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.hp-special__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3rem)}
.hp-special__grid article{border-top:2px solid var(--ink);padding-top:1.4rem}
.hp-special__src{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand);margin:0 0 .8rem;
}
.hp-special__grid h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;margin:0 0 .8rem}
.hp-special__grid article>p:last-child{color:var(--ink-soft);margin:0}

/* stats: new background (client asked for a colour change) */
.hp-stats{background:var(--teal-deep)}

/* top attractions */
.hp-attr__head{max-width:48rem;margin:0 auto clamp(2.5rem,5vw,3.5rem);text-align:center}
.hp-attr__head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.2rem}
.hp-attr__head p{color:var(--ink-soft);font-size:1.1rem;margin:0 auto 2rem;max-width:60ch}
.hp-attr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.hp-attr__card{
  position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;
  padding:1.3rem;overflow:hidden;border-radius:3px;text-decoration:none;color:var(--paper);
}
.hp-attr__card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.hp-attr__card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,22,30,.7),rgba(8,22,30,0) 55%)}
.hp-attr__card span{position:relative;z-index:1;font-family:var(--font-display);font-size:1.45rem}
.hp-attr__card:hover img{transform:scale(1.07)}

@media (max-width:1000px){
  .hp-special__grid{grid-template-columns:1fr;gap:2rem}
  .hp-attr__grid{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none}
  .img-reveal img{clip-path:inset(0 0 0 0)!important;transform:none!important;transition:none}
  .hp-slide{transition:none!important;transform:none!important}
  .hp-slide.is-active{opacity:1}
  .hp-hero__dots{display:none}
}


/* ---------- mobile pass (2026-09-29): bigger touch targets ---------- */
@media (max-width:1000px){
  .hp-textlink{padding-block:.6rem}
}