/* Hiding Roses — Blyden
   One screen, no scroll. Layers, back to front:
   idle loop · film · paint (cursor colour) · matter (petals, ash) · light (embers, motes, leaks) · grain · vignette · lyrics · UI · cursor */

:root {
  --ink: #0c0a09;
  --cream: #f4ead8;
  --cream-dim: rgba(244, 234, 216, 0.78);
  --rose: #e5484d;
  --coral: #ff7a5c;
  --peach: #ffc4a3;
  --ember: #ff9440;
  --teal: #46b9a9;
  --mint: #b9ecd6;
  --slate: #93a4b8;
  --ash: #a7a9ad;
  --gold: #ffd9a0;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --edge: clamp(16px, 3.2vw, 44px);
  --edge-y: clamp(14px, 2.8vh, 30px);
  --btn: clamp(136px, 22vmin, 232px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  overscroll-behavior: none;
}

body {
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button { cursor: none; }
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- picture ---------- */

video.layer { object-fit: cover; display: block; }

.idle {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08);
  filter: saturate(0.92) brightness(0.74) contrast(1.06);
  transition: opacity 1.6s var(--ease-in-out), filter 1.6s var(--ease-in-out);
}
body.film-on .idle { opacity: 0; }
body.is-paused .idle,
body.is-ended .idle { filter: saturate(0.9) brightness(0.62) contrast(1.05); }

.films {
  opacity: 0;
  transition: opacity 1.4s var(--ease-in-out);
}
body.film-on .films { opacity: 1; }
body.is-paused .films { filter: brightness(0.7) saturate(0.85); transition: opacity 1.4s, filter 0.8s; }
.film {
  opacity: 0;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(var(--fs, 1.015));
}

/* ?perf: the adaptive film monitor */
.perf {
  position: fixed;
  z-index: 30;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 8, 7, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e9f3ea;
  font: 500 11px/1.5 var(--mono);
  white-space: pre;
  pointer-events: none;
}

.paint { mix-blend-mode: color; opacity: 0.62; }
.light { mix-blend-mode: screen; }
.grain { mix-blend-mode: overlay; opacity: var(--grain, 0.13); image-rendering: pixelated; }

.vignette {
  background:
    radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(8, 6, 5, 0.58) 100%),
    linear-gradient(to top, rgba(8, 6, 5, var(--floor, 0.55)), transparent 30%),
    linear-gradient(to bottom, rgba(8, 6, 5, 0.32), transparent 22%);
}

/* ---------- lyrics: one sentence at a time, centred, soft ---------- */

.lyrics { z-index: 5; transition: opacity 0.6s var(--ease-in-out), filter 0.6s var(--ease-in-out); }
body.is-paused .lyrics { opacity: 0.22; filter: blur(3px); }   /* the pause view belongs to the button */

.group {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 2 * var(--edge));
}

.line {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(26px, 5.6vmin, 80px);
  line-height: 1.14;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 2px 16px rgba(6, 4, 3, 0.6));
}
@media (max-aspect-ratio: 1/1) {
  .line { font-size: clamp(22px, 6.8vw, 54px); }
}

.row { display: block; white-space: nowrap; }
.shift { display: none; }
.line.is-split .shift { display: block; height: 0; }   /* a line shift when the sentence needs one */

.word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.26em;
  vertical-align: bottom;
  will-change: transform, opacity, filter;
}
.word:last-child { margin-right: 0; }
.word::before {                      /* each word carries its own soft shadow, so the shadow builds with the sentence */
  content: "";
  position: absolute;
  inset: -48% -38%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 7, 6, 0.3), rgba(10, 7, 6, 0) 100%);
  pointer-events: none;
}
.inner { position: relative; display: inline-block; }
.w { display: inline-block; white-space: nowrap; }
.w.lit {
  position: absolute;
  left: 0;
  top: 0;
  --p: -25%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 25%), transparent var(--p));
  mask-image: linear-gradient(90deg, #000 calc(var(--p) - 25%), transparent var(--p));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.w.ghost { visibility: hidden; }     /* holds the word's place so the line never shifts */

.ch {
  display: inline-block;
  --heat: 0;
  color: color-mix(in oklab, var(--heat-color, var(--coral)) calc(var(--heat) * 85%), var(--c, currentColor));
  translate: 0 calc(var(--heat) * -0.07em);
  text-shadow: 0 0 calc(var(--heat) * 22px) rgba(255, 140, 110, calc(var(--heat) * 0.75));
}

.fx-fire .lit { text-shadow: 0 0 18px rgba(255, 148, 64, 0.45); }
.u { display: inline-block; overflow: hidden; max-width: 0; opacity: 0; vertical-align: bottom; }

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

.hero { z-index: 6; display: grid; place-items: center; pointer-events: none; }

.title {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr calc(var(--btn) + 5vmin) 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 17vmin, 240px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--cream);
  pointer-events: none;
  user-select: none;
}
.title .word-title:first-child { grid-row: 1; align-self: end; }
.title .word-title:last-child  { grid-row: 3; align-self: start; }
@media (min-aspect-ratio: 1/1) {
  .title {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr calc(var(--btn) + 7vmin) 1fr;
    align-items: center;
    font-size: clamp(60px, 15vmin, 240px);
  }
  .title .word-title:first-child { grid-row: 1; grid-column: 1; justify-self: end; align-self: center; }
  .title .word-title:last-child  { grid-row: 1; grid-column: 3; justify-self: start; align-self: center; }
}
.title .word-title { display: inline-block; white-space: nowrap; }
.title .word-title:last-child { font-style: italic; }
.title .ch {
  --c: var(--cream);
  text-shadow:
    calc(var(--mis, 0.6px) * -1) 0 0 rgba(229, 72, 77, 0.55),
    var(--mis, 0.6px) 0 0 rgba(70, 185, 169, 0.45),
    0 0 calc(var(--heat) * 34px) rgba(255, 140, 110, calc(var(--heat) * 0.7));
}

/* the play button */
.play {
  position: relative;
  z-index: 7;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cream);
  pointer-events: auto;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--float, 0px)), 0) scale(var(--ps, 1));
  transition: opacity 0.8s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.play:focus-visible .disc { box-shadow: 0 0 0 2px var(--cream), 0 0 0 6px rgba(255, 122, 92, 0.6); }

.play .ring {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  rotate: var(--spin, 0deg);
  overflow: visible;
}
.play .ring text {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  fill: rgba(244, 234, 216, 0.82);
}

.play .disc {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.03) 70%),
    rgba(255, 248, 238, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.44);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.6) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -14px 30px rgba(255, 140, 110, calc(0.08 + var(--glow, 0) * 0.22)),
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 calc(30px + var(--glow, 0) * 60px) rgba(255, 122, 92, calc(var(--glow, 0) * 0.45));
  transform: scale(var(--ds, 1));
  transition: transform 0.7s var(--ease-out);
}
.play .disc::after {                 /* a slow glint across the glass */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: var(--glint, 120%) 0;
  pointer-events: none;
}

.play .icon { width: 32%; height: 32%; overflow: visible; }
.play .icon path { fill: var(--cream); transition: opacity 0.35s; }
.play .icon .i-pause,
.play .icon .i-replay { opacity: 0; }
body.is-ended .play .icon .i-play { opacity: 0; }
body.is-ended .play .icon .i-replay { opacity: 1; }

.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--btn) * 0.66);
  height: calc(var(--btn) * 0.66);
  margin: calc(var(--btn) * -0.33) 0 0 calc(var(--btn) * -0.33);
  border-radius: 50%;
  border: 1px solid rgba(255, 233, 214, 0.55);
  pointer-events: none;
  animation: ripple 2.6s var(--ease-out) forwards;
}
.ripple.strong { border-color: rgba(255, 150, 120, 0.7); }
@keyframes ripple {
  from { transform: scale(1); opacity: 0.85; }
  to   { transform: scale(2.35); opacity: 0; }
}

body.is-playing .play { opacity: 0; pointer-events: none; }
/* the letters leave one by one (script); this fade is the backstop */
.title { transition: opacity 0.6s var(--ease-in-out); }
body.is-playing:not(.outro) .title,
body.is-paused .title { opacity: 0; transition: opacity 0.6s 0.7s var(--ease-in-out); }

/* ---------- chrome: artist, contact ---------- */

.brand {
  position: absolute;
  z-index: 8;
  top: calc(var(--edge-y) + env(safe-area-inset-top, 0px));
  left: calc(var(--edge) + env(safe-area-inset-left, 0px));
  transition: opacity 0.9s var(--ease-in-out);
}
.brand a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(24px, 1.6vw + 14px, 38px);
  letter-spacing: 0.005em;
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
}

.contact {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 calc(var(--edge) + env(safe-area-inset-right, 0px)) calc(var(--edge-y) + env(safe-area-inset-bottom, 0px)) calc(var(--edge) + env(safe-area-inset-left, 0px));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 28px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: rgba(244, 234, 216, 0.92);
  transition: opacity 0.9s var(--ease-in-out);
}
.contact a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: color 0.3s, background-size 0.5s var(--ease-out);
}
.contact a:hover,
.contact a:focus-visible { color: var(--peach); outline: none; }

@media (max-width: 640px) {
  .contact { flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 6px; font-size: 12.5px; }
}

body.is-playing .brand,
body.is-playing .contact { opacity: 0; pointer-events: none; }
body.is-playing.outro .brand { opacity: 1; transition-delay: 0.9s; }

/* ---------- cursor ---------- */

.cursor { position: fixed; inset: 0; z-index: 20; pointer-events: none; display: none; }
body.has-cursor .cursor { display: block; }
.cursor .dot,
.cursor .halo {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor .dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--cream);
  mix-blend-mode: difference;
}
.cursor .halo {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(244, 234, 216, 0.55);
  background: radial-gradient(circle, rgba(255, 196, 163, var(--halo-fill, 0)) 0%, rgba(255, 140, 110, 0) 70%);
  transition: border-color 0.35s, background 0.35s;
}
.cursor.over-text .halo { border-color: rgba(255, 196, 163, 0); }
.cursor.over-link .halo { border-color: rgba(255, 196, 163, 0.9); }
.cursor.hidden { opacity: 0; }

/* ---------- misc ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

noscript p {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 18vh;
  translate: -50% 0;
  margin: 0;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
  .idle { transform: scale(1.04); }
}