/* Litoral materials: local cotton paper, palm shadows, shore contours and light.
   Texture stays visible without WebGL or JavaScript. Content occupies layer 2. */
main > section,
.motion-chapter {
  position: relative;
  isolation: isolate;
}

body::after { display: none; }

/* Carry the approved paper material into the fixed header and tabs. */
body > nav {
  isolation: isolate;
  background-color: #f8f2e6;
  background-image: linear-gradient(90deg, rgba(251, 247, 238, .58), rgba(251, 247, 238, .3)), url('assets/motion/cotton-paper-v1.webp');
  background-size: auto, 620px;
}

.cabin-selector,
.cabin-card,
.cabin-body,
.cabin-more-panel {
  background-color: #f6eedc;
  background-image: linear-gradient(rgba(255, 250, 240, .45), rgba(255, 250, 240, .45)), url('assets/motion/cotton-paper-v1.webp');
  background-size: auto, 470px;
}

.cabin-selector {
  border-color: rgba(117, 95, 57, .2);
}

.cabin-selector-button.active {
  background-color: #173527;
  background-image: linear-gradient(115deg, rgba(23, 53, 39, .89), rgba(33, 75, 55, .88)), url('assets/motion/cotton-paper-v1.webp');
  background-size: auto, 350px;
}

/* A straight edge joins the story and the fishing chapter. */
.fishing-service::before { display: none; }

@media (max-width: 1200px) {
  body > nav .nav-links {
    background-image: linear-gradient(rgba(251, 247, 238, .4), rgba(251, 247, 238, .4)), url('assets/motion/cotton-paper-v1.webp');
    background-size: auto, 440px;
  }
}

.chapter-landscape {
  position: absolute;
  inset: 0;
  /* Blend against this fixed backdrop, never against transient animation layers. */
  z-index: 0;
  isolation: isolate;
  background: inherit;
  overflow: clip;
  pointer-events: none;
}

.landscape-material {
  position: absolute;
  inset: 0;
  background: url('assets/motion/cotton-paper-v1.webp') repeat;
  background-size: 620px 620px;
  opacity: .62;
  mix-blend-mode: multiply;
}

.landscape-relief {
  position: absolute;
  inset: -60px;
  transform: translate3d(0, var(--landscape-shift, 0px), 0);
  transition: transform .25s ease-out;
}

.landscape-canopy {
  position: absolute;
  top: -80px;
  right: -110px;
  width: min(68vw, 790px);
  aspect-ratio: 1;
  opacity: .21;
  transform: rotate(var(--canopy-angle, 0deg));
  transition: transform 1.5s ease, opacity 1.5s ease;
}

.landscape-canopy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/motion/palm-shadow-v1.webp') center / contain no-repeat;
  filter: blur(1px);
}

.landscape-relief::after {
  content: '';
  position: absolute;
  inset: -6%;
  background: var(--landscape-light, none);
}

.hero {
  background: #faf5e9;
  --landscape-light: radial-gradient(ellipse at 4% 15%, rgba(188, 207, 174, .32), transparent 46%);
}
.hero .landscape-canopy { right: auto; left: -200px; top: -120px; --canopy-angle: 78deg; opacity: .18; }

.cabins {
  background: #f3e9d5;
  --landscape-light: radial-gradient(ellipse at 86% 18%, rgba(255, 250, 218, .62), transparent 48%);
}
.cabins .landscape-canopy { --canopy-angle: -18deg; opacity: .25; }
.cabins[data-motion-cabin="cactus-ii"] .landscape-canopy { --canopy-angle: 8deg; opacity: .32; }
.cabins .landscape-relief::before {
  content: '';
  position: absolute;
  inset: 40% -20% -25% 45%;
  background: repeating-radial-gradient(ellipse at 100% 110%, transparent 0 53px, rgba(154, 126, 77, .11) 54px 55px, transparent 56px 101px);
}

.day-story {
  background: #f8f1e4;
  transition: background-color 1.8s ease;
  --landscape-light: radial-gradient(ellipse at 8% 30%, rgba(249, 209, 131, .3), transparent 63%);
}
.day-story .landscape-material { opacity: .43; }
.day-story .landscape-relief { position: sticky; top: 74px; height: calc(100dvh - 74px); }
.day-story .landscape-canopy { right:auto; width:min(75vw,760px); left:calc(72px - min(75vw,760px)); top:-95px; --canopy-angle:-45deg; transform-origin:92% 6%; opacity:.2; }
.day-story[data-motion-scene="garden"] { background-color: #eef0df; }
.day-story[data-motion-scene="water"] { background-color: #e8efe7; --landscape-light: radial-gradient(ellipse at 75% 62%, rgba(144, 195, 191, .28), transparent 58%); }
.day-story[data-motion-scene="sunset"] { background-color: #f4e5d2; --landscape-light: radial-gradient(ellipse at 75% 44%, rgba(236, 155, 91, .31), transparent 62%); }
.day-story[data-motion-scene="evening"] { background-color: #e3e8e1; --landscape-light: radial-gradient(ellipse at 70% 15%, rgba(152, 174, 186, .28), transparent 58%); }

.fishing-service {
  background: radial-gradient(ellipse at 100% 0%, #35655e 0, transparent 55%), radial-gradient(ellipse at 10% 90%, #0c2c39, transparent 70%), #19434b;
  --landscape-light: radial-gradient(ellipse at 80% -10%, rgba(199, 223, 169, .14), transparent 58%);
}
.fishing-service .landscape-material,
.location .landscape-material,
.reviews .landscape-material,
.contact .landscape-material { mix-blend-mode: soft-light; filter: grayscale(1); }
.fishing-service .landscape-material { opacity: .12; background-size: 420px; }
.fishing-service .landscape-canopy { display: none; }
.fishing-service .landscape-relief::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 110% -30%, transparent 0 67px, rgba(203, 228, 207, .065) 68px 70px, transparent 72px 112px);
}
.fishing-service .chapter-atmosphere[data-motion-state="running"] ~ .chapter-landscape .landscape-relief::before,
.fishing-service .chapter-atmosphere[data-motion-state="paused"] ~ .chapter-landscape .landscape-relief::before { opacity: .3; }

.location {
  overflow: clip;
  background: radial-gradient(ellipse at 100% 65%, #315942, transparent 68%), #173527;
  --landscape-light: radial-gradient(ellipse at 80% 90%, rgba(118, 157, 115, .13), transparent 50%);
}
.location .landscape-material { opacity: .19; }
.location .landscape-canopy { opacity: .26; top: auto; bottom: -260px; --canopy-angle: -45deg; }
.location .landscape-relief::before {
  content: '';
  position: absolute;
  inset: -30% -35% -30% 30%;
  background: repeating-radial-gradient(ellipse at 85% 65%, transparent 0 48px, rgba(222, 226, 181, .13) 49px 50px, transparent 51px 83px);
  transform: rotate(-18deg);
  mask-image: linear-gradient(90deg, transparent, #000 44%);
}

.reviews {
  overflow: clip;
  background: radial-gradient(ellipse at 85% 0%, #35533c, transparent 67%), #1b3e2e;
  --landscape-light: linear-gradient(115deg, transparent 25%, rgba(241, 227, 169, .055) 43%, rgba(241, 227, 169, .1) 48%, transparent 68%);
}
.reviews .landscape-material { opacity: .38; background-size: 500px; }
.reviews .landscape-canopy { display: none; }
.reviews .landscape-relief::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(246, 237, 212, .025) 4px 5px), repeating-linear-gradient(90deg, transparent 0 4px, rgba(246, 237, 212, .025) 5px 6px);
}

.instagram {
  background: #ead2c0;
  --landscape-light: radial-gradient(ellipse at 95% 70%, rgba(255, 235, 196, .62), transparent 64%);
}
.instagram .landscape-material { opacity: .72; background-size: 720px; }
.instagram .landscape-canopy { right:auto; width:min(78vw,800px); left:calc(110px - min(78vw,800px)); top:-125px; --canopy-angle:-45deg; transform-origin:92% 6%; opacity:.18; }
.ig-post { box-shadow: 0 22px 38px rgba(84, 61, 42, .17); }

.contact {
  background: radial-gradient(ellipse at 85% 36%, #b77c49 0, #80563f 24%, #314334 52%, transparent 78%), #10271d;
  --landscape-light: radial-gradient(ellipse at 78% 42%, rgba(255, 184, 96, .42), transparent 57%), linear-gradient(175deg, transparent 15%, rgba(213, 126, 85, .12) 42%, transparent 72%);
}
.contact .landscape-material { opacity: .2; background-size: 550px; }
.contact .landscape-canopy { opacity: .4; top: -260px; right: -140px; --canopy-angle: 12deg; }
.contact .landscape-relief::before {
  content: '';
  position: absolute;
  inset: 58% -10% -10%;
  background: repeating-radial-gradient(ellipse at 80% -70%, transparent 0 48px, rgba(237, 170, 97, .065) 49px 51px, transparent 53px 86px);
  mask-image: linear-gradient(transparent, #000);
}

footer {
  background-image: linear-gradient(rgba(23, 53, 39, .88), rgba(23, 53, 39, .88)), url('assets/motion/cotton-paper-v1.webp');
  background-size: 620px;
  background-blend-mode: soft-light;
}

.motion-enabled .landscape-canopy::before {
  animation: palm-breeze 10s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: 92% 6%;
}
.motion-enabled .landscape-relief::after {
  animation: landscape-daylight 16s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.motion-enabled[data-motion-visible="true"] .landscape-canopy::before,
.motion-enabled[data-motion-visible="true"] .landscape-relief::after { animation-play-state: running; }
.motion-enabled .cabin-card:not([hidden]),
.motion-enabled .reviews-panel.active {
  animation: landscape-scene-enter .7s cubic-bezier(.16, 1, .3, 1) both;
  animation-play-state: paused;
}
.motion-enabled[data-motion-visible="true"] .cabin-card:not([hidden]),
.motion-enabled[data-motion-visible="true"] .reviews-panel.active { animation-play-state: running; }

@keyframes palm-breeze {
  from { transform: rotate(-3deg) translate(-5px, -7px); }
  to { transform: rotate(4deg) translate(12px, 6px); }
}
@keyframes landscape-daylight {
  from { transform: translate(-3%, -2%) scale(1); }
  to { transform: translate(3%, 2%) scale(1.06); }
}

/* The two reactions sections keep their light fixed throughout each burst. */
.motion-enabled.reviews .landscape-relief::after,
.motion-enabled.instagram .landscape-relief::after { animation: none; }
@keyframes landscape-scene-enter {
  from { opacity: .3; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .landscape-material { background-size: 440px; }
  .landscape-canopy { width: 560px; right: -230px; opacity: .19; }
  .hero .landscape-canopy { left: -250px; top: -140px; }
  .cabins .landscape-canopy { top: -150px; opacity: .22; }
  .day-story .landscape-canopy { width:560px; left:-500px; top:-80px; }
  .instagram .landscape-canopy { width:560px; left:-465px; top:-100px; }
  .location .landscape-relief::before { left: 3%; opacity: .65; }
  .contact { background:radial-gradient(ellipse at 100% 74%, #b77c49, #80563f 25%, #314334 51%, transparent 78%), #10271d; }
}

@media (prefers-reduced-motion: reduce) {
  .landscape-relief { transform: none; transition: none; }
  .landscape-canopy { transition: none; }
  .motion-enabled .landscape-canopy::before,
  .motion-enabled .landscape-relief::after,
  .motion-enabled .cabin-card:not([hidden]),
  .motion-enabled .reviews-panel.active { animation: none; }
  .day-story { transition: none; }
}

main > section > .container,
.motion-chapter > .container {
  position: relative;
  z-index: 2;
}

.chapter-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}

.chapter-atmosphere canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Occasional details use native motion, even when WebGL is unavailable. */
.chapter-moments { position:absolute; inset:0; z-index:1; isolation:isolate; overflow:hidden; pointer-events:none; }
.chapter-wildlife { position:absolute; inset:0; z-index:1; isolation:isolate; overflow:hidden; pointer-events:none; }
.chapter-animal { position:absolute; left:0; top:0; pointer-events:none; will-change:transform; }
.animal-facing { width:100%; height:100%; transform:translate(-50%,-50%) scaleX(var(--animal-direction,1)); }
.chapter-animal-dorado { width:210px; height:105px; opacity:.82; }
.animal-fish { display:block; width:100%; height:100%; object-fit:contain; animation:animal-swim .8s ease-in-out infinite alternate paused; }
.chapter-animal-birds { width:130px; height:64px; color:#d6e3cc; opacity:.58; }
.animal-bird { position:absolute; width:38px; height:24px; left:calc(78px - var(--bird-index) * 38px); top:14px; overflow:visible; }
.animal-bird:nth-child(2) { top:28px; }
.animal-bird:nth-child(3) { top:2px; }
.animal-wing { transform-box:view-box; transform-origin:50% 76%; animation:animal-wingbeat .92s ease-in-out infinite alternate paused; }
.animal-bird:nth-child(2) .animal-wing { animation-delay:-.24s; }
.animal-bird:nth-child(3) .animal-wing { animation-delay:-.43s; }
.chapter-animal-toucan { width:88px; height:62px; opacity:.8; }
.animal-toucan { display:block; width:100%; height:100%; overflow:visible; }
.animal-toucan .animal-wing { transform-origin:46% 57%; animation-duration:.6s; animation-name:animal-toucan-wingbeat; }
.motion-enabled[data-motion-visible="true"] .animal-wing,
.motion-enabled[data-motion-visible="true"] .animal-fish { animation-play-state:running; }
@keyframes animal-wingbeat {
  from { transform:scaleY(.38); }
  to { transform:scaleY(1.05); }
}
@keyframes animal-toucan-wingbeat {
  from { transform:rotate(-24deg) scaleY(.68); }
  to { transform:rotate(24deg) scaleY(1.05); }
}
@keyframes animal-swim {
  from { transform:rotate(-1.5deg) scaleX(.98); }
  to { transform:rotate(1.5deg) scaleX(1); }
}
@media (max-width:767px) {
  .chapter-animal-dorado { width:120px; height:60px; }
  .chapter-animal-birds { width:116px; height:56px; }
  .animal-bird { width:30px; height:20px; }
  .chapter-animal-toucan { width:70px; height:49px; }
}
.chapter-moment-group { position:absolute; inset:0; }
.chapter-moment { position:absolute; left:var(--moment-x); top:var(--moment-y); display:block; font-family:'DM Sans',sans-serif; font-size:var(--moment-size); line-height:1; opacity:0; will-change:transform,opacity; animation-duration:var(--moment-duration); animation-delay:var(--moment-delay,0s); animation-iteration-count:1; animation-fill-mode:both; animation-play-state:paused; }
.chapter-moment-star { color:#f2c373; animation-name:chapter-star-rise; animation-timing-function:ease-out; }
.chapter-star-shape { display:block; animation:chapter-star-pop var(--moment-duration) var(--moment-delay,0s) both paused; }
.chapter-star-fragment { position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%; background:#ffe0a3; animation:chapter-star-burst var(--moment-duration) var(--moment-delay,0s) both paused; }
.chapter-moment-heart { color:#b84930; font-weight:500; animation-name:chapter-like-rise; animation-timing-function:ease-out; }
.motion-enabled[data-motion-visible="true"] .chapter-moment,
.motion-enabled[data-motion-visible="true"] .chapter-star-shape,
.motion-enabled[data-motion-visible="true"] .chapter-star-fragment { animation-play-state:running; }
@keyframes chapter-star-rise {
  0% { opacity:0; transform:translate3d(-50%,12px,0); }
  15% { opacity:.78; }
  72% { opacity:.9; }
  92% { opacity:.65; }
  100% { opacity:0; transform:translate3d(calc(-50% + var(--moment-drift)),-85px,0); }
}
@keyframes chapter-star-pop {
  0% { transform:scale(.4) rotate(-15deg); }
  20% { transform:scale(1) rotate(0deg); }
  68% { transform:scale(1) rotate(12deg); opacity:1; }
  76% { transform:scale(1.35) rotate(16deg); opacity:1; }
  86%,100% { transform:scale(0) rotate(25deg); opacity:0; }
}
@keyframes chapter-star-burst {
  0%,74% { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  78% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.2); }
}
@keyframes chapter-like-rise {
  0% { opacity:0; transform:translate3d(-50%,var(--moment-start,20px),0) scale(.55) rotate(-9deg); }
  22% { opacity:.7; }
  52% { opacity:.58; }
  100% { opacity:0; transform:translate3d(calc(-50% + var(--moment-drift)),calc(0px - var(--moment-rise,100px)),0) scale(1.2) rotate(8deg); }
}

.chapter-atmosphere[data-motion-state="running"] canvas,
.chapter-atmosphere[data-motion-state="paused"] canvas {
  opacity: 1;
}

.day-story {
  --scene-light: rgba(255, 225, 164, .2);
}

.day-story[data-motion-scene="garden"] {
  --scene-light: rgba(211, 236, 184, .11);
}

.day-story[data-motion-scene="water"] {
  --scene-light: rgba(195, 237, 235, .17);
}

.day-story[data-motion-scene="sunset"] {
  --scene-light: rgba(255, 168, 91, .19);
}

.day-story[data-motion-scene="evening"] {
  --scene-light: rgba(160, 194, 210, .08);
}

.story-step[data-story-step="1"],
.story-step[data-story-step="2"],
.story-step[data-story-step="3"] {
  --scene-light: rgba(211, 236, 184, .11);
}

.story-step[data-story-step="4"],
.story-step[data-story-step="5"] {
  --scene-light: rgba(195, 237, 235, .17);
}

.story-step[data-story-step="6"] {
  --scene-light: rgba(255, 168, 91, .19);
}

.story-step[data-story-step="7"] {
  --scene-light: rgba(160, 194, 210, .08);
}

.motion-enabled .story-visual::before,
.motion-enabled .story-mobile-media::before {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 26% 22%, var(--scene-light), transparent 63%);
  animation: story-daylight 14s ease-in-out infinite alternate;
  animation-play-state: paused;
  transition: background 1.5s ease;
}

.motion-enabled[data-motion-visible="true"] .story-visual::before,
.motion-enabled[data-motion-visible="true"] .story-mobile-media::before {
  animation-play-state: running;
}

.motion-enabled .ig-post {
  animation-name: instagram-breeze;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}

.motion-enabled .ig-post-two { animation-delay: -2.4s; }
.motion-enabled .ig-post-three { animation-delay: -4.8s; }
.motion-enabled[data-motion-visible="true"] .ig-post { animation-play-state: running; }

.motion-enabled .reviews-panel.active .stars,
.motion-enabled .google-badge-stars {
  width: fit-content;
  background-image: linear-gradient(110deg, #efb64c 36%, #fff5c1 49%, #efb64c 62%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: review-star-light 2.6s linear infinite;
  animation-play-state: paused;
}

.motion-enabled[data-motion-visible="true"] .reviews-panel.active .stars,
.motion-enabled[data-motion-visible="true"] .google-badge-stars {
  animation-play-state: running;
}

.motion-enabled .review-card:nth-child(2) .stars { animation-delay: -.85s; }
.motion-enabled .review-card:nth-child(3) .stars { animation-delay: -1.7s; }

@keyframes story-daylight {
  from { transform: translate(-2%, -1%) rotate(-3deg); }
  to { transform: translate(3%, 2%) rotate(3deg); }
}

@keyframes instagram-breeze {
  from { translate: -4px -18px; rotate: -1.8deg; }
  to { translate: 4px 18px; rotate: 1.8deg; }
}

@keyframes review-star-light {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (max-width: 767px) {
  .motion-enabled .ig-post { animation-duration: 7s; }
  .instagram-feed { padding-block: 1.8rem 2.1rem; scroll-padding-inline: 1rem; }
  body > nav { background-size: auto, 440px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-atmosphere { display: none; }
  .chapter-moments { display:none; }
  .chapter-wildlife { display:none; }
  .motion-enabled .story-visual::before,
  .motion-enabled .story-mobile-media::before { display: none; }
  .motion-enabled .ig-post { animation: none; }
  .motion-enabled .reviews-panel.active .stars,
  .motion-enabled .google-badge-stars {
    animation: none;
    background: none;
    color: #efb64c;
  }
}