/* The front door (welcome.html). The yacht fills the screen and turns; the ways in are separate pieces of glass floating over it, each
   nearly clear, with a thin light edge, no card around them and no colour of their own. System faces only (the pages' policy
   allows no others). */
:root {
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.78);
  --night: #0a1126;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); font-family: var(--sans); }
body.door { position: relative; overflow: hidden; min-height: 100dvh; background: radial-gradient(120% 80% at 30% 10%, #2b2f55 0%, #141a36 45%, var(--night) 100%); }
.door-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The world behind everything, in the light of the hour in Limassol; it fades in once it has drawn. */
.door-world { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity 1.8s ease; }
/* A swipe before she shows would turn her unseen, and she would come in spinning: she answers a finger once she is there. */
body.lit .door-world { opacity: 1; pointer-events: auto; }
/* Only enough shade to read words by: the top corner and the foot. */
.door-veil { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(110% 70% at 35% 52%, rgba(255, 176, 96, 0.14) 0%, rgba(255, 176, 96, 0) 62%),
  linear-gradient(180deg, rgba(8, 14, 32, 0.3) 0%, rgba(8, 14, 32, 0) 18%, rgba(8, 14, 32, 0) 68%, rgba(26, 14, 8, 0.4) 100%); }

.door-brand { position: fixed; z-index: 3; top: max(18px, env(safe-area-inset-top)); left: max(22px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px;
  font: italic 400 21px var(--serif); letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.door-brand img { border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }

/* One quiet line at the foot of the left. */
.door-line { position: fixed; z-index: 2; left: max(22px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); margin: 0; display: grid; gap: 6px; max-width: 420px;
  font: italic 400 20px/1.4 var(--serif); letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.door-hint { font: 400 12.5px var(--sans); letter-spacing: 0.04em; color: var(--muted); transition: opacity 1.2s; }
body.in.hushed .door-hint { opacity: 0; }

/* The glass: nearly clear, brighter at its upper edge, its own thin rim. */
.glass { color: var(--ink); border: 1px solid rgba(255, 236, 205, 0.36); border-radius: 18px;
  background-color: rgba(8, 14, 32, 0.16);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(8, 14, 32, 0.12) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.5), 0 10px 34px rgba(30, 12, 0, 0.28);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

.door-ways { position: fixed; z-index: 4; right: max(32px, env(safe-area-inset-right)); top: 50%; width: min(340px, calc(100vw - 40px)); transform: translateY(-50%); display: grid; gap: 22px; }
.door-visit { display: grid; gap: 3px; padding: 20px 24px; text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s, border-color 0.3s; }
.door-name { font: 400 26px var(--serif); letter-spacing: 0.01em; }
.door-note { font: 300 13.5px var(--sans); letter-spacing: 0.03em; color: var(--muted); }
.door-visit:hover, .door-visit:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.6); background: linear-gradient(145deg, rgba(255, 240, 215, 0.3), rgba(255, 240, 215, 0.08) 60%, rgba(8, 14, 32, 0.1)); outline: none; }

.door-label { margin: 0 0 8px 6px; font: 500 11.5px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.door-auth { display: grid; gap: 10px; }
.door-btn { min-height: 48px; padding: 0 20px; font: 400 14.5px var(--sans); letter-spacing: 0.04em; cursor: pointer; transition: transform 0.25s, background 0.25s, border-color 0.25s, opacity 0.25s; }
.door-btn:hover:not(:disabled), .door-btn:focus-visible { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.6); background: linear-gradient(145deg, rgba(255, 240, 215, 0.3), rgba(255, 240, 215, 0.08) 60%, rgba(8, 14, 32, 0.1)); outline: none; }
.door-btn:disabled { opacity: 0.72; cursor: default; }
.door-out { margin: 8px 0 0 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 300 12.5px var(--sans); letter-spacing: 0.04em; text-decoration: underline; cursor: pointer; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.door-out:hover, .door-out:focus-visible { color: var(--ink); outline: none; }
.door-mailform { margin-top: 10px; }
.door-partner-link { display: flex; align-items: center; justify-content: center; margin-top: 10px; text-decoration: none; }
.door-partner-link[hidden], .door-mailform[hidden] { display: none; }
.door-soon { font: 300 12.5px var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.door-meet-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.door-meet-row input { min-width: 0; min-height: 48px; padding: 0 16px; font: 300 14.5px var(--sans); letter-spacing: 0.02em; }
.door-meet-row input::placeholder { color: rgba(255, 255, 255, 0.6); }
.door-meet-row input:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
.door-warn { margin: 8px 0 0 6px; font: 400 12.5px/1.4 var(--sans); color: #ffd9c2; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.door-warn:empty { display: none; }
.door-foot { margin: 0; text-align: center; font: 300 12.5px var(--sans); letter-spacing: 0.04em; }
.door-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.door-foot a:hover { color: var(--ink); }

/* They arrive one after another once the page is up. */
.door-brand, .door-line, .door-ways > * { opacity: 0; }
body.in .door-brand { animation: door-in 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.in .door-line { animation: door-in 1s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.in .door-ways > * { animation: door-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.in .door-ways > :nth-child(1) { animation-delay: 0.8s; }
body.in .door-ways > :nth-child(2) { animation-delay: 0.95s; }
body.in .door-ways > :nth-child(3) { animation-delay: 1.1s; }
body.in .door-ways > :nth-child(4) { animation-delay: 1.25s; }
@keyframes door-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* A phone: the pieces of glass lie along the foot, the yacht above them. */
@media (max-width: 820px) {
  .door-ways { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; transform: none; gap: 14px; }
  .door-line { top: max(64px, calc(env(safe-area-inset-top) + 50px)); bottom: auto; left: max(22px, env(safe-area-inset-left)); right: 22px; max-width: none; font-size: 16px; }
  .door-visit { padding: 14px 20px; }
  .door-name { font-size: 23px; }
  .door-note { display: none; }
  .door-auth { grid-template-columns: 1fr 1fr; gap: 8px; }
  .door-btn { min-height: 44px; padding: 0 8px; font-size: 14px; }
  .door-label { margin-bottom: 6px; }
  .door-meet-row input { min-height: 44px; }
  .door-soon { display: none; }
}
/* A business's card open over the yacht takes the foot of a phone: the ways in wait, and come back when it is closed. */
.door-line { transition: opacity 0.35s ease; }
body.card-open .door-line { opacity: 0 !important; animation: none; }
@media (max-width: 820px) {
  .door-ways { transition: opacity 0.35s ease; }
  body.card-open .door-ways { opacity: 0 !important; pointer-events: none; animation: none; }
}
@media (max-width: 820px) and (max-height: 700px) { .door-foot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .door-world { transition: none; }
  body.in .door-brand, body.in .door-line, body.in .door-ways > * { animation: none; opacity: 1; }
}