/* ==========================================================================
   LA PLAGE · beach luxury design system
   Tokens first, then base, components, sections, and the scroll animation system.
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --white: #FFFFFF;
  --foam: #FBF8F2;          /* warm off-white for quiet surfaces */
  --sand-light: #F6EEDF;
  --sand: #C7A272;
  --sand-ink: #8A6A40;      /* sand darkened for small text on white (AA) */
  --sea: #2B7BB6;
  --sea-deep: #0B2C47;
  --ink: #0B2C47;           /* text colour: deep sea, never black */
  --ink-soft: #4F6475;      /* muted deep sea for secondary text (AA on white) */
  --line: rgba(11, 44, 71, .12);
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);

  /* ---- Type families ---- */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --display: "Cormorant Garamond", "Lora", Georgia, serif;   /* big, light, high-contrast statements */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-mega: clamp(52px, 8.6vw, 148px);    /* panel titles */
  --fs-display: clamp(34px, 4.6vw, 76px);  /* hero slogan */
  --fs-h2: clamp(34px, 5vw, 80px);         /* section headlines */
  --fs-lead: clamp(24px, 3.1vw, 44px);     /* story */
  --fs-h3: 19px;                           /* product names */
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 11px;

  /* ---- Tracking & leading ---- */
  --track-display: -.025em;
  --track-label: .26em;
  --track-wordmark: .3em;
  --lh-display: 1.02;
  --lh-body: 1.65;

  /* ---- Space ---- */
  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(110px, 18vh, 210px);
  --bar-h: 34px;
  --nav-h: 72px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-ui: 240ms;
  --dur-reveal: 1100ms;
  --dur-words: 1000ms;
  --dur-clip: 1400ms;

  /* Brand mark (interim: derived from the provided PNG; swap for the palm-only SVG layer) */
  --mark-url: url("assets/brand/mark.png");

}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.has-smooth { scroll-behavior: auto; }   /* main.js glides the page itself */
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
::selection { background: var(--sand-light); color: var(--sea-deep); }

.wrap { padding-inline: var(--gutter); }
.section[id], .hero[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; background: var(--sea-deep); color: var(--white);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ==========================================================================
   Typography
   Lora carries the voice: roman for the statement, italic for the feeling.
   Inter stays small, light and widely tracked for labels and UI.
   ========================================================================== */
.display-2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-top: 18px;
  text-wrap: balance;
}
.display-2 em, .hero__title em, .story__text em, .panel__title em, .footer__tag em {
  font-style: italic; font-weight: 400;
  color: var(--sea);
}
.label {
  font-family: var(--sans);
  font-size: var(--fs-label); font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Numbered section labels: "01 ── The drop" */
.label--index { display: inline-flex; align-items: center; gap: 14px; }
.label--index span {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--sand-ink);
  display: inline-flex; align-items: center; gap: 14px;
}
.label--index span::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.label--center { justify-content: center; }

/* ==========================================================================
   Links & buttons
   ========================================================================== */
.ui-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
}

/* Thin underline that draws in on hover */
.link { position: relative; display: inline-block; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .7s var(--ease-out);
}
.link:hover::after, .link:focus-visible::after,
a:hover > .link::after, a:focus-visible > .link::after { transform: scaleX(1); transform-origin: left center; }

/* Always underlined; on hover the line retracts and redraws */
.link--underlined {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px;
}
.link--underlined::after { transform: scaleX(1); transform-origin: left center; bottom: 0; }
.link--underlined:hover::after, .link--underlined:focus-visible::after,
a:hover > .link--underlined::after, a:focus-visible > .link--underlined::after {
  animation: redraw 1s var(--ease-out);
}
@keyframes redraw {
  0%   { transform: scaleX(1); transform-origin: right center; }
  45%  { transform: scaleX(0); transform-origin: right center; }
  46%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

.btn-outline {
  appearance: none; background: transparent; cursor: pointer; color: var(--sea-deep);
  border: 1px solid var(--sea-deep); border-radius: 0;
  padding: 15px 28px;
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft);
}
.btn-outline:hover { background: var(--sea-deep); color: var(--white); }

/* Palm mark, tinted with currentColor via mask */
.palm {
  background-color: currentColor;
  -webkit-mask: var(--mark-url) center / contain no-repeat;
          mask: var(--mark-url) center / contain no-repeat;
  aspect-ratio: 660 / 603;
}

/* ==========================================================================
   Scroll animation system
   Add data-animate="fade-up | fade | words | clip | line" to any element,
   optional data-delay="ms". Add data-stagger="fade-up" to a parent to reveal
   its children one after another (data-stagger-step="ms").
   Elements reveal once, when they enter the viewport.
   ========================================================================== */
.js [data-animate] { --delay: 0ms; }

.js [data-animate="fade-up"] {
  opacity: 0; transform: translate3d(0, 36px, 0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--delay);
}
.js [data-animate="fade"] {
  opacity: 0;
  transition: opacity 1400ms var(--ease-soft);
  transition-delay: var(--delay);
}
.js [data-animate="fade-up"].is-visible,
.js [data-animate="fade"].is-visible { opacity: 1; transform: none; }

/* Words rise one by one from behind a mask (hidden until split, so there is no flash) */
.js [data-animate="words"]:not([data-anim-prepared]) { opacity: 0; }
.js [data-animate="words"] .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0;   /* room for italic overhang and descenders */
}
.js [data-animate="words"] .w__i {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: left bottom;
  opacity: 0;
  transition:
    transform var(--dur-words) var(--ease-out),
    opacity calc(var(--dur-words) * .6) var(--ease-soft);
  transition-delay: calc(var(--delay) + var(--wi, 0) * 70ms);
}
.js [data-animate="words"].is-visible .w__i { transform: none; opacity: 1; }

/* Images: a curtain lifts while the photo settles */
.js [data-animate="clip"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-clip) var(--ease-expo);
  transition-delay: var(--delay);
}
.js [data-animate="clip"] img { scale: 1.14; transition: scale calc(var(--dur-clip) + 400ms) var(--ease-out); transition-delay: var(--delay); }
.js [data-animate="clip"].is-visible { clip-path: inset(0 0 0 0); }
.js [data-animate="clip"].is-visible img { scale: 1; }

/* Hairlines draw from the left */
.js [data-animate="line"] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1600ms var(--ease-expo);
  transition-delay: var(--delay);
}
.js [data-animate="line"].is-visible { transform: none; }

/* ==========================================================================
   Welcome wave (canvas drawn by intro.js)
   Covers the page from first paint so nothing flashes, then washes away.
   ========================================================================== */
.intro { display: none; }
.js .intro {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, #34B4B8 0%, #2AA9B2 35%, #1A97A6 70%, #148AA0 100%);   /* matches the first frame of the canvas */
  pointer-events: none;
  transition: opacity 350ms var(--ease-soft);
  animation: intro-failsafe 1ms linear 10s forwards;   /* never trap the page */
}
.js .intro.is-drawing { background: transparent; }
.js .intro.is-leaving { opacity: 0; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: opacity; }
.intro__brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  will-change: opacity, transform;
  animation: brand-in 900ms cubic-bezier(.16, 1, .3, 1) both;
  color: var(--white);
  font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); letter-spacing: var(--track-wordmark);
  margin-right: -.3em;
  text-shadow: 0 1px 18px rgba(10, 78, 106, .45);
}
.intro__brand img { width: clamp(46px, 5vw, 70px); filter: brightness(0) invert(1); opacity: .95; }
html.intro-on { overflow: hidden; }
@keyframes brand-in { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; } }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce {
  position: relative; z-index: 31;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--sea-deep); color: var(--sand);
  font-size: 10.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  text-align: center; padding-inline: 16px;
}
.announce span { margin-inline: .6em; }

/* ==========================================================================
   Sticky navigation (logo + four scroll links, glass on scroll)
   ========================================================================== */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  transform: translate3d(0, var(--nav-y, var(--bar-h)), 0);
  height: var(--nav-h);
  color: var(--sea-deep);
  border-bottom: 1px solid transparent;
  transition:
    height var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-soft),
    border-color var(--dur-ui) var(--ease-soft),
    -webkit-backdrop-filter var(--dur-ui) var(--ease-soft),
    backdrop-filter var(--dur-ui) var(--ease-soft);
}
.nav.is-glass {
  --nav-h: 60px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
          backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: rgba(11, 44, 71, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-glass { background: rgba(255, 255, 255, .94); }
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gutter);
}
.nav__logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.nav__mark { width: 30px; height: auto; transition: width var(--dur-ui) var(--ease-out); }
.nav.is-glass .nav__mark { width: 26px; }
.nav__wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: 15px; letter-spacing: var(--track-wordmark);
  margin-right: -.3em;
}
.nav__links ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  opacity: .78;
  transition: opacity var(--dur-ui) var(--ease-soft);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: .22em; bottom: 10px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 600ms var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="true"] { opacity: 1; }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current="true"]::after {
  transform: scaleX(1); transform-origin: left center;
}
/* Over the photo, before the glass: a faint light halo keeps text legible */
.nav:not(.is-glass) .nav__links a,
.nav:not(.is-glass) .nav__wordmark { text-shadow: 0 0 8px rgba(255, 255, 255, .8), 0 0 2px rgba(255, 255, 255, .6); }

/* Over the welcome photos the nav reads in white */
@media (min-width: 641px) {
  .nav:not(.is-glass) { color: var(--white); }
  .nav:not(.is-glass) .nav__links a,
  .nav:not(.is-glass) .nav__wordmark { text-shadow: 0 1px 12px rgba(11, 44, 71, .35); }
}

/* Phones: logo on top, the four links underneath, glass from the start */
@media (max-width: 640px) {
  :root { --nav-h: 92px; }
  .nav { --nav-h: 92px; background: rgba(255, 255, 255, .42);
         -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
  .nav.is-glass { --nav-h: 84px; background: var(--glass-strong); }
  .nav__inner { flex-direction: column; justify-content: center; gap: 0; }
  .nav__logo { min-height: 40px; }
  .nav__mark { width: 22px; }
  .nav.is-glass .nav__mark { width: 20px; }
  .nav__wordmark { font-size: 13px; }
  .nav__links ul { gap: 18px; }
  .nav__links a { min-height: 40px; font-size: 10px; letter-spacing: .18em; }
  .nav__links a::after { bottom: 8px; }
}

/* ==========================================================================
   Hero: a live ocean (ocean.js), the LA PLAGE logo in 3D, and the drop behind glass
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(var(--bar-h) * -1);
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(180deg, #2A6FA8 0%, #9CC7DE 46%, #0E4A6B 47%, #04243A 100%);   /* shown until the ocean draws, or if it can't */
}
.hero__ocean { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
/* a soft veil keeps the words legible and the bottom melts into the white page */
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(4, 30, 52, .34), rgba(4, 30, 52, 0) 72%),
    linear-gradient(180deg, rgba(4, 30, 52, .35) 0, rgba(4, 30, 52, 0) 160px),
    linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 22vh), rgba(255, 255, 255, .6) calc(100% - 7vh), #fff 100%);
}

.hero__content {
  position: relative; width: 100%; max-width: 1400px;
  padding-top: calc(var(--nav-h) + clamp(10px, 3vh, 40px)); padding-bottom: clamp(90px, 16vh, 170px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--white); text-shadow: 0 1px 24px rgba(4, 30, 52, .35);
}
.hero__label { color: var(--white) !important; font-weight: 400; margin-top: clamp(6px, 1.5vh, 18px); }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 58px); line-height: 1.04; letter-spacing: var(--track-display);
  margin: 10px 0 clamp(20px, 3.5vh, 40px);
  color: var(--white);
}
.hero__lead { display: inline; }
.hero__lead::after { content: " "; }
/* the slogan: a sunlit gradient drifting through the letters, turning to a new line every few seconds */
@property --sun { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.slogan {
  display: inline-grid; justify-items: start; vertical-align: top;
  padding-bottom: .12em;
  filter: drop-shadow(0 2px 22px rgba(11, 44, 71, .35));
}
.hero__title .slogan__line {
  grid-area: 1 / 1;
  font-style: italic; white-space: nowrap;
  padding: .04em .12em .26em 0; margin-bottom: -.22em;   /* room for the italic overhang and descenders (g, y), which the gradient would otherwise cut off */
  background: linear-gradient(100deg, #FFE7B0 0%, #FFC27A 22%, #FF9A7A 40%, #FFD9A0 55%, #8FF0E4 75%, #FFE7B0 100%);
  background-size: 260% 100%;
  background-position: var(--sun) 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none;
  animation: sun-drift 9s ease-in-out infinite alternate;
  opacity: 0; transform: translate3d(0, 55%, 0) rotate(2deg); filter: blur(8px);
  transform-origin: left bottom;
  transition: opacity 900ms var(--ease-soft), transform 1100ms var(--ease-out), filter 900ms var(--ease-soft);
}
.hero__title .slogan__line.is-on  { opacity: 1; transform: none; filter: blur(0); }
.hero__title .slogan__line.is-off { opacity: 0; transform: translate3d(0, -45%, 0) rotate(-1deg); filter: blur(8px); transition-duration: 700ms, 800ms, 700ms; }
@keyframes sun-drift { from { --sun: 0%; } to { --sun: 100%; } }
.hero__cta { white-space: nowrap; margin-top: clamp(28px, 5vh, 52px); }

/* ---- the logo in 3D ----
   Each part is a stack of thin slices a pixel apart: the front slice carries a pearl or gold finish,
   the slices behind it form the solid edge, so the logo has real depth as it turns. */
.logo3d {
  --w: clamp(120px, min(13vw, 22vh), 230px);
  position: relative; width: calc(var(--w) * 1.5); padding: 10px 0 6px;
  perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.logo3d.is-grabbing { cursor: grabbing; }
.logo3d__stage { animation: logo-float 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes logo-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
.logo3d__obj { position: relative; transform-style: preserve-3d; will-change: transform; --sheen: 50%; --side-light: 1; }
.logo3d__mark { position: relative; width: var(--w); aspect-ratio: 660 / 603; margin: 0 auto; transform-style: preserve-3d; }
.logo3d__slice {
  position: absolute; inset: 0;
  -webkit-mask: var(--mark-url) center / contain no-repeat; mask: var(--mark-url) center / contain no-repeat;
  transform: translateZ(calc(var(--z) * -1.05px + 13px));
}
/* the polished front: a pearly blue chrome with a sheen that slides as it turns */
.logo3d__slice.is-front, .logo3d__slice.is-back {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) calc(var(--sheen) - 18%), rgba(255, 255, 255, .95) var(--sheen), rgba(255, 255, 255, 0) calc(var(--sheen) + 18%)),
    linear-gradient(160deg, #E9F4FC 0%, #9CC8EA 22%, #3F8FCB 48%, #2B6FA6 62%, #8EC0E6 82%, #E2F1FB 100%);
}
/* the solid edge, shaded by how it faces the light */
.logo3d__slice.is-side { background: linear-gradient(180deg, #2E6E9F, #163F60); filter: brightness(var(--side-light)); }

.logo3d__word { position: relative; margin-top: clamp(10px, 1.8vw, 22px); height: 1.2em; font-size: clamp(26px, 3.1vw, 48px); transform-style: preserve-3d; }
.logo3d__text {
  position: absolute; left: 50%; top: 0; white-space: nowrap; text-align: center;
  font-family: var(--serif); font-weight: 500; letter-spacing: .32em; padding-left: .32em; line-height: 1.2;
  transform: translateX(-50%) translateZ(calc(var(--z) * -1px + 7px));
  text-shadow: none;
}
/* the wordmark in polished gold */
.logo3d__text.is-front, .logo3d__text.is-back {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0) calc(var(--sheen) - 15%), rgba(255, 252, 240, .95) var(--sheen), rgba(255, 255, 255, 0) calc(var(--sheen) + 15%)),
    linear-gradient(180deg, #FFF0C8 0%, #E7C17E 34%, #B88A45 58%, #F2D79C 80%, #9C6E31 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo3d__text.is-side { color: #7A5524; filter: brightness(var(--side-light)); }
/* a soft shadow on the water beneath it */
.logo3d__shadow {
  position: absolute; left: 50%; bottom: -14px; width: 60%; height: 22px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 20, 36, .45), rgba(2, 20, 36, 0));
  animation: logo-shadow 7s ease-in-out infinite;
}
@keyframes logo-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.86); opacity: .6; } }

/* ---- the drop behind glass ---- */
.glass-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px);
  width: min(100%, 1040px, 118vh);
}
.glass { text-shadow: none; }
.glass__frame {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; padding: 12%;
  appearance: none; cursor: pointer; color: inherit;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, .55);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .16) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -18px 40px rgba(4, 30, 52, .12), 0 30px 60px -30px rgba(2, 20, 36, .6);
  transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform 500ms var(--ease-out), border-color 400ms var(--ease-soft), background-color 400ms var(--ease-soft);
  overflow: hidden;
}
/* a light reflection that crosses the glass on hover */
.glass__frame::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-60%); transition: transform 900ms var(--ease-out);
}
.glass__frame:hover::after, .glass__frame:focus-visible::after { transform: translateX(60%); }
.glass__frame:hover { border-color: rgba(255, 255, 255, .9); }
.glass__frame img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(2, 20, 36, .35));
  animation: glass-bob 6s ease-in-out calc(var(--k) * -1.1s) infinite;
  transition: scale 500ms var(--ease-out);
}
.glass__frame:hover img { scale: 1.08; }
@keyframes glass-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.glass__name { margin-top: 14px; font-family: var(--serif); font-size: 15px; color: var(--white); text-shadow: 0 1px 14px rgba(4, 30, 52, .5); }
.glass__price { margin-top: 2px; font-size: 11px; letter-spacing: .16em; color: rgba(255, 255, 255, .85); }

@media (max-width: 900px) {
  .glass-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 10px; scrollbar-width: none;
  }
  .glass-row::-webkit-scrollbar { display: none; }
  .glass { scroll-snap-align: center; }
}
@media (max-width: 760px) {
  .hero__content { padding-top: calc(var(--nav-h) + 6vh); }
  .logo3d { --w: 42vw; }
  .hero__lead { display: block; }
  .hero__lead::after { content: none; }
  .glass-row { grid-auto-columns: 58%; }
}

/* Palms grow up into place once the welcome wave has uncovered them */
.js [data-animate="grow"] {
  opacity: 0; transform: translate3d(0, 6%, 0) scale(.94);
  transition: opacity 1400ms var(--ease-soft), transform 1800ms var(--ease-out);
  transition-delay: var(--delay);
}
.js [data-animate="grow"].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   The first drop
   ========================================================================== */
.drop { padding: clamp(70px, 12vh, 140px) 0 0; position: relative; }
.drop__head {
  max-width: 1360px; margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(44px, 7vh, 80px);
}
.drop__controls { display: flex; align-items: center; gap: 16px; color: var(--ink-soft); }
.drop__controls .ui-btn { font-size: 11px; }
.drop__controls .ui-btn:disabled { opacity: .35; cursor: default; }
.drop__divider { width: 28px; height: 1px; background: var(--line); }

.strip__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip__viewport::-webkit-scrollbar { display: none; }
.strip__track {
  display: flex; gap: clamp(14px, 2vw, 32px);
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}
.strip__item { width: clamp(250px, 27vw, 430px); flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); }

/* Desktop drag mode (enabled by JS on fine pointers) */
.strip.is-draggable .strip__viewport { overflow: hidden; scroll-snap-type: none; cursor: none; touch-action: pan-y; }
.strip__viewport { padding-block: 64px 12px; margin-block: -64px -12px; }   /* room for the pop */
.strip.is-draggable .strip__track { user-select: none; -webkit-user-select: none; }
.strip.is-dragging a { pointer-events: none; }
.strip img { -webkit-user-drag: none; user-select: none; }

.card { display: block; transition: opacity 500ms var(--ease-soft), filter 500ms var(--ease-soft), scale 600ms var(--ease-out); }
.card__media {
  position: relative; background: var(--white);
  aspect-ratio: 4 / 5;
  perspective: 1000px;
}
.card__lift {
  position: absolute; inset: 0;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1);
  transition: transform 750ms cubic-bezier(.2, 1.3, .35, 1);
  will-change: transform;
}
.card__lift img { width: 100%; height: 100%; object-fit: cover; }
/* Second view (e.g. the back of a tee) fades in on hover */
.card__lift .card__hover { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease-soft); }
/* Soft ground shadow that spreads as the garment lifts */
.card__shadow {
  position: absolute; left: 22%; right: 22%; bottom: 13%; height: 6%;
  background: radial-gradient(closest-side, rgba(11, 44, 71, .22), rgba(11, 44, 71, 0));
  opacity: 0; transform: scale(.7);
  transition: opacity 600ms var(--ease-soft), transform 750ms var(--ease-out);
}
.card__quick {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px;
  opacity: 0; translate: 0 8px;
  transition: opacity 400ms var(--ease-soft), translate 500ms var(--ease-out);
}
.card__sizes { display: flex; gap: 6px; }
.card__sizes span {
  min-width: 28px; padding: 4px 6px; text-align: center;
  border: 1px solid var(--line);
  font-size: 10px; letter-spacing: .1em; color: var(--ink-soft);
}
.card__view {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--sea);
}
.card__view::after { content: " \2192"; font-style: normal; }

@media (hover: hover) and (pointer: fine) {
  /* The hovered piece pops out, tilting toward the cursor; everything else steps back */
  .card:hover .card__lift {
    transform: translate3d(0, -7%, 40px) rotate(-2.5deg) scale(1.13);
  }
  .card:hover .card__shadow { opacity: 1; transform: scale(1.05); }
  .card:hover .card__hover { opacity: 1; }
  .card:hover .card__quick { opacity: 1; translate: 0 0; }
  .strip__track:has(.card:hover) .card:not(:hover) { opacity: .28; filter: saturate(.4) blur(1.5px); scale: .96; }
  .strip.is-dragging .card { opacity: 1 !important; filter: none !important; scale: 1 !important; }
}
.card:focus-visible .card__hover { opacity: 1; }
.card:focus-visible .card__quick { opacity: 1; translate: 0 0; }

.card__meta {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  padding-top: 18px; border-top: 1px solid var(--line); margin-top: 4px;
}
.card__name { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.3; }
.card__name em { font-style: italic; }
.card__price { font-size: var(--fs-small); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .02em; padding-top: 3px; }
.card__color {
  grid-column: 1 / -1;
  font-size: 10.5px; font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--sand-ink);
}
.card__dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: -1px; }
.card__dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 44, 71, .18); }

.strip__progress { margin-top: clamp(36px, 5vh, 56px); }
.strip__progress::before { content: ""; display: block; height: 1px; background: var(--line); }
.strip__progress span {
  display: block; height: 1px; margin-top: -1px; background: var(--sea-deep);
  width: 18%; transform-origin: left; will-change: transform;
}

.drag-cursor {
  position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%;
  border: 1px solid rgba(11, 44, 71, .45);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: .02em;
  opacity: 0; transform: translate3d(-200px, -200px, 0) scale(.6);
  transition: opacity .35s var(--ease-soft);
}
.drag-cursor span { transition: transform .45s var(--ease-out); }
.drag-cursor.is-visible { opacity: 1; }
.drag-cursor.is-pressed span { transform: scale(.86); }

@media (max-width: 640px) {
  .drop__controls { display: none; }
  .strip__item { width: 76vw; }
}

/* The drop as three rows, one for each line (Lagon, Riva, Marée), each on its own stretch of sand.
   The pieces float over the sand like the Sand collection; the hover pop stays exactly as above. */
.strip--gallery .strip__viewport { overflow: visible; padding: 0; margin: 0; }
.strip--gallery .rows { display: grid; gap: 0; width: auto; padding: 0; transform: none !important; will-change: auto; }
.row {
  position: relative;
  display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start;
  padding: clamp(48px, 7vh, 76px) max(var(--gutter), calc((100% - 1360px) / 2));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px, linear-gradient(180deg, #F8EEDB 0%, #F2E1C2 100%);
}
.row:nth-child(even) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px, linear-gradient(180deg, #F3E3C6 0%, #EBD4AC 100%); }
/* a wet ripple line where one stretch of sand meets the next */
.row + .row::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 180 6, 360 6, 540 20 S 900 36, 1080 18 S 1320 8, 1440 20' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='2'/%3E%3Cpath d='M0 30 C 200 16, 380 16, 560 28 S 920 40, 1100 26 S 1330 18, 1440 28' fill='none' stroke='%23B9965F' stroke-opacity='.25' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100%; pointer-events: none; }
.row__head { color: var(--sea-deep); padding-top: clamp(0px, 4vh, 48px); }
.row__index { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--sand-ink); }
.row__name { font-family: var(--display); font-weight: 300; font-size: clamp(52px, 5.4vw, 92px); line-height: .95; letter-spacing: -.01em; margin-top: 6px; }
.row__kind { margin-top: 12px; font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sand-ink); }
.row__note { margin-top: 18px; max-width: 30ch; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.row__where { margin-top: 18px; font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(11, 44, 71, .45); }
.row__items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 16vw, 240px), 1fr));
  gap: clamp(28px, 4vh, 48px) clamp(18px, 2.2vw, 36px);
  counter-reset: piece;
}
.strip--gallery .strip__item { width: auto; counter-increment: piece; }
.strip--gallery .strip__item::before {
  content: "N\B0  " counter(piece, decimal-leading-zero);
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sand-ink);
}
/* each piece floats a little above the sand, gently bobbing, at its own slight tilt, with its shadow on the sand */
.row .card__media { background: transparent; aspect-ratio: 1 / 1; animation: sand-float 6.5s ease-in-out calc(var(--k, 0) * -1.6s) infinite; }
@keyframes sand-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.row .card__lift img { object-fit: contain; padding: 6%; rotate: var(--r, 0deg); filter: drop-shadow(0 16px 16px rgba(110, 80, 40, .22)); }
.row .card__shadow { opacity: .6; transform: scale(.82); bottom: 6%; background: radial-gradient(closest-side, rgba(110, 80, 40, .3), rgba(110, 80, 40, 0)); }
.row .card__meta { border-top-color: rgba(138, 106, 64, .25); }
/* Front / Back switch for pieces printed on both sides */
.card__sides { display: flex; gap: 6px; margin-top: 12px; }
.card__side {
  appearance: none; cursor: pointer; padding: 6px 12px; border: 1px solid rgba(138, 106, 64, .35); border-radius: 999px; background: rgba(255, 250, 240, .6);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand-ink);
  transition: background-color 250ms var(--ease-soft), color 250ms var(--ease-soft), border-color 250ms var(--ease-soft);
}
.card__side:hover { border-color: var(--sea-deep); }
.card__side[aria-pressed="true"] { background: var(--sea-deep); border-color: var(--sea-deep); color: var(--sand-light); }
.card__lift img { transition: opacity 180ms var(--ease-soft), transform 360ms var(--ease-out); }
.card__lift img.is-turning { opacity: 0; transform: rotateY(70deg); }
.card__detail {
  margin-top: 10px; max-width: 34ch;
  font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__detail span {
  font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--sand-ink); margin-right: 8px;
}
/* a short note on where the pieces come from, beside the title */
.drop__note { max-width: 36ch; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.drop__note span { display: block; margin-bottom: 8px; font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sand-ink); }

@media (max-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__note { max-width: 40ch; }
}
@media (max-width: 600px) {
  .row__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .strip--gallery .card__name { font-size: 16px; }
  .strip--gallery .card__meta { grid-template-columns: 1fr; }
  .card__detail { font-size: 12.5px; }
}

/* ==========================================================================
   Interlude: the tide rolls in
   When it comes into view, four layers of water (foam, aqua, sea, deep sea) rush up the screen
   one after another, each with a rolling crest, and the words rise out of the deep. It plays
   again each time you come back down to it.
   ========================================================================== */
/* The section is taller than the screen and its stage stays pinned while you scroll through it,
   so the wave and the words always play out in full view instead of sliding past. */
.tide { position: relative; height: 190vh; background: #fff; }
.tide__stage {
  position: sticky; top: 0; overflow: hidden; isolation: isolate;
  --fade-bottom: 1;
  height: 100vh; height: 100svh;
  display: grid; place-items: center; text-align: center;
}
.tide__sea { position: absolute; inset: 0; z-index: -1; }
.tide__wave {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V40 C 90 8, 180 8, 270 34 S 450 72, 540 44 S 660 10, 720 40 V80 Z'/%3E%3C/svg%3E");
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: var(--c);
  transform: translate3d(0, 112%, 0);
  transition: transform 1050ms cubic-bezier(.16, .84, .24, 1) var(--d);
}
/* the rolling crest riding on top of each layer */
.tide__wave::before {
  content: ""; position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: clamp(46px, 7vw, 110px);
  background: var(--c);
  -webkit-mask: var(--wave) 0 0 / 50% 100% repeat-x; mask: var(--wave) 0 0 / 50% 100% repeat-x;
  animation: tide-roll var(--roll) linear infinite;
}
@keyframes tide-roll { to { transform: translate3d(-50%, 0, 0); } }
.tide__wave--foam { --c: #F2FBFB; --d: 0ms;   --roll: 2.6s; }
.tide__wave--aqua { --c: #8ED8DA; --d: 110ms; --roll: 3.4s; }
.tide__wave--sea  { --c: var(--sea); --d: 220ms; --roll: 4.2s; }
.tide__wave--deep { --c: var(--sea-deep); --d: 340ms; --roll: 5.6s; }
.tide.is-in .tide__wave { transform: translate3d(0, 0, 0); }

/* the bottom of the stage settles back into deep sea, so it meets the collections with no line */
.tide__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(11, 44, 71, 0) 0%, var(--sea-deep) 100%);
}
/* once the deep sea has settled, it stays alive: drifting light, rolling swells, the words breathing */
.tide__life { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ease-soft) 900ms; overflow: hidden; }
.tide.is-in .tide__life { opacity: 1; }
.tide__caustics {
  position: absolute; inset: -30%;
  background:
    radial-gradient(28% 22% at 22% 30%, rgba(142, 216, 218, .16), transparent 70%),
    radial-gradient(34% 26% at 74% 22%, rgba(43, 123, 182, .28), transparent 70%),
    radial-gradient(30% 24% at 60% 72%, rgba(142, 216, 218, .12), transparent 70%),
    radial-gradient(26% 20% at 30% 78%, rgba(255, 226, 176, .08), transparent 70%);
  animation: tide-light 16s ease-in-out infinite alternate;
}
@keyframes tide-light {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.08); }
}
.tide__swell {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V40 C 90 8, 180 8, 270 34 S 450 72, 540 44 S 660 10, 720 40 V80 Z'/%3E%3C/svg%3E");
  position: absolute; left: 0; width: 200%; bottom: var(--b); height: var(--h);
  background: var(--c);
  -webkit-mask: var(--wave) 0 0 / 50% 100% repeat-x; mask: var(--wave) 0 0 / 50% 100% repeat-x;
  animation: tide-roll var(--roll) linear infinite, swell-bob 5s ease-in-out infinite alternate;
}
.tide__swell--1 { --c: rgba(43, 123, 182, .35); --b: -2%; --h: 22%; --roll: 14s; }
.tide__swell--2 { --c: rgba(142, 216, 218, .18); --b: -6%; --h: 18%; --roll: 9s; animation-direction: reverse, alternate; }
.tide__swell--3 { --c: rgba(255, 255, 255, .08); --b: 76%; --h: 30%; --roll: 22s; transform: scaleY(-1); }
@keyframes swell-bob { from { translate: 0 0; } to { translate: 0 -14px; } }
.tide.is-in .tide__phrase { animation: phrase-breathe 6s ease-in-out 2s infinite; }
@keyframes phrase-breathe { 0%, 100% { transform: translate3d(0, 0, 0); letter-spacing: -.02em; } 50% { transform: translate3d(0, -8px, 0); letter-spacing: -.012em; } }
.tide__phrase em.tide__line {
  background: linear-gradient(100deg, #F6EEDF 0%, #FFE2B0 30%, #9EE6E2 50%, #F6EEDF 70%, #F6EEDF 100%);
  background-size: 250% 100%; background-position: var(--sun) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em;
}
.tide.is-in .tide__phrase em.tide__line { animation: sun-drift 7s ease-in-out infinite alternate; }

.tide__words { position: relative; color: var(--white); padding-block: 14vh; }
.tide__kicker, .tide__sub {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 900ms var(--ease-soft), transform 1100ms var(--ease-out);
}
.tide__kicker {
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--sand);
  transition-delay: 420ms;
}
.tide__phrase {
  margin: 26px 0 30px;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(60px, 11vw, 196px); line-height: .92; letter-spacing: -.02em;
}
.tide__line { display: inline-block; opacity: 0; transform: translate3d(0, 40%, 0); filter: blur(10px); transition: opacity 1000ms var(--ease-soft), transform 1300ms var(--ease-out), filter 1000ms var(--ease-soft); }
.tide__phrase span.tide__line { transition-delay: 460ms; }
.tide__phrase em.tide__line { font-style: italic; color: var(--sand-light); transition-delay: 600ms; }
.tide__sub {
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.3vw, 19px); color: rgba(246, 238, 223, .82);
  transition-delay: 820ms;
}
.tide.is-in .tide__kicker, .tide.is-in .tide__sub { opacity: 1; transform: none; }
.tide.is-in .tide__line { opacity: 1; transform: none; filter: blur(0); }
@media (max-width: 760px) {
  .tide__phrase em.tide__line { display: block; }
}

/* ==========================================================================
   Sea / Sand panels
   ========================================================================== */
/* Two collections side by side. On hover the chosen one breathes wider,
   its pieces fan out like swatch cards, and the light in it comes alive. */
.panels { display: flex; position: relative; }
/* the white page mists into the two collections instead of meeting them at a hard edge */
/* the tide's deep sea fades softly down into both collections: above the water light and the sand pattern, behind the pieces */
.panel__fade { position: absolute; left: 0; right: 0; top: 0; height: clamp(200px, 33vh, 340px); z-index: 1; pointer-events: none; background: var(--tide-fade); }
.panels { --tide-fade: linear-gradient(180deg, var(--sea-deep) 0, rgba(11, 44, 71, .8) clamp(40px, 7vh, 80px), rgba(11, 44, 71, .4) clamp(100px, 17vh, 190px), rgba(11, 44, 71, .12) clamp(150px, 25vh, 270px), rgba(11, 44, 71, 0) clamp(200px, 33vh, 340px)); }
.panel {
  --ease-lux: cubic-bezier(.2, .9, .25, 1);
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1 1 0; min-width: 0;
  min-height: clamp(620px, 92vh, 940px);
  display: flex; align-items: flex-end;
  padding: clamp(32px, 5vw, 72px);
}
.panel--sea  { color: var(--sand-light); background: radial-gradient(120% 80% at 50% 0%, #174A72 0%, #0F3656 40%, var(--sea-deep) 85%); }
.panel--sand {
  color: var(--sea-deep);
  /* real beach sand: wind ripples and grains, lit from the upper left, with a soft sunny wash on top */
  background:
    linear-gradient(180deg, rgba(255, 246, 228, .38) 0%, rgba(255, 246, 228, .12) 45%, rgba(170, 120, 60, .10) 100%),
    url("assets/collections/sand.jpg") 0 0 / 512px 512px repeat,
    #E9D3A8;
}
/* living light: drifting caustics on the sea, a warm sun glow and fine grain on the sand */
.panel__light { position: absolute; inset: -10%; z-index: -2; pointer-events: none; transition: opacity 1200ms var(--ease-soft); }
.panel--sea .panel__light {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.011 .02' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .9 0 0 0 0 1 -3.6 0 0 0 .95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 520px 520px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.016 .028' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .9 0 0 0 0 1 -4 0 0 0 .9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 360px 360px;
  mix-blend-mode: screen; opacity: .1;
  animation: caustic-drift 46s linear infinite;
}
@keyframes caustic-drift { to { background-position: 520px 260px, -360px 180px; } }
.panel--sand .panel__light {
  background:
    radial-gradient(40% 32% at var(--gx, 70%) 22%, rgba(255, 214, 160, .55), rgba(255, 214, 160, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  opacity: .8;
  animation: sun-wander 18s ease-in-out infinite alternate;
}
@keyframes sun-wander { from { translate: -4% 0; } to { translate: 4% 2%; } }

/* sheen that follows the cursor */
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), var(--sheen), transparent 60%);
  opacity: 0; transition: opacity 700ms var(--ease-soft);
}
.panel--sea  { --sheen: rgba(120, 190, 235, .16); }
.panel--sand { --sheen: rgba(255, 236, 205, .55); }

.panel__palm {
  position: absolute; z-index: -1;
  width: 70%; left: 15%; top: 30%;
  opacity: .14;
  transition: translate 1800ms var(--ease-lux), scale 1800ms var(--ease-lux), rotate 1800ms var(--ease-lux), opacity 1200ms var(--ease-soft);
}
.panel--sea .panel__palm  { color: var(--sea); }
.panel--sand .panel__palm { color: #8A6236; }   /* one big palm, pressed into the sand like the one under the sea */
.js .panel--sand .panel__palm[data-animate].is-visible { opacity: .2; }
.js .panel__palm[data-animate].is-visible { opacity: .14; }

/* the pieces, each floating in a glass bubble */
/* the whole panel is one link to the drop; the pieces float above it, scattered all over */
.panel__link { position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent; }
.panel__link:focus-visible { outline: 1px solid currentColor; outline-offset: -8px; }
.panel--sea .panel__link:focus-visible  { outline-color: var(--sand-light); }
.panel--sand .panel__link:focus-visible { outline-color: var(--sea-deep); }
.panel__fan {
  position: absolute; inset: clamp(50px, 9vh, 100px) 0 0; z-index: 2;   /* starts below the mist */
  --size: clamp(140px, 12.5vw, 230px);
  pointer-events: none;
}
.bubble {
  position: absolute; left: var(--x); top: var(--y); margin: 0;
  width: var(--size); aspect-ratio: 1;
  translate: -50% -50%;
  transform: scale(calc(var(--s) * .9));
  transition: transform 1300ms var(--ease-lux);
  transition-delay: calc(var(--i) * 70ms);
}
/* each piece wanders slowly around its spot */
.bubble__flow {
  position: absolute; inset: 0;
  animation: flow var(--flow, 22s) ease-in-out var(--flow-delay, 0s) infinite;
}
@keyframes flow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(var(--fx), calc(var(--fy) * -1), 0); }
  50%      { transform: translate3d(calc(var(--fx) * -.5), var(--fy), 0); }
  75%      { transform: translate3d(calc(var(--fx) * -1), calc(var(--fy) * -.4), 0); }
}
.bubble__float {
  position: absolute; inset: 0;
  animation: bubble-bob var(--bob, 6s) ease-in-out var(--bob-delay, 0s) infinite;
}
@keyframes bubble-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%      { transform: translate3d(3px, -9px, 0) rotate(1.5deg); }
  65%      { transform: translate3d(-4px, -4px, 0) rotate(-1.2deg); }
}
.bubble__glass {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .12) 16%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .02) 0, rgba(255, 255, 255, .04) 55%, var(--rim) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    inset -14px -20px 38px var(--deep-tint),
    inset 12px 16px 30px rgba(255, 255, 255, .16),
    0 34px 60px -34px var(--drop);
  -webkit-backdrop-filter: blur(2px) saturate(1.35);
          backdrop-filter: blur(2px) saturate(1.35);
  overflow: hidden;
}
/* a faint rainbow film turning slowly around the rim */
.bubble__glass::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 170, 200, .35), rgba(170, 220, 255, .35), rgba(190, 255, 220, .32), rgba(255, 235, 170, .32), rgba(255, 170, 200, .35));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 71%, transparent 74%);
          mask: radial-gradient(circle, transparent 60%, #000 71%, transparent 74%);
  mix-blend-mode: screen; opacity: .7;
  animation: film-turn 14s linear infinite;
}
@keyframes film-turn { to { rotate: 360deg; } }
/* the bright window reflection */
.bubble__glass::after {
  content: ""; position: absolute; left: 18%; top: 12%; width: 30%; height: 16%;
  border-radius: 50%; rotate: -32deg;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  filter: blur(.5px);
}
.bubble__item {
  rotate: var(--r, 0deg);   /* each piece hangs at its own slight tilt */
  width: 78%; height: 78%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(11, 44, 71, .28));
  animation: item-drift calc(var(--bob, 6s) * 1.3) ease-in-out var(--bob-delay, 0s) infinite;
}
@keyframes item-drift {
  0%, 100% { transform: translate3d(0, 2%, 0) rotate(-2deg); }
  50%      { transform: translate3d(0, -3%, 0) rotate(2deg); }
}
.panel--sea  { --rim: rgba(170, 220, 255, .3);  --deep-tint: rgba(70, 150, 210, .32); --drop: rgba(0, 10, 25, .7); }
.panel--sand { --rim: rgba(199, 162, 114, .32); --deep-tint: rgba(199, 162, 114, .3); --drop: rgba(120, 90, 50, .45); }
.panel--sand .bubble__glass { box-shadow: inset 0 0 0 1px rgba(199, 162, 114, .45), inset -14px -20px 38px var(--deep-tint), inset 12px 16px 30px rgba(255, 255, 255, .5), 0 34px 60px -34px var(--drop); }
.bubble figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px);
  text-align: center; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  opacity: 0; translate: 0 -6px;
  transition: opacity 500ms var(--ease-soft), translate 700ms var(--ease-lux);
}

/* tiny bubbles rising through the sea */
.panel__rise { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.panel__rise span {
  position: absolute; left: var(--x); bottom: -20px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  opacity: 0;
  animation: rise var(--dur) linear var(--delay) infinite;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .7; }
  50%  { transform: translate3d(var(--sway), -55vh, 0); }
  90%  { opacity: .5; }
  100% { transform: translate3d(0, -110vh, 0); opacity: 0; }
}

/* Sea: fine engraved swell lines, layer behind layer */
.panel__waves { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; pointer-events: none; overflow: hidden; }
.wave-layer { position: absolute; left: 0; width: 200%; }
.wave-layer svg { display: block; width: 100%; height: 100%; }
.wave-layer path { fill: none; stroke: rgba(196, 229, 247, .5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wave-layer--0 { bottom: 0;   height: 44%; opacity: .55; animation: wave-roll 22s linear infinite, wave-bob 7s ease-in-out infinite alternate; }
.wave-layer--1 { bottom: 30%; height: 34%; opacity: .32; animation: wave-roll 32s linear infinite reverse, wave-bob 9s ease-in-out -3s infinite alternate; }
.wave-layer--2 { bottom: 56%; height: 26%; opacity: .18; animation: wave-roll 46s linear infinite, wave-bob 11s ease-in-out -6s infinite alternate; }
.wave-layer--0 path { stroke: rgba(225, 243, 252, .65); stroke-width: 1.4; }
@keyframes wave-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wave-bob { from { translate: 0 -5px; } to { translate: 0 6px; } }

/* Sand: dunes, wind ripples and the shoreline */
.panel__beach { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.beach__dune { position: absolute; border-radius: 50% 50% 0 0 / 100% 100% 0 0; filter: blur(28px); }
.beach__dune--a { left: -40%; right: 20%; bottom: 6%; height: 40%; background: linear-gradient(180deg, rgba(255, 248, 232, .7), rgba(255, 248, 232, 0) 80%); }
.beach__dune--b { left: 25%; right: -45%; bottom: 2%; height: 34%; background: linear-gradient(180deg, rgba(205, 168, 118, .4), rgba(205, 168, 118, 0) 80%); }
.beach__ripples {
  position: absolute; left: 0; right: 0; bottom: 8%; height: 58%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40'%3E%3Cpath d='M0 20 Q 30 12 60 20 T 120 20 T 180 20 T 240 20' fill='none' stroke='%23A77E4C' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 240px 22px repeat;
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 85%, transparent);
          mask: linear-gradient(180deg, transparent, #000 40%, #000 85%, transparent);
  transform: perspective(500px) rotateX(48deg); transform-origin: 50% 100%;
}
.panel__shore { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; }
.shore__water {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #8FD6D8 0%, #4FB3C1 45%, #2E93AC 100%);
}
.shore__wet {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 34px;
  background: linear-gradient(0deg, rgba(150, 112, 70, .32), rgba(150, 112, 70, 0));
  transform-origin: 50% 100%;
  animation: shore-wet 7s ease-in-out infinite;
}
.shore__foam {
  position: absolute; left: -2%; width: 104%; bottom: calc(100% - 12px); height: 22px;
  fill: rgba(255, 255, 255, .9);
  filter: drop-shadow(0 -2px 4px rgba(255, 255, 255, .6));
  animation: shore-lap 7s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes shore-lap {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(.85); }
  42%      { transform: translate3d(-14px, -16px, 0) scaleY(1.2); }
  70%      { transform: translate3d(-6px, -6px, 0) scaleY(1); }
}
@keyframes shore-wet { 0%, 100% { transform: scaleY(.6); opacity: .7; } 45% { transform: scaleY(1.3); opacity: 1; } }
.panel--sand { padding-bottom: calc(clamp(32px, 5vw, 72px) + 9vh); }   /* caption sits above the shoreline */

/* Sand pieces: each hides inside a coconut that cracks open when tapped */
.nut {
  position: absolute; inset: 0; padding: 0; border: 0; background: none; color: inherit;
  appearance: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: scale 500ms var(--ease-lux);
}
.nut:hover { scale: 1.05; }
.nut:focus-visible { outline: 1px solid var(--sea-deep); outline-offset: 6px; border-radius: 50%; }
.coconut__shadow {
  position: absolute; left: 20%; right: 20%; bottom: 2%; height: 9%;
  background: radial-gradient(closest-side, rgba(70, 45, 20, .32), rgba(70, 45, 20, 0));
  animation: coconut-shadow var(--bob, 6s) ease-in-out var(--bob-delay, 0s) infinite;
}
@keyframes coconut-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 30% { transform: scale(.82); opacity: .6; } 65% { transform: scale(.9); opacity: .75; } }

/* the whole coconut bobs and, every few seconds, gives a little wiggle */
.nut__shell {
  position: absolute; left: 12%; right: 12%; bottom: 7%; aspect-ratio: 1;
  transform-origin: 50% 90%; z-index: 1;
  animation:
    nut-bob var(--bob, 6s) ease-in-out var(--bob-delay, 0s) infinite,
    nut-wiggle 3.2s ease-in-out calc(var(--i) * .8s + 1s) infinite;
}
/* its two halves, split along a jagged crack */
.nut__half {
  position: absolute; inset: 0;
  filter: drop-shadow(0 14px 14px rgba(70, 45, 20, .3));
  transition: transform 600ms var(--ease-lux), filter 400ms var(--ease-soft);
}
.nut__half img { width: 100%; height: 100%; display: block; object-fit: contain; }
.nut__half--l { transform-origin: 30% 100%; }
.nut__half--r { transform-origin: 70% 100%; }
.nut__half--l img { clip-path: polygon(0 0, 53% 0, 48% 18%, 55% 34%, 47% 52%, 54% 70%, 48% 86%, 52% 100%, 0 100%); }
.nut__half--r img { clip-path: polygon(52% 0, 100% 0, 100% 100%, 51% 100%, 47% 86%, 53% 70%, 46% 52%, 54% 34%, 47% 18%); }
@keyframes nut-bob { 0%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } 65% { translate: 0 -3px; } }
/* every few seconds the coconut gives a little wiggle, inviting a tap */
/* every few seconds the coconut jiggles, as if the piece inside wants out */
@keyframes nut-wiggle { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -6deg; } 78% { rotate: 5deg; } 82% { rotate: -4deg; } 86% { rotate: 2deg; } 90% { rotate: 0deg; } }
/* it already sits a little cracked, and the crack widens with each jiggle */
.bubble--coconut:not(.is-open) .nut__half--l { animation: nut-peek-l 3.2s ease-in-out calc(var(--i) * .8s + 1s) infinite; }
.bubble--coconut:not(.is-open) .nut__half--r { animation: nut-peek-r 3.2s ease-in-out calc(var(--i) * .8s + 1s) infinite; }
@keyframes nut-peek-l { 0%, 66%, 100% { transform: translate3d(-5%, 1%, 0) rotate(-5deg); } 78% { transform: translate3d(-9%, 2%, 0) rotate(-9deg); } }
@keyframes nut-peek-r { 0%, 66%, 100% { transform: translate3d(5%, 1%, 0) rotate(5deg); } 78% { transform: translate3d(9%, 2%, 0) rotate(9deg); } }
@keyframes nut-shake { 0%, 100% { rotate: 0deg; } 20% { rotate: -7deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 3deg; } }

/* once it is open, a half coconut with its white flesh sits where it stood */
.nut__inside {
  position: absolute; left: 10%; right: 10%; bottom: -2%; aspect-ratio: 327 / 311;
  background: url("assets/collections/coconut-half.webp") center / contain no-repeat;
  filter: drop-shadow(0 12px 12px rgba(70, 45, 20, .3));
  opacity: 0; scale: .4;
  transition: opacity 300ms var(--ease-soft), scale 500ms var(--ease-lux);
}

/* the piece waiting inside: a corner of it peeks out of the crack and over the rim */
.nut__piece {
  position: absolute; left: 6%; right: 6%; top: -12%; bottom: 22%; z-index: 0;
  display: grid; place-items: center;
  opacity: 1; transform: translate3d(0, 16%, 0) scale(.66) rotate(-6deg);
  transition: opacity 300ms var(--ease-soft), transform 500ms var(--ease-lux);
}
.bubble--coconut:not(.is-open) .nut__piece { animation: nut-peek-piece 3.2s ease-in-out calc(var(--i) * .8s + 1s) infinite; }
@keyframes nut-peek-piece { 0%, 66%, 100% { translate: 0 0; } 78% { translate: 0 -7%; } }

/* Sand pieces float free in the warm air, no glass */
.bubble--free .bubble__float { display: grid; place-items: center; }
.bubble--free .bubble__item { width: 92%; height: 92%; filter: drop-shadow(0 22px 20px rgba(90, 60, 30, .3)); }
.bubble--coconut .bubble__item { width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(90, 60, 30, .3)); }

/* a few drops of coconut water */
.splash {
  position: absolute; left: 50%; top: 46%; width: 7px; height: 9px; margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(240, 248, 250, .7));
  box-shadow: 0 0 0 1px rgba(199, 162, 114, .25);
  --sx: calc((var(--k) - 1.5) * 30px);
  opacity: 0;
}
@keyframes splash {
  0%   { transform: translate3d(0, 0, 0) scale(.4); opacity: 1; }
  55%  { transform: translate3d(var(--sx), calc(-46px - var(--k) * 6px), 0) scale(1); opacity: 1; }
  100% { transform: translate3d(calc(var(--sx) * 1.5), 14px, 0) scale(.7); opacity: 0; }
}

/* a little mound of sand each coconut sits in */
.nut__mound {
  position: absolute; left: 4%; right: 4%; bottom: -2%; height: 26%; border-radius: 50%; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px,
    radial-gradient(closest-side, #E9D2A6 0%, #E3C793 55%, rgba(227, 199, 147, 0) 100%);
}
@keyframes hint-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
.bubble.is-open .nut__piece { cursor: zoom-in; }

/* Sea bubbles pop: the glass swells and bursts into droplets, and the piece is set free */
.bubble[data-pop] .bubble__item { position: absolute; left: 11%; top: 11%; width: 78%; height: 78%; transition: translate 700ms var(--ease-out), scale 700ms var(--ease-out); }
.bubble[data-pop] .bubble__glass { -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1), opacity 200ms ease-in 120ms; }
.bubble.is-popped .bubble__glass { transform: scale(1.22); opacity: 0; }
.bubble.is-popped .bubble__item { translate: 0 4%; scale: 1.1; filter: drop-shadow(0 18px 18px rgba(0, 10, 25, .45)); }
.bubble:not(.is-popped) .bubble__glass { transition: transform 1400ms var(--ease-out), opacity 1400ms var(--ease-soft); }   /* forms again slowly */
.pop-drop {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(200, 235, 255, .6));
  opacity: 0; pointer-events: none;
}
.bubble.is-popped .pop-drop { animation: pop-drop 620ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pop-drop {
  0%   { opacity: 1; transform: rotate(var(--a)) translate3d(0, -38%, 0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translate3d(0, calc(var(--l) * -2.2), 0) scale(.4); }
}
.bubble.is-popped { cursor: zoom-in; }

/* the free pieces and sea bubbles can be tapped to see them */
.bubble[data-view] { pointer-events: auto; cursor: pointer; }
.bubble[data-view]:focus { outline: none; }
.bubble[data-view]:focus-visible .bubble__float { outline: 1px solid currentColor; outline-offset: 6px; border-radius: 50%; }
.bubble[data-view]:hover .bubble__float { scale: 1.06; }
.bubble__float { transition: scale 500ms var(--ease-out); }

/* cracked open */
.bubble.is-open { z-index: 2; }
.is-open .nut__shell { animation: nut-shake 380ms ease-in-out; }
.is-open .nut__half { transition: transform 900ms cubic-bezier(.3, 1.45, .55, 1) 380ms, filter 500ms var(--ease-soft) 380ms; }
.is-open .nut__half--l { transform: translate3d(-42%, 12%, 0) rotate(-32deg); filter: drop-shadow(3px 0 0 #FBF6EC) drop-shadow(0 14px 14px rgba(70, 45, 20, .3)); }
.is-open .nut__half--r { transform: translate3d(42%, 12%, 0) rotate(32deg); filter: drop-shadow(-3px 0 0 #FBF6EC) drop-shadow(0 14px 14px rgba(70, 45, 20, .3)); }
.is-open .nut__inside { opacity: 1; scale: 1; transition: opacity 400ms var(--ease-soft) 380ms, scale 700ms var(--ease-lux) 380ms; }
.is-open .nut__piece {
  z-index: 2; opacity: 1; transform: translate3d(0, -22%, 0) scale(.9);
  transition: opacity 400ms var(--ease-soft) 460ms, transform 1000ms cubic-bezier(.3, 1.5, .5, 1) 440ms;
}
.is-open .splash { animation: splash 900ms cubic-bezier(.2, .7, .4, 1) 400ms both; }
.bubble.is-open figcaption { opacity: .85; translate: 0 0; transition-delay: 700ms; }
.bubble--coconut figcaption { top: calc(100% + 4px); }

/* caption */
.panel__caption { position: relative; z-index: 1; pointer-events: none; max-width: 380px; transition: translate 1100ms var(--ease-lux); }
.panel--sea .label, .panel--sea .label--index span { color: var(--sand); }
.panel--sand .label { color: var(--sand-ink); }
.panel__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(60px, 7.6vw, 128px); line-height: 1; letter-spacing: .2em;
  text-transform: uppercase; white-space: nowrap;   /* SAND and SEA stay on one line */
  margin: 16px -.2em 12px 0;
}
.panel__title em { font-style: normal; }
.panel__title .w { padding-top: .18em; margin-top: -.18em; }   /* room for letters lifting */
.ltr {
  display: inline-block;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 320% 100%;
}
/* Sea: pearl-white letters rolling like a swell, a cool light passing through them */
.panel--sea .ltr {
  background-image: linear-gradient(100deg, #F6EEDF 0%, #FFFFFF 30%, #9FD3EA 46%, #FFFFFF 58%, #F6EEDF 100%);
  animation: letter-swell 4.4s ease-in-out calc(var(--k) * .22s) infinite, letter-light 7s linear calc(var(--k) * .3s) infinite;
}
@keyframes letter-swell {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35%      { transform: translate3d(0, -.09em, 0) rotate(-2deg); }
  70%      { transform: translate3d(0, .03em, 0) rotate(1deg); }
}
/* Sand: golden letters with a slow sunlit shimmer, settling gently */
.panel--sand .ltr {
  background-image: linear-gradient(100deg, #4F3518 0%, #7A5527 26%, #B8894C 44%, #F2D7A2 50%, #B8894C 56%, #7A5527 74%, #4F3518 100%);
  filter: drop-shadow(0 2px 10px rgba(255, 244, 222, .55));   /* lifts the title off the sand */
  animation: letter-settle 6s ease-in-out calc(var(--k) * .35s) infinite, letter-light 8s linear calc(var(--k) * .28s) infinite;
}
@keyframes letter-settle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -.04em, 0); }
}
@keyframes letter-light { from { background-position: 100% 0; } to { background-position: -220% 0; } }
.panel__count { font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; opacity: .7; margin-bottom: 16px; }
.panel__text { font-size: var(--fs-body); font-weight: 300; line-height: 1.6; margin-bottom: 28px; opacity: .9; }
.panel__cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}
.panel__cta::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; opacity: .45;
  transform-origin: left; transform: scaleX(.42);
  transition: transform 900ms var(--ease-lux), opacity 600ms var(--ease-soft);
}
.panel__arrow { position: relative; width: 22px; height: 1px; background: currentColor; transition: width 900ms var(--ease-lux); }
.panel__arrow::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: 45deg;
}


@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .panel:hover::after { opacity: 1; }
  .panel--sea:hover .panel__light  { opacity: .2; }
  .panel--sand:hover .panel__light { opacity: .85; }
  .panel:hover .panel__palm { translate: 0 -3%; scale: 1.06; rotate: -2deg; opacity: .2; }
  .panel:hover .panel__caption { translate: 0 -10px; }
  .panel:hover .panel__cta::after { transform: scaleX(1); opacity: 1; }
  .panel:hover .panel__arrow { width: 40px; }
}
/* fanned out: on hover with a mouse, always on touch screens */
@media (hover: hover) and (pointer: fine) {
  .panel:hover .bubble, .panel:focus-within .bubble {
    transform: translate3d(calc(var(--dx) * 28px), calc(var(--dy) * 20px), 0) scale(var(--s));
  }
  .panel:hover .bubble figcaption { opacity: .85; translate: 0 0; transition-delay: calc(350ms + var(--i) * 60ms); }
}
@media (hover: none), (pointer: coarse) {
  .bubble { transform: scale(var(--s)); }
  .panel__cta::after { transform: scaleX(1); }
}

@media (max-width: 760px) {
  .panels { flex-direction: column; }
  .panel { min-height: 86svh; }
  .panel__fan { --size: 27vw; }
  .bubble { left: var(--mx, var(--x)); top: var(--my, var(--y)); transform: scale(var(--ms, var(--s))); }
}

/* drop filter chips */
.drop__filter { display: flex; gap: 8px; margin-left: auto; }
.chip {
  appearance: none; cursor: pointer; background: transparent; color: var(--sea-deep);
  min-height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color 300ms var(--ease-soft), color 300ms var(--ease-soft), border-color 300ms var(--ease-soft);
}
.chip:hover { border-color: var(--sea-deep); }
.chip[aria-pressed="true"] { background: var(--sea-deep); color: var(--white); border-color: var(--sea-deep); }
@media (max-width: 640px) { .drop__filter { margin-left: 0; } }

/* ==========================================================================
   Story
   ========================================================================== */
/* a soft sand-coloured swell rises over the collections, and the story fades into the white below */
.story { position: relative; background: linear-gradient(180deg, var(--sand-light) 0%, var(--sand-light) 70%, #fff 100%); }
.story::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(40px, 6vw, 90px); pointer-events: none;
  background: var(--sand-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 V52 C 240 10, 480 10, 720 46 S 1200 84, 1440 30 V90 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 V52 C 240 10, 480 10, 720 46 S 1200 84, 1440 30 V90 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.story__inner {
  max-width: 1000px; margin: 0 auto; text-align: center;
  padding-block: clamp(120px, 22vh, 240px) clamp(40px, 7vh, 80px);
  display: flex; flex-direction: column; align-items: center;
}
.story__mark { width: 44px; height: auto; margin-bottom: 28px; }
.story__text {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.012em;
  max-width: 24ch; margin: 30px 0 48px;
  text-wrap: balance;
}

/* Why LA PLAGE: what the brand is for, under the story line */
.why {
  max-width: 1200px; margin: 0 auto; padding-bottom: clamp(100px, 16vh, 180px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start;
  text-align: left; color: var(--sea-deep);
}
.why__title {
  margin: 18px 0 26px;
  font-family: var(--display); font-weight: 300; font-size: clamp(38px, 4.2vw, 68px); line-height: 1.02; letter-spacing: -.01em;
}
.why__title em { font-style: italic; color: var(--sand-ink); }
.why__lead { max-width: 46ch; font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.why__lead + .why__lead { margin-top: 16px; }
.why__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.why__point {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: 8px; align-content: start;
  padding: 26px 0; border-top: 1px solid rgba(138, 106, 64, .25);
}
.why__name, .why__text { grid-column: 2; margin: 0; }
.why__point:last-child { border-bottom: 1px solid rgba(138, 106, 64, .25); }
.why__num { grid-column: 1; grid-row: 1; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--sand-ink); padding-top: 4px; }
.why__name { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.why__text { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 860px) {
  .why { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Lookbook
   ========================================================================== */
.lookbook { padding: var(--section-y) 0 clamp(120px, 20vh, 220px); }
.lookbook__head { margin-bottom: clamp(52px, 9vh, 104px); }
.lookbook__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 40px); align-items: start;
}
.look--low { margin-top: clamp(60px, 12vw, 180px); }
.look:nth-child(3) { margin-top: clamp(24px, 5vw, 72px); }
.look__frame { overflow: hidden; aspect-ratio: 9 / 14; background: var(--sand-light); }
.look__frame img {
  width: 100%; height: 118%; object-fit: cover;
  margin-top: -9%;
  will-change: transform;
}
.look figcaption {
  display: flex; align-items: baseline; gap: 14px; padding-top: 16px;
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft);
}
.look figcaption span {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase; font-size: 10.5px; color: var(--sea-deep);
}

@media (max-width: 760px) {
  .lookbook__grid { grid-template-columns: 1fr 1fr; }
  .look:first-child { grid-column: 1 / -1; width: 78%; }
  .look--low { margin-top: 0; }
  .look:nth-child(3) { margin-top: 64px; }
}

/* ==========================================================================
   Private access
   ========================================================================== */
.access { background: linear-gradient(180deg, #fff 0%, var(--foam) 30%); }
.access__inner {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding-block: clamp(120px, 20vh, 210px);
  display: flex; flex-direction: column; align-items: center;
}
.access__text { color: var(--ink-soft); font-weight: 300; margin: 22px 0 48px; }
.access__form { display: flex; gap: 20px; align-items: flex-end; width: 100%; max-width: 560px; }
.access__input {
  flex: 1; min-width: 0;
  appearance: none; border: 0; border-bottom: 1px solid var(--sea-deep); border-radius: 0;
  background: transparent; padding: 14px 0;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--sea-deep);
  transition: border-color .4s var(--ease-soft);
}
.access__input::placeholder { color: #7A8B98; }
.access__input:focus { outline: none; border-bottom-color: var(--sea); }
.access__input:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--sea); }
.access__input[aria-invalid="true"] { border-bottom-color: #A23B2A; }
.access__form { flex-wrap: wrap; }
.access__input { flex: 1 1 260px; }
.access__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.access__consent { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.access__consent a, .footer__legal a { text-transform: none; letter-spacing: 0; font-size: inherit; }

.access__consent input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--sea-deep); }
.access__status { min-height: 1.6em; margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.access__status.is-error { color: #A23B2A; }

@media (max-width: 520px) {
  .access__form { flex-direction: column; align-items: stretch; }
  .access__input { flex: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* the footer arrives as a deep-sea swell */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(40px, 6vw, 90px); pointer-events: none;
  background: var(--sea-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 V40 C 300 84, 560 84, 820 44 S 1260 6, 1440 50 V90 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 V40 C 300 84, 560 84, 820 44 S 1260 6, 1440 50 V90 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.footer { background: var(--sea-deep); color: var(--sand); font-size: 13px; font-weight: 300; }
.footer__inner {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px;
  padding-block: clamp(72px, 12vh, 120px) 64px;
}
.footer__mark { width: 52px; color: var(--sand); margin-bottom: 26px; }
.footer__wordmark { font-family: var(--serif); letter-spacing: var(--track-wordmark); font-size: 16px; }
.footer__tag { margin-top: 10px; font-family: var(--serif); font-size: 22px; color: var(--sand-light); }
.footer__tag em { color: var(--sand); }
.footer__col h3 {
  font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgba(246, 238, 223, .6); margin-bottom: 18px;
}
.footer__col li + li { margin-top: 10px; }
.footer__base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(199, 162, 114, .25);
  padding-block: 24px 28px;
  font-size: 11.5px; letter-spacing: .08em; color: rgba(246, 238, 223, .7);
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__locale { display: flex; align-items: center; gap: 28px; }
.footer__lang { display: flex; align-items: center; gap: 8px; color: var(--sand); }
.footer__lang .ui-btn { font-size: 11px; opacity: .55; transition: opacity .3s; }
.footer__lang .ui-btn[aria-pressed="true"] { opacity: 1; }
.footer__currency { font-size: 11px; letter-spacing: .16em; color: var(--sand); }

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Product spotlight
   ========================================================================== */
html.spot-on { overflow: hidden; }
.spotlight {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr) minmax(200px, 1fr);
  align-items: center; gap: clamp(16px, 3vw, 56px);
  padding: 96px clamp(24px, 5vw, 88px) 64px;
  background: var(--white);   /* pure white, like the product photos, so the garment floats with no box */
  color: var(--sea-deep);
  opacity: 0;
  transition: opacity 450ms var(--ease-soft);
}
.spotlight[hidden] { display: none; }
.spotlight.is-open { opacity: 1; }
.spotlight__close { position: absolute; top: 28px; right: clamp(24px, 5vw, 88px); font-size: 11px; letter-spacing: .22em; }

.spotlight__info, .spotlight__buy {
  opacity: 0; translate: 0 16px;
  transition: opacity 600ms var(--ease-out) 150ms, translate 800ms var(--ease-out) 150ms;
}
.spotlight.is-open .spotlight__info, .spotlight.is-open .spotlight__buy { opacity: 1; translate: 0 0; }
.spotlight__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; letter-spacing: .02em;
  margin: 18px 0 18px;
}
.spotlight__desc { max-width: 34ch; font-weight: 300; color: var(--ink-soft); }
.spotlight__facts { margin: 28px 0 0; display: grid; gap: 10px; max-width: 280px; }
.spotlight__facts div { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.spotlight__facts dt { font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.spotlight__facts dd { margin: 0; font-family: var(--serif); font-style: italic; }

/* The garment: pops in, then floats */
.spotlight__stage { position: relative; margin: 0; height: min(72vh, 760px); perspective: 1200px; }
.spotlight__float {
  position: absolute; inset: 0;
}
.spotlight__img {
  position: absolute; inset: 8%;
  filter: drop-shadow(0 30px 34px rgba(2, 20, 36, .3));
  width: 84%; height: 84%; max-width: none; object-fit: contain;
  animation: spot-float 6s ease-in-out infinite;
}
.spotlight.is-switching .spotlight__img { animation: spot-pop 900ms cubic-bezier(.2, 1.3, .35, 1) both, spot-float 6s ease-in-out 900ms infinite; }
@keyframes spot-pop {
  from { opacity: 0; transform: translate3d(var(--enter-x, 0), 40px, 0) scale(.72) rotate(-9deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(-2deg); }
}
@keyframes spot-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(-.8deg); }
}
.spotlight__shadow {
  position: absolute; left: 26%; right: 26%; bottom: 10%; height: 5%;
  background: radial-gradient(closest-side, rgba(11, 44, 71, .2), rgba(11, 44, 71, 0));
  animation: spot-shadow 6s ease-in-out infinite;
}
@keyframes spot-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }

.spotlight__buy { justify-self: end; width: 100%; max-width: 260px; }
.spotlight__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.size, .view-btn {
  appearance: none; background: transparent; cursor: pointer;
  min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line); color: var(--sea-deep);
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  transition: background-color 200ms var(--ease-soft), color 200ms var(--ease-soft), border-color 200ms var(--ease-soft);
}
.size:hover, .view-btn:hover { border-color: var(--sea-deep); }
.size[aria-checked="true"], .view-btn[aria-pressed="true"] { background: var(--sea-deep); color: var(--white); border-color: var(--sea-deep); }
.spotlight__views { display: flex; gap: 8px; margin-bottom: 22px; }
.spotlight__swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.swatch {
  appearance: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px 0 8px;
  border: 1px solid var(--line); color: var(--sea-deep);
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color 200ms var(--ease-soft), box-shadow 200ms var(--ease-soft);
}
.swatch i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 44, 71, .2); }
.swatch:hover { border-color: var(--sea-deep); }
.swatch[aria-checked="true"] { border-color: var(--sea-deep); box-shadow: inset 0 0 0 1px var(--sea-deep); }
.spotlight__views:empty { display: none; }
.spotlight__cta { display: block; text-align: center; }

/* "Pattern & colours": the print from the colour guide, laid over the stage */
.spotlight__guide-btn {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0; margin: -6px 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sea-deep);
}
.spotlight__guide-btn::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(#0A6294 0 25%, #F65FA5 0 50%, #7BD6FB 0 75%, #84744F 0);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 1px var(--line);
}
.spotlight__guide-btn:hover, .spotlight__guide-btn[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; }
.spotlight__guide-btn[hidden] { display: none; }
.spotlight__float, .spotlight__shadow { transition: opacity 400ms var(--ease-soft), transform 600ms var(--ease-out); }
.spotlight.is-guide .spotlight__float, .spotlight.is-guide .spotlight__shadow { opacity: 0; pointer-events: none; }
.spotlight__guide {
  position: absolute; inset: 2% 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(14px, 2vw, 24px);
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow-y: auto; overscroll-behavior: contain;
  animation: sg-in 500ms var(--ease-out) both;
}
.spotlight__guide[hidden] { display: none; }
@keyframes sg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sg__pattern { min-height: 220px; background-size: 340px auto; background-repeat: repeat; background-position: center; border: 1px solid var(--line); }
.sg__info { display: grid; align-content: start; gap: 12px; min-width: 0; }
.sg__h { font-family: var(--serif); font-style: italic; font-size: 17px; margin-top: 4px; }
.sg__bar { display: flex; height: 14px; border: 1px solid var(--line); }
.sg__bar span { flex-basis: 0; }
.sg__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; }
.sg__chips li { display: grid; grid-template-columns: 22px 1fr; column-gap: 9px; align-items: center; font-size: 11px; line-height: 1.35; }
.sg__chips i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 44, 71, .18); }
.sg__chips b { font-weight: 500; }
.sg__chips span { color: var(--sand-ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sg__patch { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 14px; align-items: center; margin-top: 4px; }
.sg__patch img { width: 100%; height: auto; }
.sg__more { justify-self: start; font-size: 12px; margin-top: 4px; }
@media (max-width: 860px) {
  /* on phones the panel takes the stage's place in the page flow and scrolls with it */
  .spotlight.is-guide .spotlight__stage { height: auto; }
  .spotlight__guide { position: relative; inset: auto; grid-template-columns: 1fr; overflow: visible; }
  .sg__pattern { min-height: 140px; background-size: 220px auto; }
}

.spotlight__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 64px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--sea-deep);
  transition: translate 300ms var(--ease-out), opacity 200ms;
  opacity: .7;
}
.spotlight__nav svg { width: 40px; height: 12px; }
.spotlight__nav--prev { left: clamp(4px, 1.5vw, 24px); }
.spotlight__nav--next { right: clamp(4px, 1.5vw, 24px); }
.spotlight__nav:hover { opacity: 1; }
.spotlight__nav--prev:hover { translate: -4px -50%; }
.spotlight__nav--next:hover { translate: 4px -50%; }

@media (max-width: 860px) {
  .spotlight {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;
    align-items: start; gap: 12px;
    padding: 72px 24px 28px; overflow-y: auto;
  }
  .spotlight__stage { height: 44vh; order: -1; }
  .spotlight__title { font-size: 28px; margin: 10px 0 10px; }
  .spotlight__facts { margin-top: 16px; max-width: none; }
  .spotlight__buy { justify-self: stretch; max-width: none; }
  .spotlight__close { top: 20px; right: 24px; }
  .spotlight__nav { top: calc(72px + 22vh); }
}

.spotlight__img.is-loading { opacity: 0 !important; }

/* the piece in 3D (piece3d.js) takes the photo's place; the photo stays underneath as the fallback */
.piece3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; animation: spot-float 6s ease-in-out infinite;
}
.piece3d:active { cursor: grabbing; }
.spotlight.is-switching .piece3d { animation: spot-pop 900ms cubic-bezier(.2, 1.3, .35, 1) both, spot-float 6s ease-in-out 900ms infinite; }
.spotlight.has-3d .spotlight__img { visibility: hidden; }
.spotlight__hint { display: none; }
.spotlight.has-3d .spotlight__hint {
  position: absolute; left: 50%; bottom: 2%; translate: -50% 0; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; pointer-events: none;
  font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft);
  transition: opacity 600ms var(--ease-soft);
}
.spotlight__hint span {
  width: 26px; height: 10px; border: 1px solid currentColor; border-radius: 6px; position: relative;
}
.spotlight__hint span::after {
  content: ""; position: absolute; top: 2px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: hint-drag 1.8s ease-in-out infinite;
}
@keyframes hint-drag { 0%, 100% { translate: 0 0; } 50% { translate: 14px 0; } }
.spotlight__float.is-turned ~ .spotlight__hint, .spotlight.is-guide .spotlight__hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .piece3d { animation: none; } .spotlight__hint span::after { animation: none; } }

/* ==========================================================================
   Floating theme: the live ocean stays behind the whole page, and every
   section floats over it as a glass card, drifting very gently
   ========================================================================== */
body { background: #0B3A5C; }
.ocean-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero { background: transparent; }
.hero__veil {
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(4, 30, 52, .34), rgba(4, 30, 52, 0) 72%),
    linear-gradient(180deg, rgba(4, 30, 52, .35) 0, rgba(4, 30, 52, 0) 160px);
}

.float-card {
  position: relative;
  width: min(1360px, calc(100% - 2 * var(--gutter)));
  margin: clamp(36px, 7vh, 80px) auto;
  border-radius: clamp(22px, 2.4vw, 34px);
  background: rgba(255, 252, 246, .84);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 50px 90px -50px rgba(2, 20, 36, .75), 0 18px 36px -24px rgba(2, 20, 36, .35);
  overflow: hidden;
  animation: card-float 9s ease-in-out infinite;
}
.float-card:nth-of-type(2n) { animation-delay: -3s; }
.float-card:nth-of-type(3n) { animation-delay: -6s; }
@keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.float-card--dark {
  background: rgba(4, 30, 52, .82); border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 90px -50px rgba(0, 0, 0, .8);
}

/* the drop: its heading sits on the water, each line is its own floating sandy card */
.drop { padding-bottom: clamp(30px, 6vh, 70px); }
.drop__head, .drop__head .display-2 { color: var(--white); text-shadow: 0 2px 20px rgba(2, 20, 36, .45); }
.drop__head .display-2 em { color: var(--sand-light); }
.drop__head .label, .drop__head .label--index span { color: var(--sand-light); }
.drop__note, .drop__note span { color: rgba(255, 255, 255, .92); }
/* small italic text over the sun glitter: a tighter shadow keeps it legible on the brightest water */
.drop__note { text-shadow: 0 1px 3px rgba(2, 20, 36, .55), 0 2px 18px rgba(2, 20, 36, .5); }
.strip--gallery .rows { gap: clamp(30px, 6vh, 64px); }
.strip--gallery .rows .row {
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) clamp(22px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(255, 248, 232, .62), rgba(255, 244, 222, .5)), url("assets/collections/sand.jpg") 0 0 / 512px 512px repeat, #EAD6AE;
}
.row + .row::before { display: none; }

/* the tide fades out at its foot, straight into the live ocean */
.tide { background: transparent; }
.tide__stage { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.tide__stage::after { display: none; }

/* the two collections float side by side */
.panels { gap: clamp(16px, 2vw, 28px); width: min(1720px, calc(100% - 2 * var(--gutter))); margin: clamp(36px, 7vh, 80px) auto; }
.panel {
  border-radius: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 50px 90px -50px rgba(2, 20, 36, .75), 0 18px 36px -24px rgba(2, 20, 36, .35);
  border: 1px solid rgba(255, 255, 255, .35);
  animation: card-float 9s ease-in-out infinite;
}
.panel--sand { animation-delay: -4.5s; }
.panel__fade { display: none; }

/* story, lookbook, access: drop the old wave edges, the cards carry the change now */
.story { background: rgba(250, 242, 228, .88); }
.story::before, .footer::before { display: none; }
.access { background: rgba(251, 248, 242, .86); }
.footer { margin-bottom: clamp(20px, 4vh, 40px); }

/* the product view floats as frosted glass over the ocean */
.spotlight { background: rgba(244, 249, 252, .8); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }

@media (max-width: 760px) {
  .panels { flex-direction: column; }
  .float-card, .panels { width: calc(100% - 24px); }
}

/* Welcome: the logo alone, big and centred over the ocean, with one quiet line beneath */
.hero { align-items: center; }
.hero__content { padding-top: calc(var(--nav-h) + 2vh); padding-bottom: 12vh; }
.logo3d { --w: clamp(150px, min(26vw, 34vh), 420px); }
/* short windows (small laptops): keep the logo clear of the menu bar */
@media (max-height: 720px) and (min-width: 761px) {
  .hero__content { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 6vh; }
  .logo3d__word { font-size: clamp(30px, 4.2vw, 64px); }
  .hero__label { margin-top: 12px; }
}
.logo3d__word { font-size: clamp(34px, 5vw, 84px); }
.hero__label { margin-top: clamp(18px, 3vh, 34px); }
.hero__title { font-size: clamp(22px, 2.2vw, 34px); margin: 10px 0 0; }
.hero__cta { margin-top: clamp(18px, 3vh, 30px); }
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--white); text-shadow: 0 1px 12px rgba(4, 30, 52, .5);
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em;
}
.scroll-cue__line { position: relative; width: 1px; height: 46px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--white);
  animation: cue-drop 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cue-drop { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@media (max-width: 760px) {
  .logo3d { --w: 62vw; }
  .logo3d__word { font-size: 9vw; }
}

/* ==========================================================================
   Afloat: pieces in glass bobbing on the open water, each at its own height,
   tilt and pace, with a soft reflection on the sea beneath
   ========================================================================== */
.drift { position: relative; padding: clamp(80px, 14vh, 150px) 0 clamp(60px, 10vh, 120px); text-align: center; }
.drift__head { margin-bottom: clamp(40px, 7vh, 80px); }
.drift__label { color: var(--sand-light) !important; }
.drift__title {
  margin-top: 14px; color: var(--white);
  font-family: var(--display); font-weight: 300; font-size: clamp(40px, 5.4vw, 92px); line-height: 1; letter-spacing: -.01em;
  text-shadow: 0 2px 30px rgba(2, 20, 36, .45);
}
.drift__title em { font-style: italic; color: var(--sand-light); }
/* as many columns as there are pieces, centred, and the cards grow so a short drop still fills the page */
.drift__row.glass-row {
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); width: min(calc(var(--n, 6) * 340px), 1500px, calc(100% - 2 * var(--gutter))); margin: 0 auto;
  gap: clamp(14px, 1.8vw, 30px); padding-bottom: 60px;
}
.drift .glass__bob {
  position: relative;
  translate: 0 calc(var(--lift, 0px) + var(--swell, 0px)); rotate: var(--tilt, 0deg);
  animation: drift-bob calc(5.5s + var(--k) * .6s) ease-in-out calc(var(--k) * -1.3s) infinite;
  transition: translate 600ms var(--ease-out);
}
@keyframes drift-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35%      { transform: translate3d(0, -14px, 0) rotate(1.2deg); }
  70%      { transform: translate3d(0, -5px, 0) rotate(-1deg); }
}
.drift .glass__frame { aspect-ratio: 4 / 5; border-radius: 26px; }
.drift .glass__frame img { animation: none; }
/* the reflection on the water */
.glass__reflection {
  position: absolute; left: 6%; right: 6%; top: calc(100% + 6px); height: 55%; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 80%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 80%);
  opacity: .5; filter: blur(3px) saturate(1.2);
}
.glass__reflection img { width: 100%; height: 180%; object-fit: contain; transform: scaleY(-1); transform-origin: top; margin-top: -35%; }
.drift .glass__name, .drift .glass__price { position: relative; display: inline-block; }
.drift .glass__name { margin-top: calc(14px + 22%); padding: 6px 14px 2px; border-radius: 999px 999px 0 0; }
.drift .glass__name::before, .drift .glass__price::before { content: ""; position: absolute; inset: 0 -6px; z-index: -1; background: rgba(4, 30, 52, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drift .glass__name::before { border-radius: 14px 14px 0 0; }
.drift .glass__price { padding: 2px 14px 6px; display: block; width: max-content; margin: 0 auto; }
.drift .glass__price::before { border-radius: 0 0 14px 14px; }
@media (max-width: 900px) {
  .drift__row.glass-row { grid-template-columns: none; grid-auto-columns: 46%; width: 100%; padding: 4px 24px 60px; }
}
@media (max-width: 760px) {
  .drift__row.glass-row { grid-auto-columns: 62%; }
}

/* ==========================================================================
   Each line has its own voice: Shoreline in crisp navy display serif,
   Soleil in warm pink italic, Marée in old-money engraved capitals
   ========================================================================== */
.row[data-line="lagon"] { --line-ink: #17406E; --line-accent: #2F6FB0; --line-tint: rgba(214, 232, 247, .55); }
.row[data-line="riva"]  { --line-ink: #C2386F; --line-accent: #E77FA6; --line-tint: rgba(255, 222, 232, .55); }
.row[data-line="maree"] { --line-ink: #23402F; --line-accent: #A9853F; --line-tint: rgba(226, 232, 214, .55); }
.strip--gallery .rows .row[data-line] {
  background:
    linear-gradient(180deg, var(--line-tint), rgba(255, 248, 232, .45)),
    url("assets/collections/sand.jpg") 0 0 / 512px 512px repeat, #EAD6AE;
}
.row[data-line] .row__index, .row[data-line] .row__kind { color: var(--line-accent); }
.row[data-line] .row__name { color: var(--line-ink); }
.row[data-line] .card__name { color: var(--line-ink); }
.row[data-line] .card__color, .row[data-line] .card__detail span, .row[data-line] .strip__item::before { color: var(--line-accent); }
.row[data-line] .card__meta { border-top-color: color-mix(in srgb, var(--line-accent) 35%, transparent); }

.row[data-line="lagon"] .row__name { font-family: "DM Serif Display", var(--serif); font-weight: 400; letter-spacing: -.01em; }
.row[data-line="lagon"] .card__name { font-family: "DM Serif Display", var(--serif); }

.row[data-line="riva"] .row__name {
  font-family: "Playfair Display", var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em;
  background: linear-gradient(100deg, #C2386F 0%, #F07C9E 45%, #F6A55E 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .06em .14em .14em 0; margin-bottom: -.1em;   /* room for the italic's swash and descenders */
}
.row[data-line="riva"] .card__name { font-family: "Playfair Display", var(--serif); font-style: italic; }

.row[data-line="maree"] .row__name { font-family: "Cinzel", var(--serif); font-weight: 400; font-size: clamp(42px, 4.4vw, 76px); letter-spacing: .1em; }
.row[data-line="maree"] .row__name::after { content: ""; display: block; width: 64px; height: 1px; margin-top: 18px; background: var(--line-accent); }
.row[data-line="maree"] .card__name { font-family: "Cinzel", var(--serif); font-size: 16px; letter-spacing: .08em; }

/* ==========================================================================
   Reduced motion: water and fades still play (as agreed), no movement elsewhere
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.intro):not([data-motion]), *:not([data-motion])::before, *:not([data-motion])::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-animate="fade-up"], .js [data-animate="fade"], .js [data-animate="words"] .w__i {
    transform: none !important;
    transition: opacity var(--dur-reveal) var(--ease-out) !important;
    transition-delay: var(--delay) !important;
  }
  .js [data-animate="words"] .w__i { transition-delay: calc(var(--delay) + var(--wi, 0) * 70ms) !important; }
  .js [data-animate="clip"] { clip-path: none !important; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) !important; transition-delay: var(--delay) !important; }
  .js [data-animate="clip"].is-visible { opacity: 1; }
  .js [data-animate="clip"] img { scale: 1 !important; }
  .js [data-animate="line"] { transform: none !important; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) !important; }
  .js [data-animate="line"].is-visible { opacity: 1; }
  .panel__palm { transition: opacity 1400ms var(--ease-soft) !important; }
  .panel:hover .panel__palm { translate: none; scale: none; }
}

/* ---------- Small-screen refinements ---------- */
@media (max-width: 520px) {
  .announce { font-size: 9.5px; letter-spacing: .14em; }
}

/* Loading a section from the menu: a frosted veil, and the palm turns once, quickly, while the page moves behind it */
.page-loader {
  position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; pointer-events: none;
  background: rgba(244, 249, 252, .8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; visibility: hidden;
}
.page-loader.is-on { visibility: visible; pointer-events: auto; animation: loader-veil 760ms ease-in-out both; }
@keyframes loader-veil { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.page-loader img { width: clamp(56px, 6vw, 84px); height: auto; filter: drop-shadow(0 10px 18px rgba(11, 44, 71, .18)); }
.page-loader.is-on img { animation: loader-turn 600ms cubic-bezier(.65, 0, .35, 1) 60ms both; }
@keyframes loader-turn { from { rotate: 0deg; } to { rotate: 360deg; } }