/* Grand Lanka Tours - motion system. Everything here is gated by html.js-motion, so without JS
   (or with reduced motion) the page renders normally and nothing is hidden. */
:root{
  --motion-fast:180ms; --motion-normal:400ms; --motion-smooth:800ms; --motion-cinematic:1100ms;
  --ease-natural:cubic-bezier(.22,1,.36,1); --ease-smooth:cubic-bezier(.65,0,.35,1);
}
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:vtOut 160ms ease both;}
  ::view-transition-new(root){animation:vtIn 320ms var(--ease-natural) both;}
}
@keyframes vtOut{to{opacity:0}} @keyframes vtIn{from{opacity:0}}
@keyframes riseIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes headerIn{from{translate:0 -100%}to{translate:0 0}}
@keyframes wordUp{from{translate:0 112%}to{translate:0 0}}
@keyframes menuIn{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes shine{from{translate:-120% 0}to{translate:220% 0}}
@keyframes drawLine{from{scale:0 1}to{scale:1 1}}

.js-motion .section-head > *, .js-motion .strip-inner > *, .js-motion .feature-grid > div:last-child > *, .js-motion .about-card > div:first-child > *, .js-motion .check-cols li, .js-motion .detail > *, .js-motion .side > *, .js-motion .footer-cols > div, .js-motion .feature-callout, .js-motion .form-grid > div{opacity:0;translate:0 30px;will-change:auto;}

.js-motion .pkg-card, .js-motion .dest-card, .js-motion .style-tile, .js-motion .trust-inner > div, .js-motion .tile-row a, .js-motion .strip-grid a, .js-motion .gallery-grid a, .js-motion .related-grid > *, .js-motion .rev-platform{opacity:0;translate:0 38px;scale:.97;will-change:auto;}

.js-motion .contact-info, .js-motion .timeline li{opacity:0;translate:-42px 0;will-change:auto;}

.js-motion .contact-form, .js-motion .style-panel{opacity:0;translate:42px 0;will-change:auto;}

.js-motion .cta-banner, .js-motion .about-card{opacity:0;scale:.965;will-change:auto;}

.js-motion .feature-media, .js-motion .about-media{clip-path:inset(0 100% 0 0 round 14px);opacity:1;will-change:auto;}

/* shared transition for revealed elements (delay is per-element via --d; hover props keep their own timing) */
.js-motion .section-head > *, .js-motion .strip-inner > *, .js-motion .feature-grid > div:last-child > *, .js-motion .about-card > div:first-child > *, .js-motion .check-cols li, .js-motion .detail > *, .js-motion .side > *, .js-motion .footer-cols > div, .js-motion .feature-callout, .js-motion .form-grid > div, .js-motion .pkg-card, .js-motion .dest-card, .js-motion .style-tile, .js-motion .trust-inner > div, .js-motion .tile-row a, .js-motion .strip-grid a, .js-motion .gallery-grid a, .js-motion .related-grid > *, .js-motion .rev-platform, .js-motion .contact-info, .js-motion .timeline li, .js-motion .contact-form, .js-motion .style-panel, .js-motion .cta-banner, .js-motion .about-card, .js-motion .feature-media, .js-motion .about-media{transition:opacity var(--motion-smooth) var(--ease-natural) var(--d,0ms),translate var(--motion-smooth) var(--ease-natural) var(--d,0ms),scale var(--motion-smooth) var(--ease-natural) var(--d,0ms),clip-path var(--motion-cinematic) var(--ease-natural) var(--d,0ms),transform .3s var(--ease-natural),box-shadow .3s ease,background-color .25s ease,border-color .25s ease,color .25s ease;}

.js-motion .section-head > *.is-in, .js-motion .strip-inner > *.is-in, .js-motion .feature-grid > div:last-child > *.is-in, .js-motion .about-card > div:first-child > *.is-in, .js-motion .check-cols li.is-in, .js-motion .detail > *.is-in, .js-motion .side > *.is-in, .js-motion .footer-cols > div.is-in, .js-motion .feature-callout.is-in, .js-motion .form-grid > div.is-in{opacity:1;translate:0 0;}

.js-motion .pkg-card.is-in, .js-motion .dest-card.is-in, .js-motion .style-tile.is-in, .js-motion .trust-inner > div.is-in, .js-motion .tile-row a.is-in, .js-motion .strip-grid a.is-in, .js-motion .gallery-grid a.is-in, .js-motion .related-grid > *.is-in, .js-motion .rev-platform.is-in{opacity:1;translate:0 0;scale:1;}

.js-motion .contact-info.is-in, .js-motion .timeline li.is-in{opacity:1;translate:0 0;}

.js-motion .contact-form.is-in, .js-motion .style-panel.is-in{opacity:1;translate:0 0;}

.js-motion .cta-banner.is-in, .js-motion .about-card.is-in{opacity:1;scale:1;}

.js-motion .feature-media.is-in, .js-motion .about-media.is-in{clip-path:inset(0 0 0 0 round 14px);}

/* image reveal: fade + settle, only once the file has loaded (or failed, so alt text shows) */
.js-motion .pkg-media img, .js-motion .dest-card img, .js-motion .style-tile img, .js-motion .strip-grid a img, .js-motion .gallery-grid a img, .js-motion .tile-row a img, .js-motion .about-media img, .js-motion .feature-media img, .js-motion .hero-media-grid a img{opacity:0;scale:1.1;transition:opacity 900ms var(--ease-natural),scale 1300ms var(--ease-natural),transform .6s var(--ease-natural);}
.js-motion .pkg-media img.is-loaded, .js-motion .dest-card img.is-loaded, .js-motion .style-tile img.is-loaded, .js-motion .strip-grid a img.is-loaded, .js-motion .gallery-grid a img.is-loaded, .js-motion .tile-row a img.is-loaded, .js-motion .about-media img.is-loaded, .js-motion .feature-media img.is-loaded, .js-motion .hero-media-grid a img.is-loaded{opacity:1;scale:1;}
.js-motion .feature-media,.js-motion .about-media,.js-motion .pkg-media,.js-motion .dest-card,.js-motion .style-tile,.js-motion .strip-grid a,.js-motion .gallery-grid a,.js-motion .tile-row a{background:var(--tint);}
.pkg-media{overflow:hidden;} .pkg-card:hover .pkg-media img{transform:scale(1.05);} .pkg-media img{transition:transform .7s var(--ease-natural);}
.style-tile{overflow:hidden;} .style-tile img{transition:transform .7s var(--ease-natural);} .style-tile:hover img{transform:scale(1.05);}
.strip-grid a:hover img,.tile-row a:hover img{transform:scale(1.06);} .tile-row img{transition:transform .7s var(--ease-natural);}

/* hero: staggered load sequence (pure CSS, ends visible even if JS never runs) */
header{animation:headerIn 700ms var(--ease-natural) backwards;}
.hero-copy > *, .page-hero .container > *{animation:riseIn 900ms var(--ease-natural) both;animation-delay:calc(var(--i,0) * 110ms + 250ms);}
.hero-copy > :nth-child(1),.page-hero .container > :nth-child(1){--i:0} .hero-copy > :nth-child(2),.page-hero .container > :nth-child(2){--i:1}
.hero-copy > :nth-child(3),.page-hero .container > :nth-child(3){--i:2} .hero-copy > :nth-child(4),.page-hero .container > :nth-child(4){--i:3}
.hero-copy > :nth-child(5),.page-hero .container > :nth-child(5){--i:4} .hero-copy > :nth-child(6),.page-hero .container > :nth-child(6){--i:5}
.hero-copy > h1,.page-hero .container > h1{animation:none;}
.js-motion [data-split]:not(.is-split){visibility:hidden;}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em 0 .2em;margin:-.08em 0 -.2em;}
.wi{display:inline-block;translate:0 112%;animation:wordUp 900ms var(--ease-natural) forwards;animation-delay:calc(200ms + var(--i,0) * 75ms);}
.hero-media-grid a{animation:fadeIn 1100ms ease both;}

/* parallax (JS writes --py; desktop + fine pointers only) */
.js-motion .hero-media-grid img.is-loaded{transform:translate3d(0,var(--py,0px),0) scale(1.12);}
.js-motion .cta-banner,.js-motion .page-hero{background-position:center calc(50% + var(--py,0px)) !important;}

/* header + navigation */
header.is-scrolled{box-shadow:0 8px 26px rgba(0,0,0,.38);}
nav.primary-nav a{position:relative;}
nav.primary-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold-light);scale:0 1;transform-origin:left;transition:scale .35s var(--ease-natural);}
nav.primary-nav a:hover::after{scale:1 1;} nav.primary-nav a:hover{background:transparent;color:var(--gold-light);}
nav.primary-nav a.active::after,nav.primary-nav a.active:hover::after{display:none;} nav.primary-nav a.active:hover{background:var(--gold-light);color:var(--black);}
.mobile-nav.open{animation:menuIn 320ms var(--ease-natural) both;}
.mobile-nav.open > *{animation:riseIn 480ms var(--ease-natural) both;}
.mobile-nav.open > :nth-child(1){animation-delay:60ms} .mobile-nav.open > :nth-child(2){animation-delay:110ms} .mobile-nav.open > :nth-child(3){animation-delay:160ms}
.mobile-nav.open > :nth-child(4){animation-delay:210ms} .mobile-nav.open > :nth-child(5){animation-delay:260ms} .mobile-nav.open > :nth-child(6){animation-delay:310ms}
.mobile-nav.open > :nth-child(7){animation-delay:360ms} .mobile-nav.open > :nth-child(8){animation-delay:410ms}
.hamburger span{transition:translate .3s var(--ease-natural),rotate .3s var(--ease-natural),opacity .2s;}
.hamburger[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg;} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;} .hamburger[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg;}

/* buttons + links */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease-natural),box-shadow .25s ease;}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none;}
.btn-primary::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);translate:-120% 0;z-index:-1;}
.btn-primary:hover::after{animation:shine 800ms ease;}
.pkg-foot a,.side-links a,footer ul a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease-natural),color .25s;padding-bottom:2px;}
.pkg-foot a:hover,.side-links a:hover,footer ul a:hover{background-size:100% 1.5px;text-decoration:none;}
.dest-overlay h3,.dest-overlay p{transition:translate .45s var(--ease-natural);} .dest-card:hover .dest-overlay h3,.dest-card:hover .dest-overlay p{translate:0 -4px;}
.pkg-card:hover{border-color:var(--gold);}

/* section accents */
.section-head h2::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin:14px auto 0;transform-origin:center;}
.js-motion .section-head h2::after{scale:0 1;transition:scale 900ms var(--ease-natural) 350ms;}
.js-motion .section-head h2.is-in::after{scale:1 1;}

/* pre-reveal slide offsets must never widen the page */
.js-motion body{overflow-x:clip;}

/* forms */
.form-grid > div{transition:color .2s;} .form-grid > div:focus-within label{color:var(--gold-dark);}
input,select,textarea{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(202,160,59,.18);background:#fff;}
.form-success.show{animation:riseIn 600ms var(--ease-natural) both;}
.form-error:not(:empty){animation:riseIn 300ms var(--ease-natural) both;}

/* touch devices: no hover-dependent motion */
@media (hover:none){
  .pkg-card:hover,.style-tile:hover{transform:none;}
  .pkg-card:hover .pkg-media img,.style-tile:hover img,.dest-card:hover img,.strip-grid a:hover img,.gallery-grid a:hover img,.tile-row a:hover img{transform:none;}
}
@media (max-width:1100px){
  .js-motion .hero-media-grid img.is-loaded{transform:none;}
  .js-motion .cta-banner,.js-motion .page-hero{background-position:center !important;}
  .js-motion :is(.contact-info,.timeline li,.contact-form,.style-panel){translate:0 30px;}
  .js-motion :is(.contact-info,.timeline li,.contact-form,.style-panel).is-in{translate:0 0;}
}

/* reduced motion: keep everything visible and still */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
  .wi{translate:0 0;}
}