/* ============================================================
   Velzery — coming soon
   Palette: warm bronze ground, champagne gold, ivory type,
   a lively aurora of emerald and burgundy light beneath it.
   ============================================================ */

:root{
  --ink:        #241d14;
  --ink-2:      #2e2518;
  --ivory:      #faf6ee;
  --ivory-dim:  #e4dbc8;
  --gold:       #dcb676;
  --gold-soft:  #f0d9a3;
  --emerald:    #2f6350;
  --burgundy:   #6a2a3a;

  --line: rgba(244,239,230,0.14);

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  background: var(--ink);
  color: var(--ivory);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{
  background: var(--gold);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Layered background: aurora canvas -> grain -> vignette -> spotlight
   --------------------------------------------------------------- */

#aurora{
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  filter: blur(38px) saturate(150%) brightness(1.1);
  z-index: 0;
  transform: translateZ(0);
}

#motes{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: screen;
}

.grain{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.vignette{
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 125% 95% at 50% 40%, transparent 46%, rgba(16,12,7,0.42) 100%),
    linear-gradient(rgba(16,12,7,0) 60%, rgba(16,12,7,0.5) 100%);
}

.spotlight{
  position: fixed;
  z-index: 4;
  width: 780px;
  height: 780px;
  left: 0;
  top: 0;
  margin-left: -390px;
  margin-top: -390px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(220,182,118,0.22) 0%, rgba(220,182,118,0.09) 35%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  will-change: transform;
}
.spotlight.is-active{ opacity: 1; }

/* ---------------------------------------------------------------
   Stage
   --------------------------------------------------------------- */

.stage{
  position: relative;
  z-index: 5;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
}

/* Monogram mark */

.mark{
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: rise 1200ms var(--ease-out) 200ms forwards;
}

.mark__ring{
  width: 52px;
  height: 52px;
  animation: spin 46s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .mark__ring{ animation: none; }
}

.mark__svg{ width: 100%; height: 100%; overflow: visible; }
.mark__circle{
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.6;
  opacity: 0.55;
  stroke-dasharray: 2 6;
}
.mark__glyph{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 34px;
  fill: var(--gold-soft);
  transform: rotate(0deg);
  transform-box: fill-box;
  transform-origin: center;
}

/* Hero */

.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 46rem;
}

.kicker{
  margin: 0 0 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
  opacity: 0;
  animation: rise 1000ms var(--ease-out) 320ms forwards;
}
.kicker span{ padding-left: 0.42em; } /* optical compensation for trailing tracking */

.wordmark{
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(3.2rem, 12vw, 8.2rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--ivory);
  overflow: hidden;
}
.wordmark__line{
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  animation: reveal 1100ms var(--ease-out) 460ms forwards;
  background: linear-gradient(100deg, var(--ivory) 30%, var(--gold-soft) 48%, var(--ivory) 66%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline{
  margin: 1.5rem 0 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ivory-dim);
  opacity: 0;
  animation: rise 1000ms var(--ease-out) 760ms forwards;
}

.divider{
  margin: 2.6rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: rise 900ms var(--ease-out) 900ms forwards;
}
.divider span{
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), transparent);
}

.status{
  margin: 0;
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  line-height: 1.75;
  color: var(--ivory-dim);
  font-weight: 300;
  letter-spacing: 0.01em;
  opacity: 0;
  animation: rise 1000ms var(--ease-out) 1020ms forwards;
}
.status em{
  color: var(--gold-soft);
  font-style: italic;
  font-family: 'Fraunces', serif;
}

/* Footer */

.foot{
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 88vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(217,210,196,0.42);
  opacity: 0;
  animation: fade 1200ms var(--ease-out) 1300ms forwards;
}
.foot__sep{ color: rgba(217,210,196,0.25); }

/* ---------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------- */

@keyframes rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes reveal{
  from{ opacity: 0; transform: translateY(60%); background-position: 100% 0; }
  60%{ background-position: 40% 0; }
  to{ opacity: 1; transform: translateY(0); background-position: 0% 0; }
}
@keyframes fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   Reduced motion / transparency / contrast
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .mark, .kicker, .wordmark__line, .tagline, .divider, .status, .foot{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    background-position: 0% 0 !important;
  }
  .spotlight{ display: none; }
}

@media (prefers-reduced-transparency: reduce){
  .grain{ display: none; }
  #aurora{ opacity: 0.5; }
}

@media (prefers-contrast: more){
  .status, .tagline{ color: var(--ivory); }
}

/* ---------------------------------------------------------------
   Small screens
   --------------------------------------------------------------- */

@media (max-width: 480px){
  .mark{ top: 5vh; }
  .mark__ring{ width: 42px; height: 42px; }
  .status br{ display: none; }
  .foot{ bottom: 3vh; }
}

@media (max-height: 640px){
  .mark{ display: none; }
  .divider{ margin: 1.6rem 0; }
}