/* ==========================================================================
   tate.css — the fan page as a blacked-out arena at 111 BPM.

   Where /sabrina is bright and puts her face on every surface, this one keeps
   the lights off: the page is a dark stage, her face wall only shows where the
   spotlight (your cursor) lands, everything moves on the beat of Greedy, and
   scrolling fast drives a speedometer into the redline.

   Loaded only by tate.html and scoped to .walju-fan--tate, so the shared fan
   styles in landing.css and /sabrina are left exactly as they were.

   Assets, cut from the photos already in assets/images: tate-face1..5.jpg are
   head crops, one per look, tate-face6..10.jpg are the same five mirrored, and
   tate-wallpaper.jpg is a 4x4 tile of all ten.
   ========================================================================== */

/* Registered so the no-JS sweep can animate them; JS just overwrites them. */
@property --tate-x { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --tate-y { syntax: '<length-percentage>'; inherits: true; initial-value: 40%; }

body.walju-fan--tate {
  --tate-wall: url('../assets/images/tate-wallpaper.jpg');
  --tate-f1: url('../assets/images/tate-face1.jpg');
  --tate-f2: url('../assets/images/tate-face2.jpg');
  --tate-f3: url('../assets/images/tate-face3.jpg');
  --tate-f4: url('../assets/images/tate-face4.jpg');
  --tate-f5: url('../assets/images/tate-face5.jpg');
  --tate-f6: url('../assets/images/tate-face6.jpg');
  --tate-f7: url('../assets/images/tate-face7.jpg');
  --tate-f8: url('../assets/images/tate-face8.jpg');
  --tate-f9: url('../assets/images/tate-face9.jpg');
  --tate-f10: url('../assets/images/tate-face10.jpg');

  --tate-black: #05080c;
  --tate-panel: rgba(5, 8, 12, .9);
  --tate-ice: var(--fan-accent);
  --tate-red: #ff2d3d;
  --tate-chrome: linear-gradient(180deg, #ffffff 0%, #c9d6df 38%, #6f8594 52%, #e8f1f6 70%, #9fb3c1 100%);

  /* Greedy is 111 BPM; everything that pulses pulses on this. */
  --tate-beat: calc(60s / 111);
  --tate-face: 84px;
  --tate-spot: 230px;
  /* 0 at rest, 1 flat out. Set by js/tate.js from scroll speed. */
  --tate-speed: 0;

  position: relative;
  isolation: isolate;
  background: var(--tate-black);
  color: #e8f1f6;
}

body.walju-fan--tate ::selection { background: var(--tate-ice); color: var(--tate-black); }

/* --------------------------------------------------------------------------
   Fixed layers: the spotlight, the strobe, the speed lines, the HUD
   -------------------------------------------------------------------------- */

/* Her face wall covers the whole page, but you only see it where the light is.
   Without a pointer (or without JS) the light sweeps the stage on its own. */
.tate-spot {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--tate-wall) 0 0 / calc(var(--tate-face) * 4);
  -webkit-mask-image: radial-gradient(circle var(--tate-spot) at var(--tate-x) var(--tate-y), #000 0 45%, rgba(0, 0, 0, .35) 70%, transparent 100%);
  mask-image: radial-gradient(circle var(--tate-spot) at var(--tate-x) var(--tate-y), #000 0 45%, rgba(0, 0, 0, .35) 70%, transparent 100%);
  animation: tate-sweep 11s ease-in-out infinite alternate;
}

/* A pointer takes over the light, and the sweep stops. */
.tate-spot.is-tracking { animation: none; }

@keyframes tate-sweep {
  0% { --tate-x: 12%; --tate-y: 30%; }
  33% { --tate-x: 70%; --tate-y: 62%; }
  66% { --tate-x: 38%; --tate-y: 78%; }
  100% { --tate-x: 88%; --tate-y: 24%; }
}

/* A soft flash of a single face on every other beat. It stays well under one
   flash a second and never goes above a quarter opacity. */
.tate-strobe {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: var(--tate-f1) center / min(90vw, 90vh) no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: tate-flash calc(var(--tate-beat) * 2) linear infinite;
}

@keyframes tate-flash {
  0% { opacity: .24; filter: grayscale(1) contrast(1.4); }
  18%, 100% { opacity: 0; }
}

/* Streaks that show up when you scroll fast, like road going past. */
.tate-speedlines {
  position: fixed;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(232, 241, 246, .5) 60px 62px, transparent 62px 170px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(127, 196, 232, .45) 23px 24px, transparent 24px 97px);
  opacity: calc(var(--tate-speed) * .7);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 75%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 75%);
}

/* The speedometer. Fixed bottom right, redlines at the top of the dial. */
.tate-hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--tate-black) 0 58%, transparent 59%),
    conic-gradient(from 240deg, var(--tate-ice) 0 170deg, var(--tate-red) 170deg 240deg, transparent 240deg),
    #111a22;
  box-shadow: 0 0 0 2px #2a3a47, 0 10px 30px rgba(0, 0, 0, .6);
}

.tate-hud__needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 46%;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--tate-red);
  transform-origin: 50% 100%;
  transform: rotate(calc(-120deg + var(--tate-speed) * 240deg));
  box-shadow: 0 0 10px var(--tate-red);
}

.tate-hud__readout {
  position: absolute;
  inset: auto 0 18%;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8ea3b2;
}

.tate-hud__readout b { display: block; font-size: 22px; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }

/* Past the redline the dial says so. */
.tate-hud.is-redline { box-shadow: 0 0 0 2px var(--tate-red), 0 0 30px rgba(255, 45, 61, .6); animation: tate-shake calc(var(--tate-beat) / 4) linear infinite; }
.tate-hud.is-redline .tate-hud__readout { color: var(--tate-red); }

@keyframes tate-shake { 50% { transform: translate(1px, -1px); } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Mostly transparent, so the spotlight wall reads through the stage. */
body.walju-fan--tate .walju-landing-hero {
  position: relative;
  background: radial-gradient(ellipse at 50% 120%, rgba(31, 109, 149, .35), transparent 60%);
}

/* Two stage beams hung from the rig, sweeping the crowd in opposite time. */
.tate-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tate-beams span {
  position: absolute;
  top: -8%;
  width: 32vw;
  height: 135%;
  background: linear-gradient(rgba(200, 232, 250, .3), rgba(127, 196, 232, .06) 70%, transparent);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  animation: tate-beam calc(var(--tate-beat) * 8) ease-in-out infinite alternate;
}

.tate-beams span:nth-child(1) { left: -8vw; }
.tate-beams span:nth-child(2) { right: -8vw; animation-direction: alternate-reverse; }
.tate-beams span:nth-child(3) { left: 34vw; animation-duration: calc(var(--tate-beat) * 6); opacity: .6; }

@keyframes tate-beam {
  from { transform: rotate(-24deg); }
  to { transform: rotate(24deg); }
}

body.walju-fan--tate .walju-landing-hero__grid { position: relative; z-index: 1; }

/* A little equaliser in front of the eyebrow, bouncing on the beat. */
.tate-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
}

.tate-eq i {
  width: 3px;
  height: 100%;
  background: var(--tate-ice);
  transform-origin: bottom;
  animation: tate-eq var(--tate-beat) ease-in-out infinite;
}

.tate-eq i:nth-child(2) { animation-delay: calc(var(--tate-beat) * -.25); }
.tate-eq i:nth-child(3) { animation-delay: calc(var(--tate-beat) * -.5); }
.tate-eq i:nth-child(4) { animation-delay: calc(var(--tate-beat) * -.75); }

@keyframes tate-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* Chrome type that jolts with a red/ice split on the downbeat, then settles. */
body.walju-fan--tate .walju-landing-hero h1 {
  background: var(--tate-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tate-glitch calc(var(--tate-beat) * 2) steps(1) infinite;
}

body.walju-fan--tate .walju-landing-hero h1 em {
  background: linear-gradient(180deg, #e6f6ff, var(--tate-ice) 55%, #1f6d95);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes tate-glitch {
  0% { transform: translate(-4px, 1px) skewX(-6deg); filter: drop-shadow(4px 0 0 var(--tate-red)) drop-shadow(-4px 0 0 var(--tate-ice)); }
  6% { transform: translate(3px, -1px); filter: drop-shadow(-3px 0 0 var(--tate-red)) drop-shadow(3px 0 0 var(--tate-ice)); }
  12%, 100% { transform: none; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .8)); }
}

body.walju-fan--tate .walju-landing-hero__intro {
  padding: 16px 18px;
  background: var(--tate-panel);
  border-left: 3px solid var(--tate-ice);
}

/* The button is the ignition. */
body.walju-fan--tate .walju-button {
  background: var(--tate-red);
  border-color: var(--tate-red);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(255, 45, 61, .6);
  animation: tate-rev var(--tate-beat) ease-out infinite;
}

body.walju-fan--tate .walju-button:hover { background: #fff; border-color: #fff; color: var(--tate-black); }

@keyframes tate-rev { from { box-shadow: 0 0 0 0 rgba(255, 45, 61, .6); } to { box-shadow: 0 0 0 14px rgba(255, 45, 61, 0); } }

body.walju-fan--tate .walju-music-hero__player { box-shadow: 0 0 0 1px var(--tate-ice), 0 0 50px rgba(127, 196, 232, .3); }

/* --------------------------------------------------------------------------
   Marquee — its speed follows yours (js/tate.js sets the playback rate).
   -------------------------------------------------------------------------- */

body.walju-fan--tate .walju-fan-marquee {
  background: var(--tate-black);
  border-block: 1px solid #2a3a47;
  transform: skewY(-2deg);
}

body.walju-fan--tate .walju-fan-marquee__track span {
  font-size: 15px;
  font-style: italic;
  letter-spacing: .22em;
  color: #e8f1f6;
}

body.walju-fan--tate .walju-fan-marquee__track span:nth-child(even) { color: var(--tate-red); }

/* --------------------------------------------------------------------------
   Revolving door — a 3D ring of her that turns as you scroll.
   -------------------------------------------------------------------------- */

.tate-door {
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0 clamp(90px, 11vw, 150px);
  overflow: hidden;
  text-align: center;
  perspective: 1400px;
}

.tate-door h2,
.tate-watch h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(44px, 8vw, 110px);
  font-weight: 750;
  line-height: .9;
  letter-spacing: -.07em;
}

.tate-door h2 em,
.tate-watch h2 em { font-family: var(--walju-serif); font-weight: 400; color: var(--tate-ice); }

.tate-door p {
  position: relative;
  z-index: 1;
  margin: 16px auto 0;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.6;
  color: #8ea3b2;
}

.tate-door__stage {
  --card: 170px;
  --radius: 400px;
  position: relative;
  width: var(--card);
  height: calc(var(--card) * 1.3);
  margin: 70px auto 0;
  transform-style: preserve-3d;
  animation: tate-door 40s linear infinite;
}

.tate-door__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-6deg) rotateY(calc(var(--tate-door, 0) * 1deg));
}

.tate-door__ring > * {
  position: absolute;
  inset: 0;
  margin: 0;
  background-size: cover;
  background-position: center 22%;
  border: 1px solid rgba(232, 241, 246, .35);
  transform: rotateY(var(--a)) translateZ(var(--radius));
  box-shadow: 0 0 40px rgba(127, 196, 232, .25);
}

@keyframes tate-door { to { transform: rotateY(-360deg); } }

/* --------------------------------------------------------------------------
   Body section — dark panels over the stage
   -------------------------------------------------------------------------- */

body.walju-fan--tate .walju-landing-links {
  background: transparent;
  color: #e8f1f6;
}

body.walju-fan--tate .walju-landing-heading,
body.walju-fan--tate .walju-fan-note {
  position: relative;
  padding: 22px 24px;
  background: var(--tate-panel);
  border: 1px solid #2a3a47;
}

body.walju-fan--tate .walju-fan-note { max-width: 680px; margin-top: 18px; }
body.walju-fan--tate .walju-fan-note p { margin: 0; color: #c6d4de; }
body.walju-fan--tate .walju-section-label { color: var(--tate-red); }
body.walju-fan--tate .walju-landing-heading h2 em { color: var(--tate-ice); }
body.walju-fan--tate .walju-text-link:hover { color: var(--tate-ice); }

/* Dance cam. The grid leans toward the cursor, and on every beat one photo
   gets hit with the light (js/tate.js picks which). */
body.walju-fan--tate .walju-fan-grid {
  perspective: 1200px;
  transform-style: preserve-3d;
}

body.walju-fan--tate .walju-fan-grid figure {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  background: #000;
  box-shadow: 0 0 0 1px #2a3a47;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}

body.walju-fan--tate .walju-fan-grid img {
  filter: grayscale(.85) brightness(.55) contrast(1.15);
  transition: filter 420ms ease-out;
}

body.walju-fan--tate .walju-fan-grid figure:hover img { filter: none; }

body.walju-fan--tate .walju-fan-grid figure.is-hit {
  box-shadow: 0 0 0 2px var(--tate-ice), 0 0 60px rgba(127, 196, 232, .55);
  animation: tate-hit var(--tate-beat) ease-out;
}

body.walju-fan--tate .walju-fan-grid figure.is-hit img { filter: none; transition-duration: 0ms; }

@keyframes tate-hit {
  0% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.08); }
  100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1); }
}

/* --------------------------------------------------------------------------
   Just keep watching — one face in the dark that turns to look at you.
   -------------------------------------------------------------------------- */

.tate-watch {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  gap: 34px;
  padding: 80px 20px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0, rgba(200, 232, 250, .16), transparent 55%), var(--tate-black);
  border-top: 1px solid #2a3a47;
  perspective: 900px;
}

.tate-watch__face {
  --mx: 0;
  --my: 0;
  width: min(70vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(232, 241, 246, .3), 0 0 120px rgba(127, 196, 232, .35);
  transform: rotateY(calc(var(--mx) * 22deg)) rotateX(calc(var(--my) * -18deg));
  transition: transform 500ms cubic-bezier(.2, .7, .3, 1);
  animation: tate-heartbeat var(--tate-beat) ease-out infinite;
}

.tate-watch__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.9);
  transform-origin: 50% 36%;
}

@keyframes tate-heartbeat {
  0% { box-shadow: 0 0 0 1px rgba(232, 241, 246, .5), 0 0 160px rgba(127, 196, 232, .55); }
  100% { box-shadow: 0 0 0 1px rgba(232, 241, 246, .3), 0 0 90px rgba(127, 196, 232, .2); }
}

.tate-watch__count {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8ea3b2;
}

.tate-watch__count b { color: var(--tate-red); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

body.walju-fan--tate .walju-footer { background: var(--tate-black); border-top: 1px solid #2a3a47; }

@media (max-width: 760px) {
  body.walju-fan--tate { --tate-face: 60px; --tate-spot: 150px; }
  .tate-door__stage { --card: 110px; --radius: 250px; }
  .tate-hud { width: 96px; right: 12px; bottom: 12px; }
  .tate-hud__readout b { font-size: 16px; }
  .tate-beams span:nth-child(3) { display: none; }
}

/* No strobe, no sweeping, no speed. The spotlight sits still in the middle of
   the stage (it still follows a pointer, which only moves when you do) and the
   ring holds a fixed angle. */
@media (prefers-reduced-motion: reduce) {
  .tate-strobe,
  .tate-speedlines,
  .tate-hud,
  .tate-beams { display: none; }
  .tate-spot { animation: none; --tate-x: 50%; --tate-y: 45%; --tate-spot: 380px; }
  body.walju-fan--tate .walju-landing-hero h1 { filter: none; }
}