/* ============================================================
   memories of me — embedded music-video player
   Landing (white, brand type, play arrow) → plays clay & kelsy's
   actual video. Desktop shows the 16:9 cut; a narrow / portrait
   viewport switches to the vertical cut. Clean, framed, on-brand.
   ============================================================ */

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;             /* opens on white to match the landing — no flash */
  color: #111;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;    /* no pull-to-refresh / rubber-band under a drag */
}
/* MOBILE: a finger dragging on the water or the film must drive the effect — never
   scroll the page or shove the video around. touch-action:none is the line that
   makes the browser hand us the drag instead of treating it as a gesture. */
.landing, .stage, .fx, .film, .water-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;  /* no long-press "save image" over the video */
}

/* ---------------- THE PLAYER ---------------- */
.stage {
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}
.stage.is-live { opacity: 1; }
.stage.is-black { background: #000; }   /* the video ends on black — carry it to the frame */

/* the WebGL canvas draws the video with the effects */
.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}
/* the <video> keeps decoding (WebGL reads it) but is hidden behind the canvas */
.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
/* no WebGL → show the plain video, hide the canvas */
body.no-gl .fx { display: none; }
body.no-gl .film { opacity: 1; }

/* ---------------- LANDING ---------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  transition: opacity .5s ease;
}
.landing.is-gone { opacity: 0; pointer-events: none; }
/* water ripples emanate from the play button — a hint of the video's water effect */
.water-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.landing__mark { position: relative; z-index: 1; text-align: center; padding: 6vw; }
/* click → an RGB colour glitch tears through the title + play arrow (red/cyan split + jitter) */
@keyframes rgbGlitch {
  0%   { filter: none; transform: translate(0, 0); }
  8%   { filter: drop-shadow(7px 0 rgba(255,0,70,.95)) drop-shadow(-7px 0 rgba(0,225,255,.95)); transform: translate(-5px, 1px); }
  18%  { filter: drop-shadow(-10px 0 rgba(255,0,70,.9)) drop-shadow(10px 0 rgba(0,225,255,.9)); transform: translate(6px, -2px); }
  30%  { filter: drop-shadow(8px 0 rgba(255,0,70,.95)) drop-shadow(-8px 0 rgba(0,225,255,.95)); transform: translate(-4px, 2px); }
  44%  { filter: drop-shadow(-6px 0 rgba(255,0,70,.9)) drop-shadow(6px 0 rgba(0,225,255,.9)); transform: translate(3px, 0); }
  58%  { filter: drop-shadow(11px 0 rgba(255,0,70,.9)) drop-shadow(-11px 0 rgba(0,225,255,.9)); transform: translate(-2px, -1px); }
  74%  { filter: drop-shadow(4px 0 rgba(255,0,70,.7)) drop-shadow(-4px 0 rgba(0,225,255,.7)); transform: translate(2px, 0); }
  100% { filter: none; transform: translate(0, 0); }
}
.landing.is-glitch .landing__mark { animation: rgbGlitch .85s steps(22) both; }
.landing__eyebrow {
  font-family: "Courier Prime", monospace;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: clamp(11px, 1.4vw, 15px);
  color: #111;
  margin-left: .34em;
  margin-bottom: 2.2rem;
}
.landing__title {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .005em;
  font-size: clamp(40px, 9.5vw, 128px);
  line-height: .98;
  color: #111;
  margin-bottom: 2.6rem;
}
.playbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: none; border: none; cursor: pointer;
  transition: transform .18s ease, opacity .3s ease;
}
.playbtn:hover { transform: scale(1.08); }
.playbtn:active { transform: scale(0.96); }
.playbtn:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 4px; }
.playbtn__tri {
  width: clamp(32px, 5.4vw, 58px);
  height: auto;
  display: block;
  overflow: visible;
}
.playbtn__tri .tri-o { fill: none; stroke: #111; stroke-width: 2; stroke-linejoin: round; }
.playbtn__tri .tri-f { fill: #111; }
/* while it loads the button can't be clicked — the triangle filling in IS the progress bar */
.playbtn.is-loading { pointer-events: none; cursor: default; }
.playbtn.is-ready .playbtn__tri { animation: triPop .55s cubic-bezier(.22, 1.61, .36, 1); }
@keyframes triPop { 0% { transform: scale(1); } 38% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ---------------- END CARD ---------------- */
.endcard {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; background: rgba(0,0,0,0); transition: background .6s ease;
}
.endcard.is-visible { background: #000; }   /* the video ends on black */
.endcard__link, .endcard__btn {
  background: none; border: none; color: #eaeaea;
  font-family: "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .3em;
  font-size: clamp(14px, 2vw, 20px); text-decoration: none; cursor: pointer;
  opacity: 0; transition: opacity .5s ease .3s, color .18s ease;
}
.endcard__link:hover, .endcard__btn:hover { color: #999; }
.endcard.is-visible .endcard__link,
.endcard.is-visible .endcard__btn { opacity: 1; }

[hidden] { display: none !important; }