/* =========================================================
   ACE HIGH — the horse is the homepage.
   Aged sporting-print poster: warm sepia dark, engraved horse,
   film grain, minimal everything.
   ========================================================= */

:root {
  --ink: #0d0906;
  --ink-2: #14100a;
  --cream: #f3ead9;
  --cream-dim: rgba(243, 234, 217, 0.5);
  --gold: #e8b34a;
  --gold-soft: #c9a349;
  --gold-pale: #f4d788;
  --rust: #b4552f;
  --rust-dim: rgba(180, 85, 47, 0.35);

  --font-display: 'Bodoni', 'Bodoni Moda', 'Times New Roman', serif;
  --font-body: 'General Sans', -apple-system, 'Helvetica Neue', sans-serif;
}

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

html { background: var(--ink); }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- corner mark ---------- */

.mark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  padding: clamp(20px, 4vw, 36px);
  mix-blend-mode: difference;
}

.mark__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 0.5s ease, letter-spacing 0.5s ease;
}

.mark__link:hover .mark__word {
  color: var(--cream);
  letter-spacing: 0.34em;
}

/* ---------- hero / stage ---------- */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 62%, #17120c 0%, #120e09 30%, #0f0b07 50%, var(--ink) 72%, #060402 100%);
  overflow: hidden;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: 5;
}

.hero__grain {
  position: absolute;
  inset: -10%;
  opacity: 0.08;
  pointer-events: none;
  z-index: 4;
  background-image:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.6) 0deg 0.5deg, transparent 0.5deg 1deg);
  mix-blend-mode: overlay;
  animation: grainShift 1.4s steps(4) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1%, 0.5%); }
  50%  { transform: translate(0.5%, -1%); }
  75%  { transform: translate(-0.5%, -0.5%); }
  100% { transform: translate(0,0); }
}

/* ---------- the horse stage ---------- */

.holo {
  position: relative;
  width: min(88vw, 900px);
  height: min(56vw, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  z-index: 10;
}

.holo__horse {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- the horse flipbook ----------
   Eleven real 1878 Muybridge gallop-cycle photographs (rider removed,
   cross-frame aligned) are stepped hard-cut, like an actual
   zoopraxiscope reel -- never tweened or smoothed, so it reads as a
   genuine vintage motion-photography flipbook rather than an
   animated cartoon. The four material renders (sketch / blueprint /
   photo / metal) are pre-baked images derived from the SAME eleven
   silhouettes, so shape and scale never shift between finishes. Two
   stacked layers share one global frame clock and only ever differ
   by which finish is assigned to them -- the material wipe crossfades
   the layer, never the pose. */

.holo__rig-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.holo__rig-layer.is-active { opacity: 1; }

.rig-frame {
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: center;
  display: block;
  animation: rigBob 1.045s steps(11) infinite;
}

/* the whole horse settles gently through the stride -- a single,
   uniform bob shared by every stage, stepped (not eased) so it lands
   in sync with each hard-cut pose change */
@keyframes rigBob {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-3px); }
  50%  { transform: translateY(1px); }
  75%  { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}

.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.28;
  animation: scanMove 7s linear infinite;
}

@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}

/* ---------- upcoming projects (dark spotlit gallery) ---------- */

.projects {
  position: relative;
  z-index: 5;
  padding: clamp(64px, 12vw, 140px) clamp(24px, 6vw, 80px);
  background: var(--ink);
  border-top: 1px solid rgba(243, 234, 217, 0.06);
  text-align: center;
}

.projects__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: clamp(40px, 6vw, 64px);
}

.projects__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(56px, 8vw, 120px);
  max-width: 880px;
  margin: 0 auto;
}

.projects__logo {
  width: auto;
  max-width: 220px;
  max-height: 90px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects__logo:hover {
  transform: translateY(-4px) scale(1.04);
}

/* ---------- footer strip (reached only by scrolling) ---------- */

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px clamp(20px, 4vw, 36px) 34px;
  background: var(--ink);
  border-top: 1px solid rgba(243, 234, 217, 0.08);
}

.foot__tag,
.foot__mail,
.foot__copy {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.foot__mail {
  transition: color 0.3s ease;
}

.foot__mail:hover { color: var(--gold-pale); }

.foot__copy { opacity: 0.4; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__grain,
  .hero__scan,
  .rig-frame {
    animation: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .holo { width: 94vw; height: 66vw; min-height: 320px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .projects__grid { flex-direction: column; gap: 40px; max-width: 260px; margin: 0 auto; }
  .projects__logo { max-height: 64px; max-width: 200px; }
}