/* ─────────────────────────────────────────────────────────────────────
   Match AI Creative — coming soon
   Palette: near-black neutrals; color only where the logo puts it
   (iris triangle, glacier caret). Type: Orbitron / Instrument Sans /
   JetBrains Mono.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --void: #030304;
  --carbon: #0d0e13;
  --bone: #f2f1ee;
  --ash: rgba(242, 241, 238, 0.55);
  --faint: rgba(242, 241, 238, 0.28);
  --iris: #a78bfa;
  --glacier: #8fe3e6;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cycle: 12s; /* one full HUD loop */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--bone);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Stage: dark gradient floor + image as faint texture ───────────── */
.stage {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  isolation: isolate;
  /* Subtle gradient, dark end to end: faint cool light from the top */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--carbon) 0%, #08090c 45%, var(--void) 100%);
}

/* Image rides the dark floor via screen: pattern, not photo */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/bg.jpg") top center / cover no-repeat;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.45) brightness(0.24);
  transform-origin: top center; /* zoom grows down/sideways: top edge never crops */
  transform: scale(1.05);
  animation: drift 34s ease-in-out infinite alternate;
}

/* Film grain binds the layers */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@keyframes drift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}

/* ── Viewfinder corner marks ───────────────────────────────────────── */
.mark {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--faint);
  animation: appear 1.2s var(--ease-out) 0.9s both;
}

.mark.tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.mark.tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
.mark.bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
.mark.br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }

/* ── Wordmark ──────────────────────────────────────────────────────── */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand {
  position: relative;
  animation: rise 1s var(--ease-out) 0.1s both;
}

.logo {
  display: block;
  width: clamp(280px, 44vw, 540px);
  height: auto;
}

/* Light sweep: brightened copy of the logo, clipped to a thin moving band */
.shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: brightness(2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
  /* At rest the band is off-screen left */
  clip-path: polygon(-20% 0, -12% 0, -22% 100%, -30% 100%);
  animation: shine 5.5s linear 1.4s 1; /* one pass after the entrance, then rests */
}

@keyframes shine {
  0% {
    clip-path: polygon(-20% 0, -12% 0, -22% 100%, -30% 100%);
  }
  100% {
    clip-path: polygon(120% 0, 128% 0, 118% 100%, 110% 100%);
  }
}

/* ── Tagline ───────────────────────────────────────────────────────── */
.tagline {
  margin-top: clamp(2rem, 5vw, 2.8rem);
  font-size: clamp(0.95rem, 2vw, 1.06rem);
  font-weight: 400;
  color: var(--ash);
  animation: rise 1s var(--ease-out) 0.45s both;
}

/* ── Render HUD ────────────────────────────────────────────────────── */
.hud {
  margin-top: clamp(2.4rem, 6vw, 3.4rem);
  width: clamp(240px, 34vw, 340px);
  animation: rise 1s var(--ease-out) 0.65s both;
}

.bar {
  height: 2px;
  background: rgba(242, 241, 238, 0.12);
  overflow: hidden;
}

.bar .fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--iris), var(--glacier));
  transform-origin: left;
  animation: progress var(--cycle) linear forwards; /* one run, holds at 99 */
}

.readout {
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ash);
}

.phases {
  display: grid;
}

.phase {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  animation: var(--cycle) linear forwards; /* one run, ends on YAKINDA */
}

.phase.p1 { animation-name: ph1; }
.phase.p2 { animation-name: ph2; }
.phase.p3 { animation-name: ph3; }
.phase.p4 { animation-name: ph4; color: var(--bone); }

.caret {
  display: inline-block;
  width: 0.5em;
  height: 0.95em;
  margin-left: 0.45em;
  vertical-align: text-bottom;
  background: var(--glacier);
  animation: blink 1.1s steps(1, end) infinite;
}

/* HUD timeline — 12s, runs once and settles:
   0–20%   MODEL ISINIYOR    → 28
   –40%    SAHNE KURULUYOR   → 57
   –58%    KARELER İŞLENİYOR → 99
   –100%   YAKINDA (stays)   → 99 */
@keyframes progress {
  0%   { transform: scaleX(0); }
  20%  { transform: scaleX(0.28); }
  40%  { transform: scaleX(0.57); }
  58%  { transform: scaleX(0.99); }
  100% { transform: scaleX(0.99); }
}

@keyframes ph1 {
  0%, 1.5% { opacity: 0; }
  3%, 18% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

@keyframes ph2 {
  0%, 20% { opacity: 0; }
  22%, 38% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@keyframes ph3 {
  0%, 40% { opacity: 0; }
  42%, 56% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

@keyframes ph4 {
  0%, 58% { opacity: 0; }
  60%, 100% { opacity: 1; }
}

@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  position: absolute;
  bottom: clamp(1.4rem, 4vw, 2.2rem);
  left: 0;
  right: 0;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--faint);
  animation: appear 1.2s var(--ease-out) 0.9s both;
}

/* ── Entrances ─────────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Small screens ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .logo { width: min(78vw, 340px); }
  .hud { width: min(70vw, 300px); }
}

/* ── Reduced motion: settle on the final frame ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stage::before,
  .brand, .shine, .tagline, .hud, .footer, .mark,
  .bar .fill, .phase, .pct, .caret {
    animation: none;
  }
  .bar .fill { transform: scaleX(0.99); }
  .phase { opacity: 0; }
  .phase.p4 { opacity: 1; }
}