:root {
  --ivory: #fffdf2;
  --copper: #b9573f;
  --deep: #0f5189;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
  --move-x: 0px;
  --move-y: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background: var(--deep);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}
a { color: inherit; text-decoration: none; }

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #9dc7e0;
}

.ocean-art,
.wave-layer {
  position: fixed;
  inset: -4%;
  z-index: -5;
  background-image: url("summer-solstice.png");
  background-size: cover;
  background-position: center 52%;
  filter: saturate(.95) contrast(1.03);
}
.ocean-art {
  transform: translate(var(--move-x), var(--move-y)) scale(1.045);
  animation: breathe 12s ease-in-out infinite alternate;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
@keyframes breathe {
  0% { background-position: 48% 47%; filter: saturate(.92) contrast(1.02); }
  50% { background-position: 52% 51%; filter: saturate(1.02) contrast(1.05); }
  100% { background-position: 47% 56%; filter: saturate(.96) contrast(1.03); }
}
.wave-layer {
  z-index: -4;
  opacity: .34;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform, background-position, clip-path;
}
.wave-layer-one {
  clip-path: polygon(0 37%, 18% 34%, 39% 42%, 61% 31%, 79% 35%, 100% 27%, 100% 64%, 79% 59%, 58% 66%, 36% 58%, 17% 70%, 0 66%);
  animation: tide-one 8s ease-in-out infinite alternate;
}
.wave-layer-two {
  clip-path: polygon(0 62%, 17% 55%, 34% 65%, 53% 51%, 72% 61%, 87% 53%, 100% 57%, 100% 100%, 0 100%);
  opacity: .27;
  mix-blend-mode: soft-light;
  animation: tide-two 11s ease-in-out infinite alternate;
}
@keyframes tide-one {
  0% {
    transform: translate3d(-3.5%, 1%, 0) scale(1.07) skewX(-1deg);
    background-position: 44% 48%;
  }
  55% {
    transform: translate3d(2.5%, -1.6%, 0) scale(1.11) skewX(1deg);
    background-position: 54% 51%;
  }
  100% {
    transform: translate3d(4%, .5%, 0) scale(1.075) skewX(-.5deg);
    background-position: 58% 46%;
  }
}
@keyframes tide-two {
  0% {
    transform: translate3d(4%, 2%, 0) scale(1.1) rotate(.25deg);
    background-position: 57% 57%;
  }
  50% {
    transform: translate3d(-2%, -1.8%, 0) scale(1.045) rotate(-.2deg);
    background-position: 47% 51%;
  }
  100% {
    transform: translate3d(-4.5%, 1%, 0) scale(1.09) rotate(.2deg);
    background-position: 41% 55%;
  }
}

.paper-light {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(13, 70, 113, .38), transparent 50%, rgba(16, 74, 116, .18)),
    linear-gradient(0deg, rgba(5, 48, 84, .42), transparent 45%, rgba(255, 255, 245, .08));
}

.cursor-light {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 241, .24), transparent 66%);
}

.ripple-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}

.topbar {
  position: relative;
  z-index: 3;
  height: 112px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(242, 234, 219, .2);
}

.logo { display: flex; align-items: center; width: max-content; }
.logo img {
  display: block;
  width: clamp(190px, 16vw, 255px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .94;
}
.top-note {
  margin: 0; font-size: 11px; letter-spacing: .48em; color: rgba(242, 234, 219, .55);
}
.reserve {
  justify-self: end; display: flex; align-items: center; gap: 18px;
  font-family: "PingFang SC", sans-serif; font-size: 12px; letter-spacing: .18em;
}
.reserve span {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(242, 234, 219, .42); border-radius: 50%;
  transition: .25s ease;
}
.reserve:hover span { color: #102126; background: var(--ivory); transform: rotate(45deg); }

.hero {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 180px);
  padding: 7vh 7vw 9vh 12vw;
  display: grid;
  grid-template-columns: 1.45fr .65fr;
  align-items: center;
}
.side-coordinate {
  position: absolute; left: 5vw; top: 50%; display: flex; align-items: center; gap: 15px;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: Arial, sans-serif; font-size: 8px; letter-spacing: .38em;
  color: rgba(242, 234, 219, .43); white-space: nowrap;
}
.side-coordinate i { width: 65px; height: 1px; background: rgba(242, 234, 219, .25); }

.fish-journey {
  position: absolute;
  z-index: 0;
  left: 15%;
  bottom: 17%;
  width: 48vw;
  height: 35vh;
  pointer-events: none;
}
.fish-b {
  left: 6%;
  bottom: 12%;
  transform: scale(.68);
  transform-origin: left bottom;
  opacity: .65;
}
.fish-c {
  left: 28%;
  bottom: 22%;
  transform: scale(.52);
  transform-origin: left bottom;
  opacity: .52;
}
.fish-d {
  left: 1%;
  bottom: 27%;
  transform: scale(.42);
  transform-origin: left bottom;
  opacity: .42;
}
.fish-b .ink-fish, .fish-b .fish-splash { animation-delay: -3.2s; animation-duration: 11s; }
.fish-c .ink-fish, .fish-c .fish-splash { animation-delay: -6.4s; animation-duration: 13s; }
.fish-d .ink-fish, .fish-d .fish-splash { animation-delay: -8.7s; animation-duration: 15s; }
.ink-fish {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 66px;
  height: 30px;
  opacity: 0;
  filter: drop-shadow(0 5px 5px rgba(12, 62, 103, .18));
  animation: fish-jump 9s cubic-bezier(.4, 0, .28, 1) infinite;
  will-change: transform, opacity;
}
.fish-body {
  position: absolute;
  left: 12px;
  top: 5px;
  width: 43px;
  height: 20px;
  border-radius: 56% 46% 50% 48%;
  background:
    radial-gradient(circle at 77% 37%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    linear-gradient(160deg, #276ca4, #164f85 68%, rgba(18, 67, 111, .72));
  box-shadow: inset 0 -5px 8px rgba(7, 49, 88, .2);
}
.fish-body::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #092f55;
}
.fish-tail {
  position: absolute;
  left: 1px;
  top: 5px;
  width: 21px;
  height: 22px;
  background: rgba(28, 91, 143, .84);
  clip-path: polygon(100% 50%, 0 0, 18% 49%, 0 100%);
  transform-origin: right center;
  animation: tail-swish .42s ease-in-out infinite alternate;
}
.fish-fin {
  position: absolute;
  left: 31px;
  top: 20px;
  width: 18px;
  height: 9px;
  background: rgba(57, 116, 160, .65);
  clip-path: polygon(0 0, 100% 100%, 22% 72%);
}
.fish-splash {
  position: absolute;
  right: 2%;
  bottom: 1%;
  width: 74px;
  height: 24px;
  opacity: 0;
  animation: splash-show 9s ease-out infinite;
}
.fish-splash::before,
.fish-splash::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 12px;
  border-top: 2px solid rgba(236, 249, 247, .76);
  border-radius: 50%;
}
.fish-splash::before { left: 0; transform: rotate(-8deg); }
.fish-splash::after { right: 0; transform: rotate(8deg); }
.fish-splash i {
  position: absolute;
  left: 38px;
  bottom: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(242, 253, 249, .82);
}
.fish-splash i:nth-child(1) { transform: translate(-16px, -8px); }
.fish-splash i:nth-child(2) { transform: translate(2px, -14px); }
.fish-splash i:nth-child(3) { transform: translate(17px, -5px); }
@keyframes tail-swish {
  from { transform: rotate(-12deg) scaleY(.88); }
  to { transform: rotate(12deg) scaleY(1.08); }
}
@keyframes fish-jump {
  0%, 10% { transform: translate3d(-25px, 18px, 0) rotate(-3deg) scale(.74); opacity: 0; }
  15% { opacity: .5; }
  25% { transform: translate3d(8vw, 0, 0) rotate(-13deg) scale(.86); opacity: .8; }
  40% { transform: translate3d(18vw, -22vh, 0) rotate(-38deg) scale(1); opacity: 1; }
  54% { transform: translate3d(29vw, -29vh, 0) rotate(8deg) scale(1.05); opacity: 1; }
  67% { transform: translate3d(40vw, -14vh, 0) rotate(46deg) scale(.96); opacity: .94; }
  76% { transform: translate3d(47vw, 8px, 0) rotate(68deg) scale(.8); opacity: .72; }
  80% { transform: translate3d(48vw, 24px, 0) rotate(75deg) scale(.66); opacity: 0; }
  100% { transform: translate3d(48vw, 24px, 0) rotate(75deg) scale(.66); opacity: 0; }
}
@keyframes splash-show {
  0%, 74% { opacity: 0; transform: scale(.4); }
  79% { opacity: .9; transform: scale(1); }
  87% { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; }
}

.hero-content { position: relative; margin-top: -2vh; }
.belief-lead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 25px 5px;
  color: rgba(255, 253, 242, .78);
  font-size: clamp(13px, 1.15vw, 18px);
  letter-spacing: .42em;
}
.belief-lead::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--copper);
}
.hero h1.belief-statement {
  margin: 0;
  max-width: 880px;
  color: var(--ivory);
  font-size: clamp(62px, 7.7vw, 118px);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 500;
  text-shadow: 0 8px 38px rgba(18, 69, 108, .34);
}
.belief-statement span {
  display: block;
  margin-top: 10px;
  color: var(--ivory);
}
.belief-statement span::first-letter { color: var(--copper); }

.belief {
  justify-self: end; align-self: end; max-width: 330px; margin-bottom: 3vh;
  padding: 27px 0 0; border-top: 1px solid rgba(242, 234, 219, .35);
}
.belief p {
  margin: 0 0 13px; color: var(--copper); font-family: "PingFang SC", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .36em;
}
.belief h2 { margin: 0 0 16px; font-size: 24px; letter-spacing: .08em; font-weight: 500; }
.belief span {
  color: rgba(242, 234, 219, .58); font-family: "PingFang SC", sans-serif;
  font-size: 12px; line-height: 1.9; letter-spacing: .08em;
}
.contact-numbers { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.contact-numbers a {
  color: rgba(255, 253, 242, .78);
  font-family: Arial, "PingFang SC", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  transition: color .2s ease;
}
.contact-numbers a:hover { color: var(--ivory); }

.interaction-hint {
  position: absolute; right: 4.7vw; top: 33%;
  display: flex; align-items: center; gap: 13px;
  color: rgba(242, 234, 219, .46);
}
.interaction-hint p {
  margin: 0; font-family: "PingFang SC", sans-serif; font-size: 9px; line-height: 1.7; letter-spacing: .16em;
}
.mouse {
  width: 20px; height: 31px; border: 1px solid rgba(242, 234, 219, .45);
  border-radius: 14px; display: flex; justify-content: center; padding-top: 6px;
}
.mouse i { width: 2px; height: 6px; border-radius: 2px; background: var(--copper); animation: scroll 1.7s ease infinite; }
@keyframes scroll { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }

.footer {
  position: relative; z-index: 3; height: 68px; padding: 0 5vw;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-top: 1px solid rgba(242, 234, 219, .18);
  font-family: "PingFang SC", sans-serif; font-size: 9px; letter-spacing: .28em;
  color: rgba(242, 234, 219, .42);
}
.footer > p { margin: 0; }
.footer > p:last-child { justify-self: end; font-family: Arial, sans-serif; }
.footer div { display: flex; align-items: center; gap: 12px; }
.footer div i { width: 3px; height: 3px; border-radius: 50%; background: var(--copper); }

@media (max-width: 800px) {
  .topbar { height: 86px; padding: 0 22px; grid-template-columns: 1fr auto; }
  .top-note { display: none; }
  .logo img { width: 168px; }
  .reserve { font-size: 10px; gap: 10px; }
  .hero { min-height: calc(100svh - 146px); padding: 11vh 24px 8vh; display: block; }
  .side-coordinate, .interaction-hint { display: none; }
  .fish-journey { left: 2%; bottom: 25%; width: 78vw; height: 27vh; transform: scale(.72); transform-origin: left bottom; }
  .fish-b { left: -8%; bottom: 14%; transform: scale(.52); }
  .fish-c { left: 16%; bottom: 31%; transform: scale(.42); }
  .fish-d { display: none; }
  .hero-content { margin: 0; }
  .eyebrow { margin-left: 2px; letter-spacing: .25em; }
  .belief-lead { margin-bottom: 18px; font-size: 12px; letter-spacing: .27em; }
  .belief-lead::before { width: 28px; }
  .hero h1.belief-statement { max-width: 92vw; font-size: clamp(49px, 14.5vw, 76px); line-height: 1.1; }
  .belief { position: absolute; right: 24px; bottom: 3vh; width: 67%; margin: 0; }
  .belief h2 { font-size: 20px; }
  .belief span { font-size: 11px; }
  .footer { height: 60px; padding: 0 22px; grid-template-columns: 1fr 1fr; }
  .footer div { display: none; }
  .footer > p:last-child { font-size: 7px; }
  .ocean-art, .wave-layer { inset: -2%; background-position: center center; }
}

@media (max-height: 690px) and (min-width: 801px) {
  .hero { padding-top: 4vh; padding-bottom: 4vh; }
  .hero h1.belief-statement { font-size: 70px; }
  .slogan { margin-top: 3vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ocean-art, .wave-layer { animation: none; }
  .fish-journey { display: none; }
  .landing { background: #8cbcdf; }
  .mouse i { animation: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}