*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{background:#050505;color:#fff}img{max-width:100%}
:root {
  --tg-bg: oklch(0.08 0 0); /* #050505 */
  --tg-fg: oklch(1 0 0);
  --tg-dim: oklch(1 0 0 / 55%);
  --tg-halo: oklch(1 0 0 / 7%);
}
html, body { background: var(--tg-bg); }

.tg-page {
  min-height: 100svh;
  background: var(--tg-bg);
  color: var(--tg-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(2rem, 6vh, 4rem) 1.5rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
.tg-soon {
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  letter-spacing: 0.6em; padding-left: 0.6em;
  text-transform: uppercase; font-weight: 200;
}
.tg-logo { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vh, 2rem); width: 100%; }
.tg-sign-wrap { position: relative; width: min(62vw, 34vh, 300px); aspect-ratio: 642 / 563; perspective: 900px; }
.tg-sign {
  position: relative; width: 100%; height: 100%; display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: tg-spin 18s linear infinite;
  will-change: transform;
}
.tg-halo {
  position: absolute; inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tg-halo) 0%, transparent 62%);
  filter: blur(20px);
  animation: tg-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
.tg-name { width: min(70vw, 360px); height: auto; display: block; }
.tg-contact {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-size: clamp(0.68rem, 1.4vw, 0.78rem); letter-spacing: 0.18em; text-align: center;
}
.tg-social { display: flex; gap: 1.5rem; margin-top: 0.4rem; }
.tg-link { color: var(--tg-dim); transition: color 0.4s ease; text-decoration: none; }
.tg-link:hover, .tg-link:focus-visible { color: var(--tg-fg); }
.tg-link:focus-visible { outline: 1px solid var(--tg-dim); outline-offset: 4px; }

.tg-reveal { animation: tg-reveal 2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tg-fade { animation: tg-fadein 2s ease 0.6s both; }

/* 0–8s still at 0°, 8–10s rotateY 360° ease-in-out, 10–18s still at 360° */
@keyframes tg-spin {
  0%, 44.444% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  55.556%, 100% { transform: rotateY(360deg); }
}
@keyframes tg-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes tg-reveal {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes tg-fadein { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tg-sign, .tg-halo, .tg-reveal, .tg-fade { animation: none; }
}