/* rhythm-fight.css — the fight sequences. Owned by lead; kept separate from style.css. */

.rf {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  /* Transparent by design: every sequence plays over the actual 3D set behind it —
     the club, the quad, Irving Plaza, the pre-dawn campus, the room he is in. Only a
     mood wash and an edge vignette, never a curtain. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 16, 46, .16), transparent 58%),
    radial-gradient(100% 72% at 50% 52%, transparent 26%, rgba(4, 3, 8, .78));
  animation: rf-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
.rf-out { animation: rf-outa .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rf-in  { from { opacity: 0; transform: scale(1.04); } }
@keyframes rf-outa { to  { opacity: 0; transform: scale(.98); } }

/* Arcade Rhythm Rush uses the supplied liquid-light artwork. Story sequences keep their
   real room backgrounds. The image drifts, breathes and changes hue through each song. */
.rf-arcade {
  isolation: isolate;
  overflow: hidden;
  --rf-hue: 0deg;
  --rf-warp: none;
  background: #030106;
}
.rf-arcade > :not(.rf-trip) { position: relative; z-index: 1; }
.rf-liquid-fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.rf-trip {
  position: absolute;
  z-index: 0;
  inset: -14%;
  pointer-events: none;
  overflow: hidden;
  background-image: url('../../art/arcade/liquid-01.png');
  background-position: 50% 50%;
  background-size: cover;
  filter: var(--rf-warp) hue-rotate(var(--rf-hue)) saturate(1.2) contrast(1.06) brightness(.72);
  opacity: .9;
  transform: scale(1.08) rotate(-1.5deg);
  animation: rf-liquid-drift 12s ease-in-out infinite alternate;
  transition: filter .65s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, filter;
}
.rf-arcade[data-trip-scene="2"] .rf-trip { background-image: url('../../art/arcade/liquid-02.png'); }
.rf-arcade[data-trip-scene="3"] .rf-trip { background-image: url('../../art/arcade/liquid-03.png'); }
.rf-trip::before,
.rf-trip::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 45%, transparent 34%, rgba(1, 0, 6, .54) 100%),
    linear-gradient(to bottom, rgba(2, 0, 8, .2), transparent 30%, rgba(2, 0, 8, .38));
  animation: rf-liquid-breathe 5.5s ease-in-out infinite alternate;
}
.rf-trip::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 160, 196, .1), transparent 52%);
  mix-blend-mode: screen;
}
.rf-trip span { display: none; }
.rf-trip-good .rf-trip {
  filter: var(--rf-warp) hue-rotate(var(--rf-hue)) saturate(1.38) contrast(1.08) brightness(.82);
}
.rf-trip-perfect .rf-trip {
  filter: var(--rf-warp) hue-rotate(var(--rf-hue)) saturate(1.62) contrast(1.1) brightness(.98);
  transform: scale(1.035) rotate(.8deg);
}
@keyframes rf-liquid-drift {
  0%   { transform: scale(1.1) translate3d(-2%, -1%, 0) rotate(-1.5deg); background-position: 43% 44%; }
  48%  { transform: scale(1.16) translate3d(2%, -2%, 0) rotate(1.2deg); background-position: 58% 49%; }
  100% { transform: scale(1.12) translate3d(-1%, 3%, 0) rotate(-.5deg); background-position: 48% 58%; }
}
@keyframes rf-liquid-breathe {
  from { opacity: .66; transform: scale(.98); }
  to { opacity: 1; transform: scale(1.04); }
}

/* --- health bars, arcade-style ------------------------------------ */
.rf-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px 26px 0;
}
.rf-fighter { display: flex; flex-direction: column; gap: 6px; }
.rf-foe { align-items: flex-end; }
.rf-name {
  font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: #cfc6bb;
}
.rf-bar {
  height: 13px; width: 100%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  overflow: hidden;
  transform: skewX(-22deg);
}
.rf-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #ffb020, #ff2d6f);
  transition: width .18s cubic-bezier(.22, 1, .36, 1);
}
.rf-bar-foe i { background: linear-gradient(90deg, #c8102e, #ff6a3d); }
.rf-round {
  font-size: 10px; letter-spacing: .34em; font-weight: 800;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}
.rf-round span { display: block; }
.rf-round span { color: rgba(255, 255, 255, .74); }

/* --- the note highway --------------------------------------------- */
.rf-stage { flex: 1; position: relative; display: grid; place-items: end center; }
.rf-ready {
  position: absolute;
  z-index: 5;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 84vw);
  padding: 15px 22px 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, rgba(8, 6, 12, .9), rgba(24, 12, 22, .78));
  box-shadow: 0 18px 54px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
  pointer-events: none;
}
.rf-ready b {
  display: block;
  min-height: 1.2em;
  font-size: clamp(26px, 4.8vw, 52px);
  line-height: 1;
  letter-spacing: .14em;
  color: #fff4df;
  text-shadow: 0 0 26px rgba(255, 176, 32, .45);
}
.rf-ready span {
  display: block;
  margin-top: 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .62);
}
.rf-ready-gone {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(.97);
}
.rf-highway {
  display: grid;
  grid-template-columns: repeat(4, 96px);
  gap: 10px;
  height: min(58vh, 460px);
  margin-bottom: 44px;
  perspective: 700px;
}
.rf-lane {
  position: relative;
  backdrop-filter: blur(3px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .015), rgba(255, 255, 255, .05));
  border-left: 1px solid rgba(255, 255, 255, .08);
  border-right: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.rf-notes { position: absolute; inset: 0; }
.rf-note {
  position: absolute; left: 8%; top: -34px;
  width: 84%; height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff, #b9b2cc);
  box-shadow: 0 0 16px rgba(255, 255, 255, .35);
  will-change: transform;
}
.rf-note.rf-attack {
  background: linear-gradient(180deg, #ff6a7f, #c8102e);
  box-shadow: 0 0 20px rgba(200, 16, 46, .6);
}
.rf-note.rf-gone { opacity: 0 !important; transform: scale(1.5) !important; transition: all .18s; }

.rf-target {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  border-top: 2px solid rgba(255, 255, 255, .5);
  background: linear-gradient(to top, rgba(255, 255, 255, .14), transparent);
  display: grid; place-items: center;
}
.rf-target span {
  font-size: 9px; font-weight: 800; letter-spacing: .2em;
  color: rgba(255, 255, 255, .7);
}
.rf-press .rf-target {
  background: linear-gradient(to top, rgba(255, 45, 111, .55), transparent);
  border-top-color: #fff;
}

/* --- judgement ----------------------------------------------------- */
.rf-judge {
  position: absolute; top: 26%; left: 0; right: 0;
  text-align: center;
  font-size: clamp(26px, 5vw, 54px);
  font-weight: 900; letter-spacing: .1em;
  animation: rf-pop .34s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rf-pop { from { transform: scale(.7); opacity: 0; } }
.rf-perfect { color: #ffd76a; text-shadow: 0 0 26px rgba(255, 176, 32, .8); }
.rf-good    { color: #9fe8ff; text-shadow: 0 0 20px rgba(0, 229, 255, .6); }
.rf-miss    { color: #ff5c74; text-shadow: 0 0 20px rgba(200, 16, 46, .7); }

.rf-combo {
  position: absolute; top: 40%; left: 0; right: 0;
  text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: .3em;
  color: rgba(255, 255, 255, .82);
}

.rf-help {
  text-align: center; padding: 0 0 22px;
  font-size: 10px; letter-spacing: .22em; font-weight: 700;
  color: rgba(255, 255, 255, .38);
}

/* Taking a hit. */
.rf-hurt { animation: rf-shake .2s; }
@keyframes rf-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-6px, 2px); }
  75% { transform: translate(6px, -2px); }
}
.rf-hurt::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(200, 16, 46, .5));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rf, .rf-out, .rf-judge, .rf-hurt, .rf-trip, .rf-trip::before, .rf-trip::after,
  .rf-mode-intimacy .rf-stage::before { animation: none; }
}

@media (max-width: 700px) {
  .rf-highway { grid-template-columns: repeat(4, 68px); gap: 6px; }
  .rf-ready { top: 10%; padding-inline: 14px; }
}

/* Live backdrop blur forces mobile Safari to repeatedly sample the WebGL canvas below
   the HUD. The same translucent styling reads cleanly without that extra full-screen
   pass, and the 3D scene itself remains unchanged. */
@media (pointer: coarse) {
  .rf-ready,
  .rf-lane {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* --- dialogue over gameplay (the Ch 4 run) ------------------------- */
.rf-sub {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(min(58vh, 460px) + 62px);
  width: min(660px, 86vw);
  text-align: center;
  font-size: 15px; line-height: 1.55;
  color: #efe9e2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
  pointer-events: none;
  opacity: 0;
}
.rf-sub b {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .28em;
  color: #ffb020;
  margin-bottom: 5px;
}
.rf-sub i { color: #c9c1ba; font-style: italic; }
.rf-sub-in { animation: rf-sub-fade 5.4s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes rf-sub-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* The run is pre-dawn: cool and grey, not the fight's red. */
.rf-mode-run {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 107, 122, .20), transparent 58%),
    radial-gradient(100% 74% at 50% 54%, transparent 30%, rgba(6, 8, 12, .74));
}
.rf-mode-run .rf-bar i      { background: linear-gradient(90deg, #9fb4c6, #dfe9ee); }
.rf-mode-run .rf-bar-foe i  { background: linear-gradient(90deg, #5a6b7a, #9fb4c6); }
.rf-mode-run .rf-note       { background: linear-gradient(180deg, #eaf2f7, #9fb4c6); }
.rf-mode-run .rf-note.rf-attack { background: linear-gradient(180deg, #ffd76a, #c98a1e); box-shadow: 0 0 18px rgba(255, 176, 32, .5); }

/* Intimacy: the real room shows through. Only a warm wash and an edge vignette, so the
   set behind the highway is the backdrop — no invented figures. */
.rf-mode-intimacy {
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(255, 138, 61, .14), transparent 58%),
    radial-gradient(100% 70% at 50% 50%, transparent 30%, rgba(6, 4, 8, .72));
}
.rf-mode-intimacy .rf-stage::before {
  content: '';
  position: absolute;
  inset: 12% 12% 5%;
  background:
    radial-gradient(ellipse at 43% 58%, rgba(255, 153, 102, .11), transparent 34%),
    radial-gradient(ellipse at 58% 54%, rgba(180, 90, 140, .1), transparent 37%);
  /* A live blur over WebGL flickers on some iPhones. These broad radial gradients are
     already soft, so animating only opacity and scale keeps the breathing warmth without
     forcing Safari to rebuild a filtered layer every frame. */
  animation: rf-intimacy-breathe 3.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rf-intimacy-breathe {
  from { opacity: .54; transform: scale(.97); }
  to { opacity: .9; transform: scale(1.025); }
}
.rf-mode-intimacy .rf-bar i     { background: linear-gradient(90deg, #ff8a3d, #ff2d6f); }
.rf-mode-intimacy .rf-bar-foe i { background: linear-gradient(90deg, #7b5cff, #ff8a3d); }
.rf-mode-intimacy .rf-note      { background: linear-gradient(180deg, #ffe3c9, #e0a071); }
.rf-mode-intimacy .rf-note.rf-attack { background: linear-gradient(180deg, #ffb07f, #d8663d); box-shadow: 0 0 18px rgba(255, 138, 61, .5); }

/* Lanes are glass over the room, not panels on top of it. */
.rf-mode-intimacy .rf-lane {
  background: linear-gradient(to bottom, rgba(255,255,255,.012), rgba(255,255,255,.045));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.rf-mode-intimacy .rf-ready {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(135deg, rgba(8, 6, 12, .96), rgba(40, 17, 34, .92));
}

/* --- the hit window, made visible ---------------------------------- *
 * You cannot judge a boundary you cannot see. This band is the actual GOOD window:
 * a note is catchable while it overlaps this, and for a beat after it crosses the line.
 * The bright line is PERFECT. */
.rf-window {
  position: absolute; left: 0; right: 0;
  bottom: 22px; height: 64px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.10) 42%,
    rgba(255,255,255,.10) 58%,
    rgba(255,255,255,.02) 100%);
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}
.rf-target {
  height: 54px;
  border-top: 3px solid rgba(255,255,255,.78);
  box-shadow: 0 -1px 18px rgba(255,255,255,.28);
}
.rf-mode-intimacy .rf-window {
  background: linear-gradient(to bottom,
    rgba(255,180,120,.02) 0%, rgba(255,180,120,.13) 50%, rgba(255,180,120,.02) 100%);
  border-top-color: rgba(255,190,140,.30);
}
.rf-mode-intimacy .rf-target { border-top-color: #ffd0a8; box-shadow: 0 -1px 20px rgba(255,180,120,.4); }

/* --- text must never sit across the lanes -------------------------- */
.rf-judge { top: 8%; }
.rf-combo { top: 17%; }
.rf-sub {
  top: 25%;
  bottom: auto;
}
@keyframes rf-sub-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Give the highway room so the help line never collides with it. */
.rf-highway { margin-bottom: 58px; }
.rf-help { padding-bottom: 30px; }

/* --- touch: the lanes are the buttons ------------------------------------ */
.rf-lane { -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
  .rf-help { font-size: 9px; padding-bottom: 18px; }
  /* Taller targets and a bigger hit line on a phone. */
  .rf-highway { height: min(64vh, 520px); grid-template-columns: repeat(4, minmax(58px, 1fr)); width: min(100%, 520px); }
  .rf-target { height: 66px; }
  .rf-window { bottom: 26px; height: 78px; }
}