/* asana.art — coming soon
   ---------------------------------------------------------------- */

:root {
  --canvas:        #F6F1E8;
  --ink:           #2A2622;

  --sunrise-1:     #E8B79A;  /* soft peach   */
  --sunrise-2:     #D88C7A;  /* dusty rose   */
  --sunrise-3:     #C9A66B;  /* aged brass   */

  --bloom-opacity: 0.25;
  --bloom-scale:   1.55;     /* APPROVED: larger than brief default */
  --bloom-drift:   3%;
  --breath-amp:    1.008;
  --breath-period: 7s;
  --drift-period:  24s;
  --grain-opacity: 0.075;    /* APPROVED: stronger than brief default */

  --pad: clamp(24px, 4vw, 64px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.stage {
  position: fixed;
  inset: 0;
  padding: var(--pad);
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  overflow: hidden;
}

/* sunrise bloom ----------------------------------------------------------- */
.bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 120vw;
  max-width: 1600px;
  max-height: 1600px;
  transform: translate(-50%, -50%) scale(var(--bloom-scale));
  pointer-events: none;
  z-index: 0;
  opacity: var(--bloom-opacity);
  background:
    radial-gradient(circle at 38% 52%, var(--sunrise-1) 0%, transparent 38%),
    radial-gradient(circle at 62% 48%, var(--sunrise-2) 0%, transparent 42%),
    radial-gradient(circle at 50% 58%, var(--sunrise-3) 0%, transparent 50%);
  filter: blur(40px);
  animation: drift var(--drift-period) ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(calc(-50% - var(--bloom-drift)), -50%) scale(var(--bloom-scale)); }
  50%      { transform: translate(calc(-50% + var(--bloom-drift)), -50%) scale(var(--bloom-scale)); }
}

/* paper grain ------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* centered group ---------------------------------------------------------- */
.center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* wordmark — Lora 300 ----------------------------------------------------- */
.wordmark {
  font-family: 'Lora', 'Times New Roman', serif;
  font-weight: 300;
  font-size: clamp(3.5rem, 14vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.02em;   /* APPROVED: tighter than brief */
  color: var(--ink);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  animation: breath var(--breath-period) ease-in-out infinite;
  transform-origin: center;
  font-feature-settings: "liga" 0, "calt" 0;
}

@keyframes breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--breath-amp)); }
}

/* teaser — handwritten Caveat -------------------------------------------- */
.teaser {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: center;
  margin: 0;
  margin-top: 0.05em;
  opacity: 0.95;
}

/* reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bloom, .wordmark { animation: none; }
}