/* The 8 First Collection, holding site. The look follows the teaser (brief, section 3).
   Fonts are self-hosted (Google Fonts is unreachable from China): Marcellus for headings, Montserrat for text. */
@font-face { font-family: 'Marcellus'; font-weight: 400; font-display: block;
  src: url('fonts/Marcellus-400.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: 'Marcellus'; font-weight: 400; font-display: block;
  src: url('fonts/Marcellus-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-display: swap;
  src: url('fonts/Montserrat-300.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: 'Montserrat'; font-weight: 400; font-display: swap;
  src: url('fonts/Montserrat-400.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: 'Montserrat'; font-weight: 500; font-display: swap;
  src: url('fonts/Montserrat-500.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; }

/* Teaser palette: dark green pages, warm white text, gold section labels. */
:root {
  --green: #102c30;
  --ink: #f4f0e8;
  --gold: #8c7455;
  --gold-lit: #b8996e;            /* same gold, lighter: readable on dark */
  --line: rgba(244, 240, 232, .34);
  --ease: cubic-bezier(.23, 1, .32, 1);
  /* k = one unit of the 1440x810 teaser canvas: the sign-in screen scales as a whole sheet;
     the floor keeps text readable in short windows, the page then scrolls */
  --k: max(0.7px, min(0.06944vw, 0.12346vh));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scrollbar-color: rgba(244,240,232,.22) var(--green); }
html, body { background: var(--green); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--green); }
::-webkit-scrollbar-thumb { background: rgba(244,240,232,.22); border-radius: 5px; border: 2px solid var(--green); }
body {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 300;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, .mark, .loc, .specs, .enter-w { font-family: 'Marcellus', Georgia, serif; font-weight: 400; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold-lit); outline-offset: 4px; }

/* ================= screen 1: teaser cover + access form ================= */
.hero { position: relative; min-height: 100dvh; overflow: hidden; background: var(--green); }
/* teaser image: full-screen on desktop, the right edge with the pool is never cropped */
.pic { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pic .photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pic .logo { display: none; }
/* legibility guard on the left when a tall viewport crops the dark edge of the image */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,44,48,.55) 0%, rgba(16,44,48,.18) 34%, rgba(16,44,48,0) 52%);
}
.mark {
  position: absolute; z-index: 2; top: calc(35 * var(--k)); right: calc(59 * var(--k));
  font-size: calc(10.5 * var(--k)); letter-spacing: .14em; color: #fff; white-space: nowrap;
}
.col {
  position: relative; z-index: 2;
  padding: calc(35 * var(--k)) 0 calc(28 * var(--k)) calc(56 * var(--k));
  width: calc(526 * var(--k)); max-width: 100%;
}
.loc { font-size: calc(10.5 * var(--k)); letter-spacing: .14em; line-height: 1.3; white-space: nowrap; }
.logo { display: block; height: calc(94 * var(--k)); width: auto; margin-top: calc(30 * var(--k)); }
h1 { font-size: calc(48 * var(--k)); line-height: 1.16; margin-top: calc(34 * var(--k)); letter-spacing: .005em; }
.sub { font-family: 'Marcellus', Georgia, serif; font-size: calc(16 * var(--k)); line-height: 1.36; margin-top: calc(20 * var(--k)); }
.specs { font-size: calc(10.5 * var(--k)); letter-spacing: .14em; margin-top: calc(22 * var(--k)); white-space: nowrap; }

/* ---------- access form (from rpdomus.com, the "Money never sleeps" block) ---------- */
.access { margin-top: calc(40 * var(--k)); width: calc(330 * var(--k)); }
.fr { position: relative; height: calc(44 * var(--k)); margin-top: calc(16 * var(--k)); }
.fr:first-child { margin-top: 0; }
.ph {
  position: absolute; left: 0; top: 0; height: calc(34 * var(--k)); line-height: calc(34 * var(--k));
  font-size: calc(14.5 * var(--k)); color: var(--ink); opacity: .64; pointer-events: none;
  transition: opacity 180ms var(--ease);
}
.fr:focus-within .ph, .fr.filled .ph { opacity: 0; }
.fr input {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(34 * var(--k));
  border: 0; outline: 0; background: transparent; border-radius: 0;
  font: inherit; font-size: calc(14.5 * var(--k)); color: var(--ink); caret-color: var(--gold-lit);
}
.fr input::-webkit-credentials-auto-fill-button,
.fr input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; }
.base {
  position: absolute; left: 0; right: 0; top: calc(40 * var(--k));
  border-bottom: 1px solid var(--line); transition: border-color 200ms ease;
}
.fr:focus-within .base { border-color: var(--ink); }
.fr.miss .base { border-color: var(--gold-lit); }
.hint { font-size: calc(12 * var(--k)); line-height: 1.4; color: var(--ink); opacity: .6; margin-top: calc(9 * var(--k)); }
.hint u { text-decoration: none; border-bottom: 1px solid var(--line); cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.hint u:hover { color: var(--gold-lit); border-color: var(--gold-lit); }

.enter {
  display: inline-flex; align-items: baseline; gap: calc(12 * var(--k));
  margin-top: calc(30 * var(--k)); text-decoration: none; cursor: pointer; color: var(--gold-lit);
  transition: transform 160ms var(--ease);
}
.enter:active { transform: scale(.97); }
.arrs { display: inline-flex; gap: 2px; font-size: calc(24 * var(--k)); font-weight: 500; line-height: 1; }
.arrs i { font-style: normal; display: inline-block; transition: transform 220ms var(--ease); }
.arrs i:nth-child(2) { transition-delay: 45ms; }
.arrs i:nth-child(3) { transition-delay: 90ms; }
.enter-w {
  font-style: italic; font-size: calc(26 * var(--k)); line-height: 1;
  padding-bottom: calc(5 * var(--k)); border-bottom: 1.2px solid var(--gold-lit);
  transition: border-color 200ms ease;
}
.enter.hit .arrs i { transform: translateX(7px); }
.enter.hit .enter-w { border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .enter:hover .arrs i { transform: translateX(4px); }
  .enter:hover .enter-w { border-color: var(--ink); }
  .enter:hover.hit .arrs i { transform: translateX(7px); }
}
.forgot { margin-top: calc(22 * var(--k)); font-size: calc(13 * var(--k)); color: var(--ink); opacity: .72; }
.forgot span { cursor: pointer; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.forgot span:hover { color: var(--gold-lit); border-color: var(--gold-lit); }
.help { margin-top: calc(8 * var(--k)); font-size: calc(12.5 * var(--k)); color: var(--ink); opacity: .55; }

/* ---------- entrance: photo first, then the tiles assemble as a mosaic, then text and form
   with a slight push-in. Everything stays in its initial state until .in is set. ---------- */
.pic .photo { opacity: 0; transform: scale(1.05); transform-origin: right center;
  transition: opacity 900ms ease, transform 2800ms var(--ease); }
.hero.in .pic .photo { opacity: 1; transform: none; }
/* .frame is placed by script exactly over the rendered image (object-fit: cover); everything inside is measured in image fractions */
.frame { position: absolute; z-index: 1; pointer-events: none; }
/* covers only over the chevron floor; outline traced from the image: wall edge x=67%, slab top y=44.4%, slab left edge x=52.1% */
.tiles {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(10, 1fr);
  clip-path: polygon(0 0, 67% 0, 67% 44.4%, 52.1% 44.4%, 52.1% 100%, 0 100%);
}
.tiles i { display: block; background: var(--green); box-shadow: 0 0 0 1px var(--green);
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1) var(--d, 0ms); }
.hero.in .tiles i { opacity: 0; }
/* sun glints on the water: rare single flashes at random spots, clipped to the water outline (spawned by script) */
.water { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(82.1% 26.1%, 100% 26.1%, 100% 100%, 82.1% 100%); }
.water b {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 22%, rgba(255,255,255,0) 62%);
  mix-blend-mode: screen; opacity: 0; filter: blur(.6px);
  animation: glint var(--g) ease-in-out forwards;
}
@keyframes glint { 0% { opacity: 0; scale: .5 } 40% { opacity: .9; scale: 1 } 100% { opacity: 0; scale: 1.3 } }
/* one swell for all blocks: same path and period, the wave runs top to bottom with a lag per block;
   the form moves as a single block, last */
.hero.live .loc, .hero.live .logo, .hero.live h1, .hero.live .sub, .hero.live .specs, .hero.live .access, .hero.live .mark {
  animation: swell 7s ease-in-out var(--lag, 0s) infinite alternate;
}
@keyframes swell { from { transform: translate(0, 0) } to { transform: translate(5px, -8px) } }
.hero .loc    { --lag: 0s; }
.hero .mark   { --lag: .15s; }
.hero .logo   { --lag: .35s; }
.hero h1      { --lag: .7s; }
.hero .sub    { --lag: 1.05s; }
.hero .specs  { --lag: 1.35s; }
.hero .access { --lag: 1.8s; }
/* entrance delays via --t: immune to selector specificity, and the order reads in one place */
.hero .loc, .hero .col .logo, .hero h1, .hero .sub, .hero .specs, .hero .mark {
  opacity: 0; transform: translateY(12px) scale(.985); transform-origin: left top;
  transition: opacity 700ms var(--ease) var(--t, 0ms), transform 1000ms var(--ease) var(--t, 0ms);
}
.hero .access > * { opacity: 0; transition: opacity 600ms var(--ease) var(--t, 0ms); }
.hero.in .loc, .hero.in .col .logo, .hero.in h1, .hero.in .sub, .hero.in .specs, .hero.in .mark { opacity: 1; transform: none; }
.hero.in .access > * { opacity: 1; }
.hero .loc { --t: 2900ms; }
.hero .mark { --t: 2980ms; }
.hero .col .logo { --t: 2980ms; }
.hero h1 { --t: 3080ms; }
.hero .sub { --t: 3200ms; }
.hero .specs { --t: 3280ms; }
.hero .access > :nth-child(1) { --t: 3400ms; }
.hero .access > :nth-child(2) { --t: 3460ms; }
.hero .access > :nth-child(3) { --t: 3500ms; }
.hero .access > :nth-child(4) { --t: 3540ms; }
.hero .access > :nth-child(5) { --t: 3620ms; }
.hero .access > :nth-child(6) { --t: 3680ms; }
.hero .access > :nth-child(7) { --t: 3720ms; }
/* reduced motion: the finished page at once */
@media (prefers-reduced-motion: reduce) {
  .pic .photo, .hero .loc, .hero .col .logo, .hero h1, .hero .sub, .hero .specs, .hero .mark, .hero .access > * { opacity: 1; transform: none; }
  .tiles, .water { display: none; }
  .hero * { animation: none !important; }
}

/* ---------- phone and portrait tablet: the image is turned portrait: pool and steps on top, chevron floor below,
   all text and the form on the floor. The top band equals the text column in height: grid 1fr 1fr. ---------- */
.band { display: none; }
@media (max-width: 760px), ((orientation: portrait) and (max-width: 1100px)) {
  .hero { display: grid; grid-template-rows: 1fr 1fr; }
  /* phone: text sits on the floor below the steps; light darkening toward the bottom for reading */
  .hero::before { background: linear-gradient(180deg, rgba(16,44,48,0) 46%, rgba(16,44,48,.22) 62%, rgba(16,44,48,.42) 100%); }
  .band { display: block; grid-row: 1; }
  .pic .photo { object-position: 80% 0; transform-origin: 50% 0; transform: translateY(-7%) scale(1.04);
    transition: opacity 900ms ease, transform 2600ms var(--ease); }
  .hero.in .pic .photo { transform: none; }
  .mark { top: 18px; right: 20px; font-size: 10px; }
  .col { grid-row: 2; align-self: start; width: 100%; padding: 6px 22px 44px; }
  .loc { font-size: 11px; letter-spacing: .16em; white-space: normal; }
  .logo { height: 68px; margin-top: 14px; }
  h1 { font-size: 32px; margin-top: 16px; }
  .sub { font-size: 15px; margin-top: 14px; }
  .specs { font-size: 11px; margin-top: 16px; letter-spacing: .12em; white-space: normal; }
  .access { width: 100%; margin-top: 32px; }
  .fr { height: 50px; margin-top: 12px; }
  .ph, .fr input { height: 40px; line-height: 40px; font-size: 16px; }
  .base { top: 44px; }
  .hint { font-size: 12.5px; margin-top: 8px; }
  .enter { margin-top: 28px; gap: 12px; padding: 4px 0; }
  .arrs { font-size: 26px; }
  .enter-w { font-size: 28px; padding-bottom: 5px; }
  .forgot { margin-top: 24px; font-size: 14px; }
  .help { margin-top: 10px; font-size: 13px; }
  /* outlines of the portrait image: pool on top, steps on the right down to 47.9%, floor below; cover grid 10x20 */
  .tiles { grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(20, 1fr);
    clip-path: polygon(0 100%, 0 33%, 44.4% 33%, 44.4% 47.9%, 100% 47.9%, 100% 100%); }
  .water { clip-path: polygon(26.1% 0, 100% 0, 100% 17.9%, 26.1% 17.9%); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }