/* ==========================================================================
   D Planet — components: buttons, titles, frames, photo treatment, pricing,
   cards, equaliser, ticker, stats
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.2;
  text-align: center;
  padding: 1.05rem 2rem;
  border: 1.5px solid transparent;
  border-radius: 100rem;
  cursor: pointer;
  transition: box-shadow 350ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.btn-sm { padding: .9rem 1.6rem; }
.btn-lg { padding: 1.3rem 2.75rem; font-size: .8125rem; }

/* A shine that sweeps across the button on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  transition: left 700ms var(--ease-out);
}
.btn:hover::after { left: 130%; }

.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, var(--cyan), var(--violet) 25%, var(--magenta) 50%, var(--violet) 75%, var(--cyan));
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 22px rgba(255, 61, 200, .35), 0 0 44px rgba(58, 215, 255, .18);
  transition: background-position 600ms var(--ease), box-shadow 350ms var(--ease);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background-position: 100% 50%;
  box-shadow: 0 0 30px rgba(255, 61, 200, .6), 0 0 70px rgba(58, 215, 255, .3);
}

.btn-outline-primary,
.btn-ghost,
.btn-white {
  color: #fff;
  background: rgba(255, 255, 255, .02);
  border-color: var(--line-strong);
}
.btn-outline-primary:hover,
.btn-ghost:hover,
.btn-white:hover {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(58, 215, 255, .18);
}

/* Text link with a trailing neon rule that stretches on hover */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  background: none;
  border: 0;
  padding: 0;
}
.btn-link::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 1.5px;
  background: var(--neon);
  box-shadow: 0 0 8px rgba(58, 215, 255, .6);
  transition: width 450ms var(--ease-out);
}
.btn-link:hover { color: var(--cyan); }
.btn-link:hover::after { width: 3.75rem; }

/* Buttons that sit side by side in a paragraph */
p > .btn + .btn-link,
p > .btn + .btn { margin-left: 1.5rem; }
@media (max-width: 399.98px) {
  p > .btn + .btn-link { margin-left: 0; margin-top: 1.25rem; display: flex; }
}

/* ==========================================================================
   Equaliser — four bars bouncing out of step, the site's recurring beat
   ========================================================================== */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq i {
  display: block;
  width: 2px;
  height: 100%;
  background: var(--neon);
  background-size: 100% 12px;
  border-radius: 1px;
  transform-origin: bottom;
  animation: eqBounce 1100ms ease-in-out infinite;
}
.eq i:nth-child(2) { animation-duration: 800ms;  animation-delay: -200ms; }
.eq i:nth-child(3) { animation-duration: 1300ms; animation-delay: -500ms; }
.eq i:nth-child(4) { animation-duration: 950ms;  animation-delay: -350ms; }
.eq--lg { height: 22px; gap: 3px; }
.eq--lg i { width: 3px; }

/* ==========================================================================
   Section titles
   The serif lead-in becomes a magenta kicker above the heading, the core is
   set in the display face, and the trailing words sit quietly underneath.
   ========================================================================== */
.special-title {
  position: relative;
  margin-bottom: 3rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.125rem;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-dim);
}
.special-title em:first-child {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--magenta);
  text-shadow: 0 0 18px rgba(255, 61, 200, .45);
}
.special-title em:first-child::before {
  content: '';
  width: 2.5rem;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--magenta));
  box-shadow: 0 0 8px var(--magenta);
}
.text-center .special-title em:first-child,
.special-title.text-center em:first-child { justify-content: center; }
.text-center .special-title em:first-child::after {
  content: '';
  width: 2.5rem;
  height: 1.5px;
  background: linear-gradient(90deg, var(--magenta), transparent);
  box-shadow: 0 0 8px var(--magenta);
}

.special-title strong {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #fff;
  text-wrap: balance;
}

.special-title small:last-child {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cyan);
}
.special-title small:last-child::before {
  content: '';
  width: 3.5rem;
  height: 1.5px;
  background: var(--neon);
}
.text-center .special-title small:last-child { justify-content: center; }

@media (max-width: 991.98px) {
  .special-title { margin-bottom: 2rem; }
}

/* Word-by-word reveal. reveal.js wraps each word of a title in a mask; the
   words rise when their block scrolls into view. */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw__i {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 70ms + var(--reveal-delay, 0ms) + 120ms);
}
.is-visible .sw__i { transform: none; }

/* ==========================================================================
   Image frames and the photo grade
   Every photograph is graded to the rig — monochrome with a cyan-to-magenta
   wash — and bursts into full colour under the pointer. It also stitches
   stock from many shoots into one consistent look.
   ========================================================================== */
.img-frame-large,
.img-frame-small {
  position: relative;
  padding: 0;
  border-radius: 18px;
}
.img-frame-large::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(58, 215, 255, .8), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .06) 65%, rgba(255, 61, 200, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Offset neon outline that trails the frame, like a light echo */
.img-frame-large::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 61, 200, .35);
  transform: translate(1.1rem, 1.1rem);
  transition: transform 700ms var(--ease-out), border-color 500ms;
}
.img-frame-large:hover::after { transform: translate(.6rem, .6rem); border-color: rgba(58, 215, 255, .6); }
/* Stacked on a phone, leave room for the offset outline before the copy */
@media (max-width: 767.98px) {
  .img-frame-large { margin: 0 1.1rem 3rem 0; }
}

.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

.media-tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  background: var(--bg-raised);
}
.media-tile img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.25) brightness(.72);
  transition: filter 900ms var(--ease), transform 1200ms var(--ease-out);
}
.media-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--cyan), var(--violet) 50%, var(--magenta));
  mix-blend-mode: color;
  opacity: .75;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
}
.media-tile:hover img { filter: none; transform: scale(1.04); }
.media-tile:hover::after { opacity: 0; }
.media-tile__zoom {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  z-index: 2;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 61, 200, .9);
  box-shadow: 0 0 30px rgba(255, 61, 200, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 400ms var(--ease), transform 500ms var(--ease-out);
}
.media-tile:hover .media-tile__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.media-tile__zoom svg { width: 16px; height: 16px; }
/* The custom cursor does the zoom cue's job where it exists */
.has-cursor .media-tile__zoom { display: none; }

/* Curtain reveal: a framed photograph wipes open when its column arrives */
.js .reveal .img-frame-large .media-tile {
  clip-path: inset(0 100% 0 0 round 18px);
  transition: clip-path 1400ms var(--ease-in-out) 150ms;
}
.js .reveal--right .img-frame-large .media-tile { clip-path: inset(0 0 0 100% round 18px); }
.js .reveal.is-visible .img-frame-large .media-tile { clip-path: inset(0 0 0 0 round 18px); }
.js .reveal .img-frame-large .media-tile img { transform: scale(1.25); }
.js .reveal.is-visible .img-frame-large .media-tile img { transform: scale(1); transition: filter 900ms var(--ease), transform 1800ms var(--ease-out) 150ms; }
.js .reveal.is-visible .img-frame-large .media-tile:hover img { transform: scale(1.04); }

/* ==========================================================================
   Separator
   ========================================================================== */
.separator {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--line);
  border: 0;
  margin: 1.5rem 0;
}
.separator--warm { background: linear-gradient(90deg, transparent, rgba(255, 61, 200, .35), transparent); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-frame { padding: 1rem; border-radius: 22px; }
.price-grid {
  display: flex;
  flex-wrap: wrap;
}
.price-grid > * { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 575.98px) {
  .price-grid > * { flex: 0 0 100%; max-width: 100%; }
  .price-grid__col.col-rule,
  .price-grid__col.col-rule-warm { border-top: 1px solid var(--line); }
}

.price-cell {
  padding: 2rem 1rem;
  text-align: center;
}

.price-item { text-align: center; }
.price-item__label {
  display: block;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: .5rem;
}
.price-item__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 24px rgba(58, 215, 255, .35);
}
.price-item__note {
  display: block;
  font-size: .9375rem;
  color: var(--text-dim);
  margin-top: .35rem;
}
.price-item .btn { margin-top: 1.5rem; }

/* The neon band behind the events pricing */
.price-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 0% 30%, rgba(58, 215, 255, .12), transparent 70%),
    radial-gradient(60% 70% at 100% 70%, rgba(255, 61, 200, .14), transparent 70%),
    var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   Terms strip — six icon columns with hairline separators
   ========================================================================== */
.terms-strip { text-align: center; }
.terms-strip__item { padding: 1.75rem .5rem; }
.terms-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--cyan);
  box-shadow: inset 0 0 18px rgba(58, 215, 255, .12);
  transition: box-shadow 400ms, border-color 400ms, color 400ms, transform 500ms var(--ease-out);
}
.terms-strip__item:hover .terms-strip__icon {
  color: var(--magenta);
  border-color: var(--magenta);
  box-shadow: var(--glow-magenta), inset 0 0 18px rgba(255, 61, 200, .2);
  transform: translateY(-4px);
}
.terms-strip__icon svg { width: 24px; height: 24px; }
.terms-strip p { margin-bottom: 0; }

/* ==========================================================================
   Stat / fact block — figures count up as they arrive
   ========================================================================== */
.fact {
  text-align: center;
  padding: 1.5rem .5rem;
}
.fact__figure,
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  letter-spacing: -.05em;
  line-height: 1;
  background: var(--neon);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.fact__label,
.stat__label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-top: .75rem;
  color: var(--text-dim);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { padding: 2.25rem 1rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
@media (max-width: 767.98px) {
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat__num { font-size: clamp(2.75rem, 5vw, 4.5rem); }
}

/* ==========================================================================
   Circular media
   A round photo in a thin neon ring, with a magenta arc that sweeps round on
   hover while the photograph warms into colour. Size is set with --circle.
   ========================================================================== */
.circle-media {
  position: relative;
  flex: 0 0 auto;
  width: var(--circle, 7rem);
  height: var(--circle, 7rem);
  border-radius: 50%;
  isolation: isolate;
}

.circle-media__img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  background: var(--bg-raised);
}
.circle-media__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.1) brightness(.85);
  transition: transform 900ms var(--ease), filter 700ms var(--ease);
}
.circle-media__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--cyan), var(--magenta));
  mix-blend-mode: color;
  opacity: .7;
  transition: opacity 700ms var(--ease);
}
.circle-media:hover .circle-media__img img,
a:hover .circle-media .circle-media__img img,
.card-glow:hover .circle-media__img img,
.style-tile:hover .circle-media__img img { transform: scale(1.1); filter: none; }
.circle-media:hover .circle-media__img::after,
.card-glow:hover .circle-media__img::after,
.style-tile:hover .circle-media__img::after { opacity: 0; }

/* Steady outer ring */
.circle-media::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(58, 215, 255, .45);
  box-shadow: 0 0 14px rgba(58, 215, 255, .15);
  transition: transform 520ms var(--ease), border-color 400ms, box-shadow 400ms;
}
.circle-media:hover::before,
.card-glow:hover .circle-media::before,
.style-tile:hover .circle-media::before {
  transform: scale(1.06);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* Magenta arc that rotates on hover */
.circle-media::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--magenta);
  filter: drop-shadow(0 0 4px var(--magenta));
  transform: rotate(-40deg);
  transition: transform 900ms var(--ease-out);
}
.circle-media:hover::after,
.card-glow:hover .circle-media::after,
.style-tile:hover .circle-media::after { transform: rotate(200deg); }

.circle-media__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 2;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--neon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(255, 61, 200, .5);
}
.circle-media__badge svg { width: 14px; height: 14px; }

.circle-media--sm { --circle: 5rem; }
.circle-media--lg { --circle: 9rem; }
.circle-media--center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Neon card
   A glass panel whose border carries a travelling band of light: a conic
   gradient masked down to the edge. The angle animates through a registered
   property; where @property is unsupported the ring simply holds still.
   ========================================================================== */
@property --brd-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.card-glow {
  position: relative;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  isolation: isolate;
  transition: box-shadow 500ms var(--ease), background-color 500ms;
  transform-style: preserve-3d;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--brd-angle),
              rgba(255, 255, 255, .08) 0deg,
              var(--cyan) 50deg,
              rgba(255, 255, 255, .08) 110deg,
              rgba(255, 255, 255, .08) 180deg,
              var(--magenta) 230deg,
              rgba(255, 255, 255, .08) 290deg,
              rgba(255, 255, 255, .08) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: borderTravel 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* Pointer-tracked spotlight inside the card (position set by motion.js) */
.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgba(58, 215, 255, .12), transparent 45%);
  opacity: 0;
  transition: opacity 500ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.card-glow:hover::after { opacity: 1; }
.card-glow > * { position: relative; z-index: 1; }
.card-glow:hover {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 40px -10px rgba(255, 61, 200, .35);
}
.card-glow:hover::before { animation-duration: 2.5s; }

@media (prefers-reduced-motion: reduce) {
  .card-glow::before,
  .card-glow:hover::before { animation: none; }
}

/* ==========================================================================
   Rating badge
   ========================================================================== */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 100rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text);
  background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.rating-badge svg { width: 13px; height: 13px; color: #ffd166; filter: drop-shadow(0 0 6px rgba(255, 209, 102, .6)); }
.rating-badge strong { color: #fff; font-size: .9375rem; letter-spacing: 0; }

/* ==========================================================================
   Ticker — giant words gliding across the screen, two rows running against
   each other. CSS runs it; motion.js takes over to make it react to scroll.
   ========================================================================== */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(58, 215, 255, .05), rgba(255, 61, 200, .05));
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__row {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.ticker__row--reverse { animation-direction: reverse; animation-duration: 70s; }
.ticker__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.ticker__row--reverse .ticker__item {
  font-family: var(--font-outline);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .35);
}
.ticker__item:nth-child(3n+2) { color: var(--cyan); text-shadow: 0 0 30px rgba(58, 215, 255, .45); }
.ticker__row--reverse .ticker__item:nth-child(3n+2) { color: transparent; -webkit-text-stroke-color: var(--magenta); text-shadow: none; }
.ticker__item svg {
  width: .5em;
  height: .5em;
  color: var(--magenta);
  filter: drop-shadow(0 0 8px var(--magenta));
  flex: 0 0 auto;
}
.ticker.is-driven .ticker__row { animation: none; }