:root {
  /* Roman inscriptional capitals for labels; a refined Garamond for display & prose */
  --roman: 'Cinzel', 'Trajan Pro', serif;
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, serif;
  --cream: #f6e9d4;
  --gold: #e7b66a;
  --cocoa: #1a0d07;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;         /* no pull-to-refresh / bounce */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;       /* long-press on the river must not open the iOS callout */
  -webkit-user-select: none;
  user-select: none;
  background: var(--cocoa);
  color: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'dlig';
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.loader.gone { visibility: hidden; }

.curtain {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: #0b0503;
  transition: transform 2.2s cubic-bezier(0.77, 0, 0.18, 1);
}
.curtain.top { top: 0; background: linear-gradient(180deg, #070302 0%, #140905 100%); }
.curtain.bottom { bottom: 0; background: linear-gradient(0deg, #070302 0%, #140905 100%); }
.loader.open .curtain.top { transform: translateY(-101%); }
.loader.open .curtain.bottom { transform: translateY(101%); }

.loader-glow {
  position: absolute;
  width: 90vmax; height: 90vmax;
  background: radial-gradient(circle, rgba(201, 135, 60, 0.20) 0%, rgba(120, 60, 20, 0.08) 35%, transparent 65%);
  animation: breathe 6s ease-in-out infinite;
  transition: opacity 1.4s ease;
}
.loader-grain {
  position: absolute;
  inset: -50%;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.loader.complete .loader-glow, .loader.complete .loader-grain { opacity: 0; }

/* hairline that draws across the seam before the curtains part */
.loader-seam {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e7b66a 20%, #fff1cf 50%, #e7b66a 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(231, 182, 106, 0.55);
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.6s, opacity 1.2s ease 0.5s;
}
.loader.complete .loader-seam { transform: scaleX(1); }
.loader.open .loader-seam { opacity: 0; }

/* Outer wrapper handles the exit; inner wrapper handles the entrance.
   (A fill-mode animation on the same element would pin opacity and block the fade.) */
.loader-content {
  position: relative;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), filter 1s ease;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: rise 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.loader.complete .loader-content { opacity: 0; transform: translateY(-18px) scale(0.97); filter: blur(8px); }

.crest { position: relative; width: 124px; height: 124px; margin-bottom: 26px; }
.crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest-ring { animation: spin 40s linear infinite; }
.crest-ring circle { fill: none; stroke: rgba(231, 182, 106, 0.55); stroke-width: 0.6; }
.crest-ring .dots { stroke: rgba(231, 182, 106, 0.7); stroke-width: 1.2; stroke-dasharray: 0.6 4.5; stroke-linecap: round; }
.crest-body { filter: drop-shadow(0 0 14px rgba(231, 160, 80, 0.35)); }

.loader-eyebrow {
  font-family: var(--roman);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.85em;
  margin-right: -0.85em; /* optically centre tracked caps */
  text-transform: uppercase;
  color: rgba(246, 233, 212, 0.7);
}
.loader-title {
  position: relative;
  overflow: hidden;
  margin: 6px 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(60px, 10vw, 118px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  padding: 0 0.15em;
}
/* gilded title with a light sweep travelling through the gradient itself */
.loader-title span {
  background: linear-gradient(100deg, #9c6a2c 0%, #d9a24b 30%, #d9a24b 40%, #fff1cf 48%, #d9a24b 56%, #d9a24b 66%, #9c6a2c 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 3.6s cubic-bezier(0.45, 0, 0.2, 1) 0.8s infinite;
}
.loader-est {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--roman);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #c9a066;
}
.loader-est i { display: block; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, #c9a066); }
.loader-est i:last-child { transform: scaleX(-1); }

.loader-progress {
  position: relative;
  width: 220px;
  height: 1px;
  margin-top: 46px;
  background: rgba(231, 182, 106, 0.16);
  overflow: hidden;
}
.loader-progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #9c6a2c, #f7dc9c, #9c6a2c);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.loader-count {
  margin-top: 14px;
  font-family: var(--roman);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  color: rgba(246, 233, 212, 0.45);
  font-variant-numeric: tabular-nums;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes sweep { 0% { background-position: 100% 0; } 65%, 100% { background-position: 0% 0; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -4%); }
  60% { transform: translate(-3%, -2%); } 80% { transform: translate(3%, 5%); } 100% { transform: translate(0, 0); }
}

/* Page chrome arrives after the curtains part, in sequence */
.nav, .hero:not(.hero-under) .eyebrow, .hero:not(.hero-under) h1, .hero:not(.hero-under) .sub {
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav { transition-delay: 1.6s; }
.hero:not(.hero-under) .eyebrow { transition-delay: 1.1s; }
.hero:not(.hero-under) h1 { transition-delay: 1.3s; }
.hero:not(.hero-under) .sub { transition-delay: 1.6s; }
body.loading .nav { opacity: 0; transform: translateY(-10px); }
body.loading .hero:not(.hero-under) .eyebrow,
body.loading .hero:not(.hero-under) h1,
body.loading .hero:not(.hero-under) .sub { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .loader-grain, .crest-ring, .loader-title span, .loader-glow, .brand-dots, .brand-cacao { animation: none; }
}

/* Soft scrims so fine type stays legible over the bright scene */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 6, 3, 0.62) 0%, rgba(12, 6, 3, 0) 150px),
    radial-gradient(120% 70% at 0% 100%, rgba(12, 6, 3, 0.72) 0%, rgba(12, 6, 3, 0.35) 35%, rgba(12, 6, 3, 0) 65%);
  transition: opacity 1.5s ease;
}
body.loading::before { opacity: 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
/* Maison lockup: gilded crest · hairline · stacked name */
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  text-decoration: none;
}
.brand-crest {
  width: 46px;
  height: 46px;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(231, 160, 80, 0.3));
}
.brand-dots { transform-origin: 24px 24px; animation: spin 60s linear infinite; }
.brand:hover .brand-dots { animation-duration: 12s; }
.brand-rule {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(231, 182, 106, 0.85) 30%, rgba(231, 182, 106, 0.85) 70%, transparent);
}
.brand-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.brand-maison {
  font-family: var(--roman);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: rgba(246, 233, 212, 0.85);
  margin: 0 0 5px 2px;
}
.brand-cacao {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: 0.005em;
  padding-right: 0.08em; /* keep the italic 'o' inside the gradient clip */
  background: linear-gradient(100deg, #b07a35 0%, #e2ad57 30%, #e2ad57 42%, #fff1cf 50%, #e2ad57 58%, #e2ad57 70%, #a8712f 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 7s cubic-bezier(0.45, 0, 0.2, 1) 3s infinite;
}

/* ---------- hero ---------- */
.hero {
  position: fixed;
  left: 48px;
  bottom: 64px;
  z-index: 10;
  max-width: 640px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 30px rgba(0, 0, 0, 0.6);
}
.eyebrow {
  font-family: var(--roman);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #f0c987;
  margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.hero h1 em { color: var(--gold); font-weight: 400; }
.sub {
  margin-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  opacity: 0.8;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---------- dive ---------- */
.hero { transition: opacity 0.9s ease, transform 0.9s ease; }
body.pulling .hero:not(.hero-under) { opacity: 0; transform: translateY(12px); }
.hero-under { opacity: 0; transform: translateY(16px); pointer-events: none; }
body.under .hero:not(.hero-under) { opacity: 0; }
body.under .hero-under { opacity: 1; transform: none; transition-delay: 1.2s; }
body.under .hero-under .surface-btn { pointer-events: auto; }

.surface-btn {
  margin-top: 26px;
  font: 500 11px/1 var(--roman);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(26, 13, 7, 0.35);
  border: 1px solid rgba(231, 182, 106, 0.6);
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.3s;
}
.surface-btn:hover { background: rgba(231, 182, 106, 0.15); }


@media (max-width: 720px) {
  .nav {
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  }
  .brand { gap: 12px; }
  .brand-crest { width: 38px; height: 38px; }
  .brand-rule { height: 32px; }
  .brand-maison { font-size: 9px; letter-spacing: 0.55em; margin-bottom: 4px; }
  .brand-cacao { font-size: 28px; }

  .hero {
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    bottom: max(36px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .eyebrow { font-size: 10px; letter-spacing: 0.3em; line-height: 1.7; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); line-height: 1; }
  .sub { font-size: 17px; margin-top: 16px; }
  .surface-btn { margin-top: 22px; padding: 14px 24px; }

  /* deeper scrim so type holds up over the scene on a small screen */
  body::before {
    background:
      linear-gradient(180deg, rgba(12, 6, 3, 0.7) 0%, rgba(12, 6, 3, 0) 120px),
      linear-gradient(0deg, rgba(12, 6, 3, 0.78) 0%, rgba(12, 6, 3, 0.4) 28%, rgba(12, 6, 3, 0) 50%);
  }

  .loader-est { font-size: 10px; letter-spacing: 0.3em; gap: 10px; }
  .loader-est i { width: 24px; }
  .loader-progress { width: 180px; }
}