.ocean-opening {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background:
    radial-gradient(circle at 22% 18%, rgba(247,243,234,.82) 0 7%, transparent 30%),
    linear-gradient(180deg, var(--ivory) 0 11%, var(--sky) 48%, var(--ocean) 118%);
}

.ocean-opening::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-image: url('../assets/paper-texture.svg');
  background-size: 320px 320px;
  mix-blend-mode: multiply;
}

.ocean-opening::after {
  content: '';
  position: absolute;
  inset: 38% -10% -18%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(247,243,234,.32), transparent 64%);
  transform: rotate(-4deg);
}

.ocean-opening__sky, .wave-field { position: absolute; inset: 0; pointer-events: none; }
.wave-field { z-index: 1; }
.cloud { position: absolute; width: clamp(100px, 12vw, 180px); opacity: .62; }
.cloud--one { top: 8%; left: 7%; }
.cloud--two { top: 15%; right: 9%; width: clamp(78px, 9vw, 132px); transform: scaleX(-1); opacity: .42; }

.wave-field__lines { position: absolute; width: clamp(310px, 44vw, 680px); opacity: .42; }
.wave-field__lines--one { left: -6%; top: 51%; transform: rotate(7deg); }
.wave-field__lines--two { right: -9%; bottom: 8%; transform: rotate(-11deg) scale(.78); opacity: .28; }

.fish-journey {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -18%;
  width: clamp(112px, 13vw, 176px);
  transform: translateX(-50%);
  will-change: transform, opacity;
}

.fish-journey.is-swimming { animation: fish-swim-up 11.8s cubic-bezier(.34,.04,.22,1) .35s both; }
.fish-journey__fish { position: relative; z-index: 1; width: 100%; transform-origin: 28% 52%; filter: drop-shadow(0 8px 12px rgba(52,67,74,.1)); }
.fish-wake { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fish-ripple { position: absolute; width: 66px; height: 20px; border: 2px solid rgba(247,243,234,.86); border-radius: 50%; transform: translateX(-50%) scale(.35); opacity: 0; filter: drop-shadow(0 1px 1px rgba(52,67,74,.2)); }
.fish-ripple::after { content: ''; position: absolute; right: -14px; top: -10px; width: 8px; height: 8px; border: 2px solid rgba(247,243,234,.92); border-radius: 50%; box-shadow: 11px 13px 0 -1px rgba(247,243,234,.72); }
.fish-ripple--one { left: 46%; bottom: 9%; }
.fish-ripple--two { left: 40%; bottom: 35%; width: 48px; height: 15px; }
.use-css-fish-motion .fish-ripple--one { animation: ripple-once 2.2s ease-out 1.45s both; }
.use-css-fish-motion .fish-ripple--two { animation: ripple-once 2s ease-out 4.1s both; }

.opening-sailboat {
  position: absolute;
  z-index: 0;
  left: 7%;
  top: 40%;
  width: clamp(138px, 16vw, 238px);
  opacity: 0;
  transform: translate3d(-30px, 2px, 0);
  will-change: opacity, transform;
  pointer-events: none;
}
.opening-sailboat img {
  display: block;
  width: 100%;
  opacity: .58;
  transform-origin: 50% 78%;
  clip-path: inset(0 0 17% 0);
  will-change: transform;
}
.is-intro-playing .opening-sailboat { animation: distant-sail-arrive 3s var(--ease-out) 12.35s both; }
.is-intro-playing .opening-sailboat img { animation: distant-sail-drift 5.2s ease-in-out 15.35s infinite alternate both; }

@keyframes fish-swim-up {
  0% { transform: translate(calc(-50% - 4vw), 4vh) rotate(66deg) scale(1.08); opacity: 0; }
  11% { transform: translate(calc(-50% - 2vw), -8vh) rotate(70deg) scale(1.02); opacity: 1; }
  33% { transform: translate(calc(-50% - 9vw), -30vh) rotate(76deg) scale(.88); opacity: .96; }
  56% { transform: translate(calc(-50% + 5vw), -53vh) rotate(67deg) scale(.71); opacity: .86; }
  79% { transform: translate(calc(-50% - 3vw), -75vh) rotate(75deg) scale(.56); opacity: .72; }
  100% { transform: translate(calc(-50% + 8vw), -97vh) rotate(70deg) scale(.42); opacity: 0; }
}

@keyframes ripple-once {
  0% { opacity: 0; transform: translateX(-50%) scale(.35); }
  22% { opacity: .82; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.7); }
}

@keyframes distant-sail-arrive {
  0% { opacity: 0; transform: translate3d(-30px, 2px, 0); }
  100% { opacity: .72; transform: translate3d(0, 0, 0); }
}

@keyframes distant-sail-drift {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to { transform: translate3d(8px, 3px, 0) rotate(1.1deg); }
}

.opening-copy { width: min(100%, 1120px); min-height: 58vh; position: relative; z-index: 3; }
.opening-copy__invitation {
  position: absolute;
  top: 7%;
  left: 4%;
  max-width: 18em;
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: .08em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(16px);
}

.is-intro-playing .opening-copy__invitation { animation: copy-arrive .9s var(--ease-out) 1.1s both; }

.opening-copy__identity {
  position: absolute;
  right: 3%;
  bottom: 7%;
  width: min(70%, 700px);
  text-align: right;
  opacity: 1;
}

.opening-copy__eyebrow,
.opening-copy h1,
.opening-copy__motto { opacity: 0; transform: translateY(18px); }
.opening-copy__eyebrow { margin-bottom: .45rem; color: var(--ink-faint); font-size: .7rem; letter-spacing: .2em; font-weight: 700; }
.opening-copy h1 { margin-bottom: .2rem; font-family: var(--font-title); font-size: clamp(3rem, 8vw, 7.2rem); font-weight: 900; line-height: 1.05; letter-spacing: .04em; }
.opening-copy__motto { margin-bottom: 0; font-family: var(--font-title); font-size: clamp(1rem, 2.1vw, 1.45rem); letter-spacing: .24em; }
.is-intro-playing .opening-copy__eyebrow { animation: copy-arrive .9s var(--ease-out) 6.2s both; }
.is-intro-playing .opening-copy h1 { animation: copy-arrive 1.15s var(--ease-out) 6.55s both; }
.is-intro-playing .opening-copy__motto { animation: copy-arrive 1.8s var(--ease-out) 12.35s both; }

@keyframes copy-arrive { to { opacity: 1; transform: none; } }

.scroll-cue {
  position: absolute;
  z-index: 4;
  left: var(--page-gutter);
  bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: .74rem;
  letter-spacing: .12em;
  opacity: 0;
}

.is-intro-playing .scroll-cue { animation: copy-arrive .8s var(--ease-out) 4.4s both; }
.scroll-cue i { width: 64px; height: 1px; background: var(--ink); position: relative; }
.scroll-cue i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.scroll-cue:hover span { background: linear-gradient(transparent 55%, var(--ivory) 55%); }

.island-world { position: relative; overflow: hidden; padding: var(--section-space) var(--page-gutter); background: var(--ivory); }
.island-world::before { content: 'ISLANDS'; position: absolute; top: 5%; right: -1%; font-family: var(--font-editorial); font-style: italic; font-size: clamp(5rem, 16vw, 14rem); color: rgba(114,184,214,.1); line-height: .8; pointer-events: none; }
.world-intro { max-width: 820px; margin: 0 auto clamp(100px, 15vh, 180px); }
.world-intro__label { margin-bottom: 1rem; color: var(--ocean); font-size: .72rem; letter-spacing: .22em; font-weight: 700; }
.world-intro h2 { margin-bottom: 1.5rem; font-family: var(--font-title); font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.35; }
.world-intro > p:last-child { max-width: 520px; color: var(--ink-soft); }

.archipelago {
  max-width: var(--content-width);
  min-height: 980px;
  margin: 0 auto;
  position: relative;
  background-image: radial-gradient(circle, rgba(114,184,214,.17) 1px, transparent 1.2px);
  background-size: 42px 42px;
  border-radius: 48% 52% 44% 56%;
}

.island-entry { position: absolute; width: clamp(230px, 27vw, 370px); color: var(--ink); text-decoration: none; padding: 1rem; }
.island-entry img { width: 100%; height: 210px; object-fit: contain; margin-bottom: .3rem; transition: transform .6s var(--ease-out); }
.island-entry__number { position: absolute; top: 0; right: 4%; font-family: var(--font-editorial); font-size: 4.6rem; color: rgba(114,184,214,.16); line-height: 1; }
.island-entry__english { display: block; font-family: var(--font-editorial); font-style: italic; color: var(--ocean); font-size: 1.05rem; }
.island-entry strong { display: block; font-family: var(--font-title); font-size: clamp(1.45rem, 2.5vw, 2rem); }
.island-entry small { display: block; max-width: 26em; margin-top: .4rem; color: var(--ink-soft); font-size: .82rem; }
.island-entry::after { content: ''; display: block; width: 0; height: 7px; margin-top: .85rem; background: var(--sky); transition: width .45s var(--ease-out); }
.island-entry:hover img, .island-entry:focus-visible img { transform: translateY(-8px); }
.island-entry:hover::after, .island-entry:focus-visible::after { width: 72px; }
.island-entry--poetry { left: 3%; top: 2%; }
.island-entry--creation { right: 2%; top: 20%; }
.island-entry--about { left: 18%; top: 53%; }
.island-entry--links { right: 14%; top: 65%; }

.sailing-note { max-width: 1080px; margin: clamp(100px, 16vh, 190px) auto 0; display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: var(--content-space); }
.sailing-note__visual { position: relative; min-height: 280px; display: grid; align-items: end; }
.sailing-note__visual > img { width: 100%; }
.sailing-note__hand { margin-bottom: .2rem; color: var(--ocean); font-family: var(--font-hand); font-size: 1.5rem; }
.sailing-note h2 { margin-bottom: 1rem; font-family: var(--font-title); font-size: clamp(1.7rem, 4vw, 3.2rem); }
.sailing-note div:last-child > p:last-child { color: var(--ink-soft); }

.home-fish-finale {
  position: relative;
  height: clamp(150px, 18vw, 220px);
  margin: 34px calc(-1 * var(--page-gutter)) calc(-1 * var(--section-space));
  overflow: hidden;
  pointer-events: none;
}

.home-fish-finale__fish {
  position: absolute;
  z-index: 2;
  top: 5%;
  right: -150px;
  width: clamp(82px, 9vw, 126px);
  opacity: 0;
  will-change: transform, opacity;
}
.home-fish-finale__fish img { display: block; width: 100%; }

.home-fish-finale__splash {
  position: absolute;
  z-index: 1;
  right: 43%;
  bottom: -5px;
  width: 92px;
  height: 34px;
  opacity: 0;
}
.home-fish-finale__splash::before,
.home-fish-finale__splash::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 16px;
  border: 2px solid rgba(114,184,214,.72);
  border-radius: 50%;
  transform: translateX(-50%) scale(.35);
}
.home-fish-finale__splash::after { width: 92px; height: 24px; border-style: dashed; opacity: .56; }
.home-fish-finale__splash i { position: absolute; left: 50%; bottom: 10px; width: 6px; height: 10px; border: 2px solid rgba(114,184,214,.74); border-radius: 50%; }
.home-fish-finale__splash i:nth-child(1) { margin-left: -26px; transform: rotate(-24deg); }
.home-fish-finale__splash i:nth-child(2) { height: 14px; margin-left: -2px; }
.home-fish-finale__splash i:nth-child(3) { margin-left: 20px; transform: rotate(24deg); }

.home-fish-finale.is-active .home-fish-finale__fish { animation: finale-fish-dive 3.9s cubic-bezier(.32,.04,.2,1) both; }
.home-fish-finale.is-active .home-fish-finale__splash { animation: finale-splash 1.45s ease-out 3.72s both; }

@keyframes finale-fish-dive {
  0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); }
  12% { opacity: .9; transform: translate(-4vw, 3px) rotate(-11deg); }
  55% { opacity: .86; transform: translate(-27vw, 28px) rotate(-16deg); }
  82% { opacity: .7; transform: translate(-45vw, 104px) rotate(-28deg); }
  100% { opacity: 0; transform: translate(-49vw, 158px) rotate(-34deg); }
}

@keyframes finale-splash {
  0% { opacity: 0; transform: scale(.35); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.45); }
}

.site-footer { padding: 50px var(--page-gutter) 34px; display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--paper-line); font-size: .75rem; color: var(--ink-soft); }
.site-footer p { margin-bottom: 0; }
.site-footer__license { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .opening-sailboat { opacity: .4; transform: none; }
  .home-fish-finale { display: none; }
}