/* ============================================================
   Philemon
   Monochrome base — the artwork is the only source of colour.
   Apple-style glass & typography, Material 3 motion.
   ============================================================ */

/* Self-hosted: no CDN call, works offline, GDPR-safe */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:          #09090B;
  --bg-lift:     #0C0C0F;

  --text:        #F4F4F5;
  --text-2:      rgba(244, 244, 245, .56);
  --text-3:      rgba(244, 244, 245, .34);

  --line:        rgba(255, 255, 255, .085);
  --fill:        rgba(255, 255, 255, .035);
  --fill-hover:  rgba(255, 255, 255, .065);
  --fill-press:  rgba(255, 255, 255, .095);

  /* Apple-ish exit curve for entrances, MD3 emphasised for interaction */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);

  --dur-2: 280ms;
  --dur-3: 420ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
          "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* a single, very quiet light source at the top of the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(255,255,255,.055), transparent 62%),
    linear-gradient(180deg, var(--bg-lift), var(--bg) 45%);
}

/* fine grain so the dark gradients never band */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

::selection { background: rgba(255, 255, 255, .16); }

:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, .7);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   Sticky bar
   ============================================================ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 54px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(9, 9, 11, .62);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3),
    border-color var(--dur-3) var(--ease-out);
}

.topbar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  border-bottom-color: var(--line);
  transition-delay: 0s, 0s, 0s, 0s;
}

.topbar__name {
  font-size: .875rem;
  font-weight: 550;
  letter-spacing: -.012em;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  font-weight: 450;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-emph);
}

.topbar__link svg { transition: transform var(--dur-2) var(--ease-emph); }
.topbar__link:hover { color: var(--text); }
.topbar__link:hover svg { transform: translateX(2px); }

/* ============================================================
   Hero — the name, and nothing else
   ============================================================ */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
}

.hero__name {
  margin: 0;
  /* 19vw keeps all eight glyphs on one line at every width */
  font-size: min(19vw, 11.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  text-align: center;
  will-change: transform, opacity;
}

.hero__name-inner {
  display: inline-block;
  padding: .08em .06em;
  background: linear-gradient(180deg, #FFFFFF 10%, #C9C9D1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(7px);
  animation: name-in 1400ms var(--ease-out) 180ms forwards;
}

@keyframes name-in {
  from {
    opacity: 0;
    letter-spacing: .01em;
    transform: translate3d(0, 10px, 0);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    letter-spacing: -.045em;
    transform: none;
    filter: blur(0);
  }
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 48px);
  translate: -50% 0;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  opacity: 0;
  animation: cue-in 900ms var(--ease-out) 1500ms forwards;
  transition: opacity var(--dur-3) var(--ease-out);
}

.scroll-cue.is-hidden { opacity: 0 !important; }

.scroll-cue__track {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.75), transparent);
  animation: cue-run 2600ms cubic-bezier(.6, 0, .3, 1) infinite;
}

@keyframes cue-in  { to { opacity: 1; } }
@keyframes cue-run {
  0%       { transform: translateY(-100%); }
  55%,100% { transform: translateY(100%); }
}

/* ============================================================
   Release
   ============================================================ */

main {
  position: relative;
  z-index: 1;
}

/* a full screen of its own, so one scroll lands it dead centre */
.release {
  min-height: 100svh;
  padding: clamp(72px, 10vh, 112px) var(--pad) clamp(20px, 3vh, 32px);
  display: grid;
  grid-template-rows: 1fr auto;
}

.release__grid {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

.cover {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 18px;
}

.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  border: .5px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 30px 70px -30px rgba(0, 0, 0, .95);
}

/* the artwork casts a faint warm light — the only colour on the page */
.cover::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 58%,
      rgba(255, 138, 92, .17),
      rgba(176, 122, 196, .07) 46%,
      transparent 72%);
  filter: blur(18px);
}

.info { min-width: 0; }

.info__label {
  margin: 0;
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.info__title {
  margin: 14px 0 0;
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.042em;
}

.info__note {
  margin: 10px 0 clamp(28px, 4vw, 40px);
  font-size: .9375rem;
  color: var(--text-2);
}

/* ============================================================
   Streaming list — Apple-style grouped rows
   ============================================================ */

.listen {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--fill);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  overflow: hidden;
}

.row {
  /* --i is set per row in the markup; the rows cascade inside the frame */
  --row-delay: calc(var(--delay, 0ms) + var(--i, 0) * 55ms);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  font-size: .9375rem;
  font-weight: 450;

  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 640ms var(--ease-out) var(--row-delay),
    transform 720ms var(--ease-out) var(--row-delay),
    background var(--dur-2) var(--ease-emph);
}

.listen.is-revealed .row {
  opacity: 1;
  transform: none;
}

.row + .row { border-top: 1px solid var(--line); }

.row:hover  { background: var(--fill-hover); }
.row:active { background: var(--fill-press); }

.row__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-emph);
}

.row:hover .row__icon { color: var(--text); }

.row__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-3);
  transition:
    color var(--dur-2) var(--ease-emph),
    transform var(--dur-2) var(--ease-emph);
}

.row:hover .row__arrow {
  color: var(--text-2);
  transform: translate3d(2px, -2px, 0);
}

/* Material ripple, kept to a whisper */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
  opacity: .16;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 640ms var(--ease-emph) forwards;
}

@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  align-self: end;
  padding-top: clamp(32px, 6vh, 64px);
  text-align: center;
  color: var(--text-3);
  font-size: .75rem;
  letter-spacing: .01em;
}

.footer p { margin: 0; }

.footer .footer__contact { margin: 0 0 14px; }

/* pill in the same glass family as the streaming list */
.contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--fill);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--text-2);
  font-size: .8125rem;
  letter-spacing: -.005em;
  transition:
    background var(--dur-2) var(--ease-emph),
    border-color var(--dur-2) var(--ease-emph),
    color var(--dur-2) var(--ease-emph);
}

.contact:hover {
  background: var(--fill-hover);
  border-color: rgba(255, 255, 255, .14);
  color: var(--text);
}

.contact:active { background: var(--fill-press); }

.contact__icon {
  flex: 0 0 auto;
  color: var(--text-3);
  transition: color var(--dur-2) var(--ease-emph);
}

.contact:hover .contact__icon { color: var(--text-2); }

/* ============================================================
   Reveal on scroll
   ============================================================ */

/* text: a quiet rise */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 800ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* cover: settles down and opens outward from its own edges */
.cover[data-reveal] {
  transform: translate3d(0, 16px, 0) scale(1.02);
  transition:
    opacity 1000ms var(--ease-out),
    transform 1200ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.cover[data-reveal].is-revealed { transform: none; }

.cover__img {
  clip-path: inset(6% round 18px);
  transition: clip-path 1200ms var(--ease-out) var(--delay, 0ms);
}

.cover.is-revealed .cover__img { clip-path: inset(0 round 18px); }

/* the glow comes up last, as if the artwork had lit it */
.cover::before {
  opacity: 0;
  transition: opacity 1400ms var(--ease-out) calc(var(--delay, 0ms) + 280ms);
}

.cover.is-revealed::before { opacity: 1; }

/* the list frame fades on the spot; its rows do the moving */
.listen[data-reveal] { transform: none; }

/* one screen per scroll on pointer devices, so the release
   comes to rest centred instead of half-way up */
@media (hover: hover) and (pointer: fine) {
  html { scroll-snap-type: y proximity; }
  .hero,
  .release { scroll-snap-align: start; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 820px) {
  .release__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(30px, 6vh, 44px);
  }
  .cover  { width: min(78vw, 340px); }
  .info   { width: 100%; max-width: 460px; text-align: center; }
  .row    { text-align: left; }
  .release { padding-top: clamp(64px, 14vh, 110px); }
}

@media (max-width: 420px) {
  .row { padding: 13px 15px; gap: 12px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }

  .cover[data-reveal] { transform: none; }
  .cover__img { clip-path: none; transition: none; }
  .cover::before { opacity: 1; transition: none; }
  .row { opacity: 1; transform: none; transition: background var(--dur-2) linear; }

  .hero__name-inner {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .scroll-cue { animation: none; opacity: 1; }
  .scroll-cue__track { animation: none; }
  .ripple { display: none; }

  [data-reveal] {
    transition-duration: 1ms;
    transform: none;
  }
}