:root{
  --dark:#050505;
  --ink:#0e0f10;
  --white:#fff;
  --pad:clamp(18px,3vw,48px);
  --ease:cubic-bezier(.16,.84,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dark)}
body{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--dark);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

.preloader{
  position:fixed;inset:0;z-index:9999;background:#050505;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:.7s var(--ease);transition-property:opacity,visibility
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-mark{
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:clamp(72px,14vw,210px);
  font-weight:500;letter-spacing:-.065em;line-height:.78
}
.preloader-line{width:min(340px,70vw);height:1px;background:#ffffff20;overflow:hidden}
.preloader-line i{display:block;height:100%;width:0;background:#fff}
.preloader small{
  width:min(340px,70vw);display:flex;justify-content:space-between;
  font-size:8px;letter-spacing:.18em;color:#ffffff7a
}
.preloader small b{font-weight:400}

.floating-header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  height:72px;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;
}
.brand{
  color:#fff!important;
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:25px;font-weight:500;letter-spacing:-.045em;
  line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.24);
}
.header-actions{display:flex;gap:8px;align-items:center}
.lang-btn{
  border:0;background:rgba(255,255,255,.10);color:#fff;
  height:31px;padding:0 9px;border-radius:999px;
  cursor:pointer;font-size:8px;letter-spacing:.12em;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.whatsapp-btn{
  display:flex;align-items:center;gap:8px;
  min-height:31px;padding:0 12px;
  border-radius:999px;background:#fff;color:#111;
  font-size:8px;font-weight:700;letter-spacing:.12em;
  box-shadow:0 8px 24px rgba(0,0,0,.12)
}
.whatsapp-btn b{font-size:10px}
.oyster-home{
  width:44px;height:31px;
  display:grid;place-items:center;
  background:#fff;border-radius:48% 52% 46% 54% / 60% 58% 42% 40%;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:.25s var(--ease);transition-property:transform,border-radius
}
.oyster-home:hover{
  transform:scale(1.06) rotate(-2deg);
  border-radius:58% 42% 55% 45% / 52% 62% 38% 48%
}
.oyster-home svg{width:31px;height:21px}
.shell-fill{fill:#fff}
.shell-line{fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;opacity:.75}
.shell-pearl{fill:#111}

.slider-shell{height:100vh;min-height:620px;position:relative;overflow:hidden;background:#111}
.slider{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  pointer-events:none;transition:.9s var(--ease);
  transition-property:opacity,transform,filter,visibility;
  transform:scale(1.035);filter:blur(5px);isolation:isolate
}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;z-index:5}
.slide.exiting-up{opacity:0;visibility:visible;transform:translateY(-6%) scale(1.07);filter:blur(7px);z-index:4}
.slide.exiting-down{opacity:0;visibility:visible;transform:translateY(6%) scale(1.07);filter:blur(7px);z-index:4}

.bg{
  position:absolute;z-index:0;left:-3%;top:-3%;
  width:106%;height:106%;object-fit:cover;will-change:transform
}
.asset{
  position:absolute;z-index:3;will-change:transform;
  user-select:none;pointer-events:none
}
.slide::after{
  content:"";position:absolute;z-index:2;inset:0;
  pointer-events:none
}

/* 01 — car in the pink cloud */
.slide-1::after{
  background:
    linear-gradient(90deg,rgba(37,29,37,.10),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05))
}
.carcloud{
  width:min(60vw,900px);
  left:58%;top:48%;
  transform:translate(-50%,-50%)
}

/* 02 — hikers / Mars / Jupiter */
.slide-2::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.03) 58%,rgba(0,0,0,.10)),
    radial-gradient(circle at 75% 32%,transparent,rgba(0,0,0,.14) 53%,rgba(0,0,0,.26))
}
.mars-land{
  left:-5%;bottom:-1%;
  width:110%;height:auto
}
.mars-people{
  width:min(24vw,370px);
  left:48%;bottom:7%
}
.jupiter{
  width:min(30vw,450px);
  right:7%;top:8%
}

/* 03 — astronaut / clouds / birds */
.slide-3::after{
  background:
    linear-gradient(90deg,rgba(17,45,55,.18),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05))
}
.astronaut{
  width:min(30vw,450px);
  right:15%;top:15%
}
.birds{
  width:min(32vw,480px);
  right:18%;bottom:20%;
  opacity:.84;
  filter:brightness(0)
}

/* 04 — woman in green field / cloud / 3 UFOs */
.slide-4::after{
  background:
    linear-gradient(90deg,rgba(8,18,12,.42),rgba(8,18,12,.04) 52%,rgba(8,18,12,.08)),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.10))
}
.manfield{
  width:112%;left:-6%;bottom:-2%;
  z-index:4
}
.mid-cloud{
  width:min(78vw,1120px);
  left:14%;top:27%;
  opacity:.60;
  z-index:2
}
.ufo{filter:drop-shadow(0 9px 14px rgba(0,0,0,.16))}
.ufo-a{width:min(21vw,310px);right:12%;top:10%}
.ufo-b{width:min(14vw,215px);right:34%;top:19%;opacity:.86}
.ufo-c{width:min(10vw,160px);right:52%;top:11%;opacity:.74}

.slide-copy{
  position:absolute;z-index:10;
  max-width:min(720px,72vw);
  left:var(--pad);top:50%;
  transform:translateY(-50%);
  color:#fff;
  text-transform:none;
  will-change:transform;
  text-shadow:0 3px 22px rgba(0,0,0,.22)
}
.copy-1{top:50%;left:7%;color:#fff}
.copy-2{left:7%;top:53%}
.copy-3{left:7%;top:51%}
.copy-4{left:7%;top:51%}

.overline{
  display:block;
  text-transform:uppercase;
  font-size:7px;letter-spacing:.22em;
  margin-bottom:14px;opacity:.68;font-weight:700
}
.slide-copy h1,.slide-copy h2{
  margin:0;
  font-size:clamp(62px,7.8vw,140px);
  line-height:.79;letter-spacing:-.075em;
  font-weight:700;
  max-width:8.8ch
}
.slide-copy h1 span,.slide-copy h2 span,
.slide-copy h1 em,.slide-copy h2 em{
  display:block;font-style:normal
}
.slide-copy h1 em,.slide-copy h2 em{font-weight:300}
.slide-copy p{
  margin:27px 0 0;
  max-width:445px;
  font-size:13px;line-height:1.5;
  opacity:.82
}
.more{
  display:inline-flex;
  margin-top:24px;
  min-height:38px;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(0,0,0,.08)
}

.slide-index{
  position:absolute;z-index:40;
  right:var(--pad);bottom:30px;
  display:flex;align-items:center;gap:10px;
  font-size:8px;letter-spacing:.16em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.2)
}
.slide-index i{
  display:block;width:34px;height:1px;
  background:currentColor;opacity:.4
}
.scroll-message{
  position:absolute;z-index:40;
  left:50%;bottom:25px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  font-size:7px;letter-spacing:.17em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.2)
}
.mouse-icon{
  width:18px;height:28px;
  border:1px solid currentColor;border-radius:12px;
  position:relative;opacity:.62
}
.mouse-icon i{
  position:absolute;width:2px;height:5px;background:currentColor;border-radius:2px;
  left:50%;top:5px;transform:translateX(-50%);
  animation:wheel 1.5s infinite
}
@keyframes wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,8px)}
}

.footer-panel{
  min-height:58vh;
  background:#050505;color:#f0ece7;
  padding:110px var(--pad) 27px;
  display:flex;flex-direction:column;justify-content:space-between
}
.footer-inner{
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:14px
}
.footer-brand{
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:clamp(64px,9vw,140px);
  line-height:.8;letter-spacing:-.06em
}
.footer-inner>p{
  margin:4px 0 0;
  font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#ffffff70
}
.footer-actions{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:20px
}
.footer-actions a{
  display:inline-flex;min-height:42px;align-items:center;
  padding:0 15px;border:1px solid #ffffff32;border-radius:999px;
  font-size:8px;letter-spacing:.12em;color:#ffffffc4
}
.footer-bottom{
  display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:.12em;
  color:#ffffff73;padding-top:70px
}
.footer-bottom span:first-child{
  color:#fff;
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:15px;letter-spacing:-.02em
}

@media(max-width:760px){
  .floating-header{height:60px}
  .brand{font-size:22px}
  .lang-btn{height:29px}
  .whatsapp-btn{height:29px;min-height:29px;padding:0 10px}
  .whatsapp-btn span{display:none}
  .oyster-home{width:39px;height:29px}
  .oyster-home svg{width:27px}

  .slider-shell{height:100svh}
  .slide-copy{
    max-width:none;
    left:20px!important;right:20px;
    top:60%!important
  }
  .slide-copy h1,.slide-copy h2{
    font-size:clamp(50px,14.7vw,78px);
    max-width:7.8ch
  }
  .slide-copy p{
    font-size:12px;max-width:29ch;margin-top:19px
  }

  .carcloud{
    width:118vw;
    left:55%;top:29%
  }

  .mars-land{
    width:180%;
    left:-40%;bottom:0
  }
  .mars-people{
    width:45vw;
    left:43%;bottom:21%
  }
  .jupiter{
    width:60vw;
    right:-11%;top:10%
  }

  .astronaut{
    width:63vw;
    right:0;top:10%
  }
  .birds{
    width:58vw;
    right:3%;bottom:32%
  }

  .manfield{
    width:210%;
    left:-72%;bottom:0
  }
  .mid-cloud{
    width:145vw;
    left:-22%;top:24%
  }
  .ufo-a{width:42vw;right:-5%;top:10%}
  .ufo-b{width:30vw;right:36%;top:18%}
  .ufo-c{width:22vw;right:67%;top:11%}

  .slide-index{right:15px;bottom:18px}
  .scroll-message{bottom:17px}

  .footer-panel{min-height:70vh;padding-top:92px}
  .footer-bottom{gap:20px}
  .footer-bottom span:last-child{text-align:right}
}

@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .asset,.bg,.slide-copy{transform:none!important}
  .mouse-icon i{animation:none}
}




/* =========================================================
   SCROLL-DRIVEN CINEMATIC TRANSITION
   Native page scroll -> one sticky viewport -> scenes blend/move.
   ========================================================= */

html{
  scroll-behavior:smooth;
  background:#050505;
}
body{
  overflow-y:auto;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}

/* The user scrolls through one long section, but visually remains
   inside a single full-screen stage until the fourth scene is done. */
.slider-shell{
  position:relative!important;
  height:470svh!important;
  min-height:0!important;
  overflow:visible!important;
  background:#111;
}
.slider{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  height:100svh!important;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
}

.slide{
  position:absolute!important;
  inset:0!important;
  width:100%;
  height:100%;
  min-height:0!important;
  margin:0!important;
  opacity:0;
  visibility:visible!important;
  pointer-events:none!important;
  transform:translate3d(0,8vh,0) scale(1.035);
  filter:blur(8px);
  transition:none!important;
  will-change:opacity,transform,filter;
}
.slide.active{
  pointer-events:auto!important;
}
.slide.exiting-up,
.slide.exiting-down{
  visibility:visible!important;
}

.scene-wash{
  position:absolute;
  z-index:20;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 52% 52%,rgba(255,255,255,.16),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.10));
  mix-blend-mode:soft-light;
  will-change:opacity;
}

/* Keep controls attached to the viewport during the full experience. */
.slide-index,
.scroll-message{
  position:absolute!important;
}

/* Actual oyster icon */
.oyster-home{
  width:46px;
  height:32px;
  border-radius:999px!important;
  background:#fff;
  display:grid;
  place-items:center;
  padding:0;
}
.oyster-home svg{width:34px;height:23px;overflow:visible}
.oyster-top{
  fill:#fafafa;
  stroke:#111;
  stroke-width:1.55;
  stroke-linejoin:round;
}
.oyster-bottom{
  fill:#e9e9e9;
  stroke:#111;
  stroke-width:1.55;
  stroke-linejoin:round;
}
.oyster-ridge{
  fill:none;
  stroke:#111;
  stroke-width:1.25;
  stroke-linecap:round;
  opacity:.78;
}
.oyster-pearl{fill:#111}

/* Birds: two readable flocks BESIDE the astronaut, around foot-height. */
.birds{
  bottom:auto!important;
  filter:brightness(0)!important;
  opacity:.90!important;
}
.birds-left{
  width:min(22vw,330px)!important;
  left:auto!important;
  right:42%!important;
  top:60%!important;
}
.birds-right{
  width:min(18vw,275px)!important;
  left:auto!important;
  right:3%!important;
  top:57%!important;
}

/* Footer comes naturally after the sticky experience. */
.footer-panel{
  position:relative;
  z-index:30;
}

.scroll-message{
  transition:opacity .28s ease;
}
.scroll-message.is-hidden{
  opacity:0;
  pointer-events:none;
}

@media(max-width:760px){
  .slider-shell{
    height:500svh!important;
  }
  .slider{
    height:100svh!important;
    min-height:100svh!important;
  }
  .slide{
    height:100svh!important;
  }

  .oyster-home{
    width:41px;
    height:29px;
  }
  .oyster-home svg{
    width:30px;
    height:21px;
  }

  /* Astronaut occupies the right side on mobile.
     Put one flock left of the feet and the other at the far right. */
  .birds-left{
    width:31vw!important;
    right:auto!important;
    left:4%!important;
    top:55%!important;
  }
  .birds-right{
    width:27vw!important;
    right:-1%!important;
    left:auto!important;
    top:57%!important;
  }

  .slide-index{
    right:15px!important;
    bottom:18px!important;
  }
  .scroll-message{
    bottom:17px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .slider-shell{
    height:400svh!important;
  }
  .slide{
    filter:none!important;
  }
}