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

html,
body {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0c0b0a;
  color: #e9e4dc;
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Demo section ---------- */

.team {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 96px) 16px calc(clamp(40px, 8vw, 96px) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.team__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a8f80;
}

.team__title {
  margin: 0 0 clamp(24px, 5vw, 44px);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(32px, 6vw, 52px);
  letter-spacing: 0.01em;
}

.demos {
  max-width: 760px;
  margin: 0 auto;
}

.demo__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b3a795;
}

.demo__label span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid #4a433a;
  border-radius: 999px;
  color: #e9e4dc;
}

.team__hint {
  margin: 28px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #7d7468;
}

.hint--touch {
  display: none;
}

/* ---------- Option C: Hosts & DJs split ---------- */

.demo--split {
  max-width: 920px;
  margin: clamp(64px, 10vw, 120px) auto 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: clamp(14px, 3.5vw, 40px);
}

.split__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.spotlight.spotlight--panel {
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  transition-property: --p, filter;
}

.split__line {
  background: linear-gradient(
    to bottom,
    rgba(201, 182, 150, 0) 0%,
    rgba(201, 182, 150, 0.5) 18%,
    rgba(201, 182, 150, 0.5) 72%,
    rgba(201, 182, 150, 0) 100%
  );
}

.split__name {
  margin-top: clamp(14px, 2.5vw, 22px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* keep the text optically centred despite trailing letter-spacing */
  padding-left: 0.22em;
  color: #857b6e;
  transition: color 1.2s ease;
}

.split__cta {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9b696;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* The side that is NOT lit sinks a little further into the dark */
.split .spotlight--panel {
  filter: brightness(1);
}

.split.has-lit .split__item:not(.is-lit) .spotlight--panel {
  filter: brightness(0.7);
}

.split__item.is-lit .split__name,
.split__item:focus-visible .split__name {
  color: #f3ead9;
  transition-duration: 1.6s;
}

.split__item.is-lit .split__cta,
.split__item:focus-visible .split__cta {
  opacity: 1;
  transition-delay: 0.6s;
}

.split__item:focus-visible .spotlight--panel {
  box-shadow: 0 0 0 2px #0c0b0a, 0 0 0 4px #b9a98f;
}

@media (hover: hover) and (pointer: fine) {
  .split:hover .split__item:not(:hover) .spotlight--panel {
    filter: brightness(0.7);
  }

  .split__item:hover .split__name {
    color: #f3ead9;
    transition-duration: 1.6s;
  }

  .split__item:hover .split__cta {
    opacity: 1;
    transition-delay: 0.6s;
  }
}

@media (max-width: 480px) {
  .split__cta {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* Placeholder destination sections */
.dest {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(64px, 12vw, 140px) 16px;
  border-top: 1px solid #221f1b;
  text-align: center;
}

.dest__text {
  margin: 0 0 28px;
  color: #9a8f80;
}

.dest__back {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #c9b696;
  text-decoration: none;
}

.dest__back:hover {
  text-decoration: underline;
}

@media (hover: none), (pointer: coarse) {
  .hint--hover { display: none; }
  .hint--touch { display: inline; }
}

/* ---------- Spotlight effect ---------- */

/* --p = light level, 0 (dark) → 1 (fully lit). Animatable thanks to @property. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.spotlight {
  --p: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #0b0a09;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  /* Light going OFF: a bit quicker */
  transition: --p 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.spotlight img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.spotlight__frame {
  position: absolute;
  inset: 0;
}

/* Lit photo is revealed by a pool of light that spills down from the lamp above */
.spotlight__light {
  opacity: clamp(0, calc(var(--p) * 1.6), 1);
  -webkit-mask-image: radial-gradient(
    ellipse calc(8% + var(--p) * 192%) calc(0.5% + var(--p) * 280%) at 50% -8%,
    #000 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse calc(8% + var(--p) * 192%) calc(0.5% + var(--p) * 280%) at 50% -8%,
    #000 50%,
    transparent 100%
  );
}

/* Warm beam that blooms while the light warms up, then settles */
.spotlight__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 10% 6% at 50% 0%, rgba(255, 244, 222, 0.9), transparent 100%),
    radial-gradient(ellipse 24% 80% at 50% -6%, rgba(255, 232, 196, 0.42), rgba(255, 232, 196, 0.1) 55%, transparent 78%);
  opacity: calc(var(--p) * (1 - var(--p)) * 4 * 0.6 + var(--p) * 0.1);
}

/* Light going ON: slow, soft warm-up */
.spotlight.is-lit,
.spotlight:focus-visible,
.split__item.is-lit .spotlight,
.split__item:focus-visible .spotlight {
  --p: 1;
  transition-duration: 2.2s;
  transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .spotlight:hover,
  .split__item:hover .spotlight {
    --p: 1;
    transition-duration: 2.2s;
    transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
}

.spotlight:focus-visible {
  box-shadow: 0 0 0 2px #0c0b0a, 0 0 0 4px #b9a98f;
}

/* Browsers without @property (class added by script.js): soft cross-fade fallback */
.spotlight.no-property .spotlight__light {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.spotlight.no-property .spotlight__glow {
  opacity: 0;
}

.spotlight.no-property.is-lit .spotlight__light,
.split__item.is-lit .spotlight.no-property .spotlight__light {
  opacity: 1;
  transition-duration: 2s;
}

@media (hover: hover) and (pointer: fine) {
  .spotlight.no-property:hover .spotlight__light,
  .split__item:hover .spotlight.no-property .spotlight__light {
    opacity: 1;
    transition-duration: 2s;
  }
}

/* Reduced motion: simple quick fade, no spreading light */
@media (prefers-reduced-motion: reduce) {
  .spotlight,
  .spotlight:hover,
  .spotlight.is-lit {
    transition-duration: 0.4s;
  }

  .spotlight__light {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Option D: Tear reveal ---------- */

.demo--tear {
  max-width: 760px;
  margin: clamp(64px, 10vw, 120px) auto 0;
}

.tear {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #0b0a09;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* Behind the photo: the lit photo, revealed through the tear, its own light coming up */
.tear__back {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tear__back-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
  transform: scale(1.04);
  transition: filter 1.8s cubic-bezier(0.3, 0, 0.2, 1), transform 2.4s cubic-bezier(0.2, 0, 0.1, 1);
}

.tear__back-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 12% 8% at 50% 0%, rgba(255, 244, 222, 0.9), transparent 100%),
    radial-gradient(ellipse 28% 85% at 50% -6%, rgba(255, 232, 196, 0.38), rgba(255, 232, 196, 0.08) 55%, transparent 78%);
  opacity: 0;
  transition: opacity 1.6s ease 0.2s;
}

.tear.is-open .tear__back-img {
  filter: brightness(1) saturate(1);
  transform: scale(1);
}

.tear.is-open .tear__back-glow {
  opacity: 1;
}

/* Content that sits in the opened gap */
.tear__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(16px, 6%, 48px) clamp(20px, 7%, 56px);
  text-align: center;
  background: linear-gradient(to top, rgba(8, 7, 6, 0.85) 0%, rgba(8, 7, 6, 0.35) 45%, transparent 75%);
  pointer-events: none;
}

.tear.is-open .tear__content {
  pointer-events: auto;
}

.tear__content > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tear.is-open .tear__content > * {
  opacity: 1;
  transform: none;
}

.tear.is-open .tear__eyebrow  { transition-delay: 0.55s; }
.tear.is-open .tear__title    { transition-delay: 0.7s; }
.tear.is-open .tear__text     { transition-delay: 0.85s; }
.tear.is-open .tear__actions  { transition-delay: 1s; }
.tear.is-open .tear__close    { transition-delay: 1.3s; }

.tear__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9b696;
}

.tear__title {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.05;
  color: #f6f0e6;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}

.tear__text {
  max-width: 34ch;
  margin: 0 0 22px;
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 1.5;
  color: #d8cfc2;
}

.tear__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tear__btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid rgba(201, 182, 150, 0.7);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f6f0e6;
  text-decoration: none;
  background: rgba(12, 11, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.tear__btn:hover,
.tear__btn:focus-visible {
  background: #e9dcc4;
  border-color: #e9dcc4;
  color: #141210;
  outline: none;
}

.tear__close {
  margin-top: 18px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f8474;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tear__close:hover {
  color: #e9dcc4;
}

/* The torn photo (WebGL) */
.tear__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Click target on top; turns itself off once open so the content is reachable */
.tear__trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
}

.tear.is-open .tear__trigger {
  /* keep a thin band at the top so a click on the torn halves still closes it */
  height: 24%;
}

.tear__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px #b9a98f;
}

.tear__cue {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(233, 220, 196, 0.75);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

.tear__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, rgba(233, 220, 196, 0.9));
  animation: tear-cue 2.4s ease-in-out infinite;
}

@keyframes tear-cue {
  0%, 100% { transform: scaleY(0.6); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

.tear.is-open .tear__cue,
.tear.is-busy .tear__cue {
  opacity: 0;
}

/* Fallback halves (no WebGL): two CSS layers with a jagged edge that slide apart */
.tear__fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tear.no-webgl .tear__fallback {
  display: block;
}

.tear.no-webgl .tear__canvas {
  display: none;
}

.tear__half {
  position: absolute;
  inset: 0;
  background: url("images/team-dark.webp") center / cover no-repeat;
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.2, 1);
}

.tear__half--left {
  clip-path: polygon(0 0, 51% 0, 49% 8%, 52% 17%, 48% 27%, 51% 36%, 49% 47%, 53% 56%, 48% 66%, 51% 76%, 49% 87%, 52% 100%, 0 100%);
}

.tear__half--right {
  clip-path: polygon(51% 0, 100% 0, 100% 100%, 52% 100%, 49% 87%, 51% 76%, 48% 66%, 53% 56%, 49% 47%, 51% 36%, 48% 27%, 52% 17%, 49% 8%);
}

.tear.no-webgl.is-open .tear__half--left  { transform: translateX(-104%) rotate(-2deg); }
.tear.no-webgl.is-open .tear__half--right { transform: translateX(104%) rotate(2deg); }

@media (prefers-reduced-motion: reduce) {
  .tear__cue-line { animation: none; }
  .tear__half { transition-duration: 0.4s; }
  .tear__content > * { transition-duration: 0.3s; transition-delay: 0s !important; }
}