:root {
  --ink: #25353a;
  --paper: #dfe2df;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(150deg, #e5e7e3 0%, #d9ddda 48%, #e2e3df 100%);
}

.water-field {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #b8c1be;
}

.water-photo {
  position: absolute;
  inset: -12%;
  background: url("water-texture.png") center / cover no-repeat;
  will-change: transform, opacity;
}

.water-photo-a {
  opacity: .26;
  filter: grayscale(.35) saturate(.5) contrast(.78) brightness(1.62);
  animation: water-drift-a 22s ease-in-out infinite alternate;
}

.water-photo-b {
  opacity: .11;
  filter: grayscale(.25) blur(2px) brightness(1.85);
  mix-blend-mode: screen;
  transform: scale(1.18) rotate(180deg);
  animation: water-drift-b 29s ease-in-out infinite alternate;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, transparent 0 20%, rgba(217,221,218,.25) 54%, rgba(180,187,184,.44) 130%);
  box-shadow: inset 0 0 13vw rgba(48,65,68,.08);
}

.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-1.5vh);
}

h1 {
  margin: 0 0 clamp(20px, 3.2vh, 36px);
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  font-weight: 500;
  letter-spacing: .48em;
  line-height: 1;
  text-indent: .48em;
}

.porcelain-mark {
  --pearl-x: 36%;
  --pearl-y: 28%;
  position: relative;
  width: clamp(280px, min(39vw, 54vh), 500px);
  aspect-ratio: 1;
  filter:
    drop-shadow(0 24px 27px rgba(14,31,36,.23))
    drop-shadow(0 5px 5px rgba(14,31,36,.22))
    drop-shadow(0 0 1px rgba(255,255,250,.82));
}

.porcelain-base,
.porcelain-grain,
.porcelain-pearl {
  position: absolute;
  inset: 0;
  -webkit-mask: url("grey-ship-mask-exact.svg") center / contain no-repeat;
  mask: url("grey-ship-mask-exact.svg") center / contain no-repeat;
  pointer-events: none;
}

.porcelain-base {
  background:
    radial-gradient(ellipse at 34% 23%, rgba(255,255,252,.78) 0%, transparent 32%),
    linear-gradient(145deg, #f1f0e9 0%, #e5e4dc 48%, #d4d6d1 100%);
}

.porcelain-grain {
  opacity: .42;
  background:
    radial-gradient(circle at 19% 26%, rgba(108,115,111,.22) 0 .55px, transparent .9px),
    radial-gradient(circle at 67% 18%, rgba(255,255,252,.72) 0 .55px, transparent 1px),
    radial-gradient(circle at 82% 64%, rgba(101,109,105,.17) 0 .5px, transparent .9px),
    radial-gradient(circle at 43% 79%, rgba(255,255,252,.68) 0 .55px, transparent 1px);
  background-size: 17px 19px, 23px 29px, 31px 27px, 37px 41px;
  mix-blend-mode: multiply;
}

.porcelain-pearl {
  background:
    radial-gradient(circle at var(--pearl-x) var(--pearl-y), rgba(255,255,255,.94) 0%, rgba(236,244,244,.58) 10%, rgba(210,225,227,.18) 27%, transparent 49%),
    linear-gradient(115deg, transparent 31%, rgba(255,255,252,.16) 46%, transparent 59%);
  mix-blend-mode: screen;
  transition: background 90ms linear;
}

.status {
  margin: clamp(20px, 3vh, 34px) 0 0;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.42rem, 2.15vw, 1.85rem);
  font-style: italic;
  letter-spacing: .15em;
  text-align: center;
  text-indent: .15em;
}

.availability {
  position: absolute;
  bottom: max(27px, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(37,53,58,.62);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 500;
  letter-spacing: .28em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .identity { transform: translateY(-2vh); }
  h1 { margin-bottom: 28px; letter-spacing: .38em; text-indent: .38em; }
  .porcelain-mark { width: min(76vw, 370px); }
  .status { margin-top: 24px; }
  .availability { bottom: max(22px, env(safe-area-inset-bottom)); }
}

@keyframes water-drift-a {
  0% { transform: scale(1.05) translate3d(-2.5%, -1.5%, 0); }
  50% { transform: scale(1.12) translate3d(1.5%, -3%, 0); }
  100% { transform: scale(1.08) translate3d(3%, 2%, 0); }
}

@keyframes water-drift-b {
  0% { transform: scale(1.18) rotate(180deg) translate3d(2%, 2%, 0); opacity: .08; }
  100% { transform: scale(1.28) rotate(182deg) translate3d(-3%, -2%, 0); opacity: .16; }
}

@media (prefers-reduced-motion: reduce) {
  .water-photo { animation: none; }
}