/* TopCar teaser — full-screen interactive flag + mark lockup + "Coming Soon". */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #050608;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}

/* ---- Background flag + overlays ------------------------------------------- */
#flag { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* Animated film grain over the whole composition (adds realistic texture). */
.dither {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1.7 0 0 0 -0.35  1.7 0 0 0 -0.35  1.7 0 0 0 -0.35  0 0 0 0 1'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 130px 130px;
  animation: grain 0.6s steps(1) infinite;
}
@keyframes grain {
  0%, 100% { background-position: 0 0; }
  12% { background-position: -13px 8px; }
  24% { background-position: 10px -12px; }
  36% { background-position: -8px 13px; }
  48% { background-position: 14px 6px; }
  60% { background-position: -12px -9px; }
  72% { background-position: 7px 11px; }
  84% { background-position: -6px -7px; }
}
@media (prefers-reduced-motion: reduce) { .dither { animation: none; } }
.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.62) 100%);
}

/* ---- Centered lockup ------------------------------------------------------ */
.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;            /* let the cursor reach the flag canvas */
  padding: 24px;
}
/* Soft dark scrim so the mark + tagline + "Coming Soon" stay legible over the flag. */
.stage::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(90vmin, 640px); height: min(90vmin, 640px);
  background: radial-gradient(circle, rgba(5,6,8,0.78) 0%, rgba(5,6,8,0.5) 28%, rgba(5,6,8,0.18) 46%, transparent 64%);
  pointer-events: none;
}
.lockup {
  position: relative;
  width: min(56vmin, 300px); height: min(56vmin, 300px);
}

/* Rotating tagline ring */
.ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform-origin: 50% 50%;
  animation: ringIn 0.9s ease-out 0.25s forwards, ringSpin 28s linear infinite;
}
.ring text { fill: rgba(250,250,250,0.6); }
@keyframes ringIn { to { opacity: 1; } }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* The mark, centered inside the ring */
.mark {
  position: absolute; top: 50%; left: 50%;
  width: 46%; height: 46%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.m-circle, .m-bar, .m-leg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-circle { animation: markDraw 1.35s cubic-bezier(0.55, 0, 0.2, 1) 0.30s forwards; }
.m-bar    { animation: markDraw 1.35s cubic-bezier(0.55, 0, 0.2, 1) 0.54s forwards; }
.m-leg    { animation: markDraw 1.35s cubic-bezier(0.55, 0, 0.2, 1) 0.54s forwards; }
.m-star   { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0;
            animation: markStar 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards; }
@keyframes markDraw { to { stroke-dashoffset: 0; } }
@keyframes markStar { 0% { opacity: 0; transform: scale(0.35); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* Shine sweep across the mark, after it draws in (then repeats subtly) */
.mark-shine {
  position: absolute; top: 50%; left: 50%;
  width: 46%; height: 46%;
  transform: translate(-50%, -50%);
  pointer-events: none; overflow: hidden;
  -webkit-mask: url(./assets/tc-icon_updated.svg) center / contain no-repeat;
          mask: url(./assets/tc-icon_updated.svg) center / contain no-repeat;
}
.mark-shine::before {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 48%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.92) 50%, transparent 100%);
  transform: translateX(-240%) skewX(-14deg);
  mix-blend-mode: screen;
  animation: markShine 7s ease-in-out 2.1s infinite;
}
@keyframes markShine {
  0%   { transform: translateX(-240%) skewX(-14deg); }   /* wait off the left   */
  13%  { transform: translateX(430%)  skewX(-14deg); }   /* sweep fully across   */
  100% { transform: translateX(430%)  skewX(-14deg); }   /* rest off the right   */
}

/* "Coming Soon" */
.soon {
  margin: clamp(30px, 5.5vmin, 60px) 0 0;
  padding-left: 0.42em;                 /* offset the trailing letter-spacing */
  font-size: clamp(11px, 1.5vmin, 14px);
  font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(250,250,250,0.5);
  opacity: 0;
  animation: soonIn 1s ease-out 2.3s forwards, soonPulse 4.5s ease-in-out 3.4s infinite;
}
@keyframes soonIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 0.5; transform: translateY(0); } }
@keyframes soonPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.32; } }

@media (prefers-reduced-motion: reduce) {
  .ring { animation: ringIn 0.9s ease-out forwards; }
  .mark-shine::before { animation: none; }
  .soon { animation: soonIn 1s ease-out 0.4s forwards; }
}