/* Hallmark · coming soon page · tone: quiet, luxurious · photo, one line, one button */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-night); color: var(--color-cream); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid oklch(85% 0.12 85); outline-offset: 3px; }

.soon { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; padding: var(--space-xl) var(--gutter); overflow: hidden; text-align: center; }
.soon__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 6% 92%; z-index: -2; }
.soon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, oklch(17.5% 0.012 55 / 0.55), oklch(17.5% 0.012 55 / 0.72)); }

/* The moving labyrinth: thin rings with gaps and short walls, each ring turning at its own slow speed */
.soon__maze { position: static; width: min(34vmin, 9.5rem); height: auto; color: var(--color-cream); opacity: 0.8; pointer-events: none; margin-bottom: var(--space-xs); }
.soon__maze .ring { transform-origin: 200px 200px; }
.soon__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-width: 40rem; }
h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 1.4rem + 6vw, 6.25rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; text-shadow: 0 1px 18px oklch(12% 0.01 55 / 0.7); }
.script { font-family: var(--font-script); font-weight: 400; font-size: 1.3em; line-height: 0; letter-spacing: 0.01em; }
.soon__line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); line-height: 1.2; }
.soon__tag { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(90% 0.025 88); }
.box {
  display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-xs);
  min-height: 3.25rem; padding: 0.7rem 2rem; border: var(--rule-hair) solid var(--color-cream); border-radius: var(--radius-btn);
  font-family: var(--font-label); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-cobalt); background: var(--color-cream); text-decoration: none; overflow-wrap: anywhere;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.box:hover { background: oklch(100% 0.01 90); transform: translateY(-1px); }

/* Phones held upright: the tartlet stays in the upper half of the screen and the text sits below it */
@media (max-aspect-ratio: 4/5) {
  .soon { place-items: end center; padding-bottom: var(--space-md); }
  .soon__bg { height: 124%; top: -23%; object-position: 51% 50%; }
  .soon::before { background: linear-gradient(to bottom, oklch(17.5% 0.012 55 / 0.1) 0%, oklch(17.5% 0.012 55 / 0.15) 40%, oklch(17.5% 0.012 55 / 0.82) 68%, oklch(17.5% 0.012 55 / 0.9) 100%); }
  .soon__maze { width: 4.75rem; margin-bottom: 0; }
  .soon__content { gap: var(--space-sm); }
}

/* Wide screens: text on the left, the tartlet large on the right */
@media (min-aspect-ratio: 5/4) {
  .soon { place-items: center start; padding-inline: clamp(2rem, 8vw, 9rem); text-align: left; }
  .soon__bg { width: 140%; max-width: none; object-position: 50% 36%; }
  .soon::before { background: linear-gradient(to right, oklch(17.5% 0.012 55 / 0.9) 0%, oklch(17.5% 0.012 55 / 0.78) 30%, oklch(17.5% 0.012 55 / 0.15) 60%, oklch(17.5% 0.012 55 / 0.05) 100%); }
  .soon__content { align-items: flex-start; max-width: 32rem; gap: var(--space-md); }
  .soon__maze { width: clamp(8rem, 13vw, 12rem); margin-bottom: var(--space-2xs); }
  h1 { font-size: clamp(3rem, 1.2rem + 4.2vw, 5.5rem); }
  .soon__tag { max-width: 24rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .soon__maze .ring { animation: maze-turn var(--dur) linear infinite var(--dir); }
  .maze-core { animation: maze-pulse 4.5s ease-in-out infinite; transform-origin: 200px 200px; }
  @keyframes maze-turn { to { transform: rotate(360deg); } }
  @keyframes maze-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.05); opacity: 0.6; } }
  .soon__bg { animation: soon-settle 22s var(--ease-out) both; }
  .soon__content > * { animation: soon-rise 1.3s var(--ease-out) both; }
  .soon__content > :nth-child(1) { animation-delay: 0.2s; }
  .soon__content > :nth-child(2) { animation-delay: 0.6s; }
  .soon__content > :nth-child(3) { animation-delay: 0.9s; }
  .soon__content > :nth-child(4) { animation-delay: 1.1s; }
  @keyframes soon-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
  @keyframes soon-settle { from { transform: scale(1.1); } to { transform: scale(1); } }
}