/* THIRD HALF — "The Dividing Line" */

@font-face {
  font-family: "Bodoni Fallback";
  src: local("Bodoni 72"), local("Didot"), local("Bodoni MT"), local("Georgia");
  size-adjust: 96%;
}

:root {
  --bg: #050505;
  --fg: #f0efea;
  --mute: #8f8f8f;
  --m: clamp(1.5rem, 7vw, 9rem);
  --ml: max(var(--m), env(safe-area-inset-left));
  --mr: max(var(--m), env(safe-area-inset-right));
  --fs: min(clamp(3.4rem, 9.5vw + 1.75rem, 300px), 30vh);
  --gap: calc(var(--fs) * 0.2);
  --px: 0;
  --py: 0;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

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

html {
  height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Bodoni Moda", "Bodoni Fallback", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #2a2a2a;
  color: var(--fg);
}

main {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.bg,
.glow,
.grain,
.line {
  position: absolute;
  pointer-events: none;
}

/* Base tonal field */
.bg {
  inset: 0;
  background: linear-gradient(180deg, #080808 0%, #050505 55%, #040404 100%);
  animation: fade 2.4s ease-out both;
}

/* One soft light behind the wordmark — a gradient, no filter */
.glow {
  top: 50%;
  left: 28%;
  width: 120vmax;
  height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022) 38%, transparent 100%);
  translate: calc(var(--px) * 28px) calc(var(--py) * 28px);
  animation: fade 3.2s ease-out 0.2s both, drift 52s ease-in-out 3.4s infinite alternate;
  will-change: transform;
}

/* Static grain tile, only translated */
.grain {
  inset: -50%;
  width: 200%;
  height: 200%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
  opacity: 0.05;
  animation: grain 36s linear infinite;
  will-change: transform;
}

/* The identity element: the dividing line */
.line {
  top: 50%;
  left: var(--ml);
  right: var(--mr);
  height: 1px;
  background: var(--fg);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: 0 50%;
  translate: calc(var(--px) * -5px) calc(var(--py) * 4px);
  animation: draw 1.8s var(--ease) 0.3s forwards, pulse 10s ease-in-out 2.1s infinite;
}

h1 {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: var(--fs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--fg);
}

.w {
  position: absolute;
  left: calc(var(--ml) - 0.035em);
  white-space: nowrap;
  opacity: 0;
  animation: reveal 1.6s var(--ease) both;
}

.w-a {
  bottom: calc(50% + var(--gap) - 0.18em);
  animation-delay: 1.1s;
  translate: calc(var(--px) * 10px) calc(var(--py) * 8px);
}

.w-b {
  top: calc(50% + var(--gap) - 0.12em);
  animation-delay: 1.35s;
  translate: calc(var(--px) * 7px) calc(var(--py) * 6px);
}

.soon {
  position: absolute;
  right: var(--mr);
  top: calc(50% + var(--gap) + var(--fs) * 0.7 + var(--gap) - 0.12em);
  margin: 0 -0.42em 0 0;
  font-size: clamp(0.6875rem, 0.45vw + 0.5rem, 0.9375rem);
  line-height: 1;
  letter-spacing: 0.42em;
  white-space: nowrap;
  color: var(--mute);
  opacity: 0;
  translate: calc(var(--px) * 4px) calc(var(--py) * 3px);
  animation: reveal-soon 1.4s var(--ease) 2.2s both;
}

/* Wide grid: COMING SOON shares the top alignment line with HALF, anchored to the line's right end */
@media (min-width: 600px) {
  .soon { top: calc(50% + var(--gap) - 0.12em); }
}

/* from-only: each element settles at its own resting opacity */
@keyframes fade {
  from { opacity: 0; }
}

@keyframes draw {
  to { transform: scaleX(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.25; }
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

@keyframes grain {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-160px, -160px, 0); }
}

@keyframes reveal {
  from {
    opacity: 0;
    letter-spacing: 0.16em;
    transform: translateY(0.12em);
  }
  to {
    opacity: 1;
    letter-spacing: 0.06em;
    transform: translateY(0);
  }
}

@keyframes reveal-soon {
  from {
    opacity: 0;
    letter-spacing: 0.52em;
    transform: translateY(0.6em);
  }
  to {
    opacity: 1;
    letter-spacing: 0.42em;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg,
  .glow,
  .grain,
  .line,
  .w,
  .soon {
    animation: none;
    translate: none;
    transform: none;
    opacity: 1;
  }
  .grain { opacity: 0.05; }
  .line,
  .w,
  .soon { animation: fade 0.5s ease-out both; }
  .line { opacity: 0.35; }
  .soon { animation-delay: 0.1s; }
}