/* TEN 03 SKIN — brand tokens (from the TEN 03 SKIN design system) + Water Pool page. */

@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/fira-400-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/fira-400-lat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/fira-500-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/fira-500-lat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url("../assets/fonts/cormorant-italic-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url("../assets/fonts/cormorant-italic-lat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --wine: #4C1D22;
  --wine-dark: #331E1E;
  --beige-canvas: #FAEBD9;
  --font-sans: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
}

html, body { margin: 0; padding: 0; background: #4C1D22; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.pool {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: linear-gradient(180deg, #FAEBD9 0%, #EEDCCB 26%, #D2B5A8 46%, #B48D86 60%, #7F4D51 78%, #4C1D22 92%, #4C1D22 100%);
  color: var(--wine);
  font-family: var(--font-sans);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}

/* The WebGL canvas fades in once the scene is drawn; until then the DOM heading is visible. */
.pool canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms cubic-bezier(.2,.7,.2,1); }
.pool.is-live canvas { opacity: 1; }

.pool__header {
  position: absolute; top: clamp(28px, 6vh, 64px); left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
}
.pool__header img { display: block; width: clamp(170px, 17vw, 250px); height: auto; aspect-ratio: 787.49 / 83.82; }

.pool__main {
  position: absolute; left: 0; right: 0; top: 36%; transform: translateY(-50%);
  padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vh, 22px);
  text-align: center; pointer-events: none;
}
.pool__main h1 {
  margin: 0 0 .2em;
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(64px, 11vw, 180px); line-height: .9; letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--wine);
  transition: color 700ms cubic-bezier(.2,.7,.2,1);
}
/* The canvas renders the heading itself (so it refracts); the DOM copy stays for a11y and layout. */
.pool.is-live .pool__main h1 { color: transparent; }
.pool__tagline {
  margin: 0; font-size: 13px; font-weight: 500;
  letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--wine);
}

.pool__footer {
  position: absolute; left: 0; right: 0; bottom: clamp(44px, 11vh, 104px);
  bottom: calc(clamp(44px, 11vh, 104px) + env(safe-area-inset-bottom, 0px));
  padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--beige-canvas);
}

.pool__form {
  pointer-events: auto;
  display: flex; align-items: center;
  width: min(480px, 100%); padding: 6px; box-sizing: border-box;
  background: rgba(76,29,34,.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(250,235,217,.4); border-radius: 999px;
  transition: border-color 200ms;
}
.pool__form[hidden] { display: none; }
.pool__form:focus-within { border-color: rgba(250,235,217,.85); }
.pool__form[aria-busy="true"] { opacity: .7; }
.pool__form input[type=email] {
  flex: 1 1 auto; min-width: 0; height: 48px;
  padding: 0 16px 0 22px; border: 0; outline: none; background: transparent;
  color: var(--beige-canvas); font-family: var(--font-sans); font-size: 16px; letter-spacing: .04em;
  user-select: text; -webkit-user-select: text;
}
.pool__form input::placeholder { color: inherit; opacity: .72; }
.pool__form button {
  flex: none; height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--beige-canvas); color: var(--wine);
  font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background 200ms, transform 200ms;
}
.pool__form button:hover { background: #ffffff; }
.pool__form button:active { transform: scale(.98); }
.pool__form button:focus-visible { outline: 2px solid var(--beige-canvas); outline-offset: 3px; }

/* Honeypot for bots — never visible. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.pool__error { margin: 0; font-size: 13px; letter-spacing: .06em; color: var(--beige-canvas); }
.pool__thanks {
  margin: 0; max-width: 560px;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
  text-align: center; text-wrap: balance; color: var(--beige-canvas);
}
[hidden] { display: none !important; }

@media (max-width: 420px) {
  .pool__form button { padding: 0 18px; letter-spacing: .14em; }
  .pool__form input[type=email] { padding-left: 18px; }
}