/* Cover only: original water photograph + editable, locally hosted wordmark. */
@font-face {
  font-family:"JEENETIC Cover";
  src:url("assets/fonts/manrope-jeenetic-600.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

html.intro-visible { overflow:hidden; }
.intro {
  --cover-ink:#084879;
  position:fixed;
  z-index:100;
  inset:0;
  overflow:hidden;
  isolation:isolate;
  background:#e4edf6;
  color:var(--cover-ink);
}
.home-water, .home-water-live {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  user-select:none;
}
.home-water-live { opacity:0; transition:opacity 700ms ease-out; }
.home-water-live.is-ready { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .home-water-live { display:none; }
}
.intro-enter {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0 24px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.intro-wordmark {
  display:block;
  font-family:"JEENETIC Cover","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(24px,5.4vw,36px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.46em;
  padding-inline-start:.46em;
  white-space:nowrap;
  transform:translateY(-.12em);
  transform-origin:center;
  transition:transform 380ms cubic-bezier(.2,.8,.2,1), color 220ms ease-out, text-shadow 380ms ease-out;
}
.intro-enter:focus-visible { outline:none; }
.intro-enter:focus-visible .intro-wordmark { outline:2px solid currentColor; outline-offset:16px; }
.intro-enter:active .intro-wordmark { color:#082f55; }
@media (hover:hover) and (pointer:fine) {
  .intro-wordmark:hover {
    transform:translateY(calc(-.12em - 4px)) scale(1.075);
    color:#06355e;
    text-shadow:0 7px 16px rgba(8,72,121,.2);
  }
}
@media (prefers-reduced-motion:reduce) {
  .intro-wordmark { transition:color 160ms ease-out; }
  .intro-wordmark:hover { transform:translateY(-.12em); text-shadow:none; }
}
@media (max-width:480px) {
  .intro-wordmark { font-size:24px; letter-spacing:.42em; padding-inline-start:.42em; }
}

.choice { background:#061d45; }
.choice h1 { font-family:var(--font-ui); font-weight:600; letter-spacing:-.065em; }
.choice p { font-family:var(--font-cn); font-weight:400; letter-spacing:.01em; }