/* ==================== AURORA ==================== */
/* Signature palette: charcoal-sky. All selectors scoped under .pg-aurora.    */
/* Design: aurora blobs drift behind glassy panels; name in gradient Fraunces; */
/* image cards tilt at slight 3D angles and float on staggered y-loops.       */

/* ---- root ---- */
.pg-aurora {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
}

/* ---- ambient aurora field ---- */
/* sits at z-index 0 behind all content; blobs are large blurred ellipses     */
.pg-aurora .ar-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pg-aurora .ar-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}

/* blob 1 — upper-left, accent-dominant */
.pg-aurora .ar-blob-1 {
  width: 72cqw;
  height: 60cqw;
  top: -12cqw;
  left: -18cqw;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 65%, var(--bg)) 0%,
    transparent 70%
  );
}

/* blob 2 — upper-right, ink/accent mix */
.pg-aurora .ar-blob-2 {
  width: 58cqw;
  height: 50cqw;
  top: 18cqw;
  right: -16cqw;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 35%, var(--ink)) 0%,
    transparent 65%
  );
}

/* blob 3 — lower-centre, surface-tinted accent */
.pg-aurora .ar-blob-3 {
  width: 60cqw;
  height: 48cqw;
  top: 55cqw;
  left: 15cqw;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 42%, var(--surface)) 0%,
    transparent 62%
  );
}

/* max 3 concurrent ambient motions; all loops inside reduced-motion guard */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-aurora .ar-blob-1 {
    animation: ar-drift-1 22s ease-in-out infinite;
  }
  .stage.animate .pg-aurora .ar-blob-2 {
    animation: ar-drift-2 28s ease-in-out infinite;
  }
  .stage.animate .pg-aurora .ar-blob-3 {
    animation: ar-drift-3 19s ease-in-out infinite;
  }

  @keyframes ar-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(64px, 48px) scale(1.07); }
    66%       { transform: translate(-32px, 80px) scale(.95); }
  }
  @keyframes ar-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%       { transform: translate(-72px, 56px) scale(1.09); }
    72%       { transform: translate(48px, -32px) scale(.93); }
  }
  @keyframes ar-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-48px, -64px) scale(1.11); }
  }
}

/* ---- z-stack: content above field ---- */
.pg-aurora .ar-header,
.pg-aurora .ar-hero,
.pg-aurora .ar-bio,
.pg-aurora .ar-gallery,
.pg-aurora .ar-prods,
.pg-aurora .ar-tracks,
.pg-aurora .ar-reel,
.pg-aurora .ar-cols,
.pg-aurora .ar-foot {
  position: relative;
  z-index: 1;
}

/* ---- glass surface — shared mixin ---- */
.pg-aurora .ar-glass {
  position: relative;       /* stacking context for ::after sheen */
  overflow: hidden;         /* clip the gradient sweep */
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
}

/* Sheen pseudo — one very slow gradient sweep across each glass panel */
.pg-aurora .ar-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 28%,
    color-mix(in srgb, var(--ink) 6%, transparent) 50%,
    transparent 72%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  z-index: 1;
}

/* ---- header ---- */
.pg-aurora .ar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 2.4cqw, 1.4rem) clamp(1.2rem, 4cqw, 2.4rem);
}

.pg-aurora .ar-logo {
  max-height: 38px;
  max-width: 130px;
  object-fit: contain;
}

.pg-aurora .ar-logo-gap {
  display: block;
  width: 1px;
}

.pg-aurora .ar-tagline {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- hero ---- */
.pg-aurora .ar-hero {
  position: relative;
  min-height: clamp(520px, 90cqh, 800px);
  display: grid;
  align-content: end;
  padding: clamp(2.4rem, 6cqw, 4rem) clamp(1.2rem, 4cqw, 2.4rem);
  overflow: hidden;
}

.pg-aurora .ar-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
  opacity: .22;
  z-index: 0;
}

.pg-aurora .ar-hero-copy {
  position: relative;
  z-index: 1;
}

/* huge name — Fraunces italic with gradient text fill */
.pg-aurora .ar-name {
  font: 400 italic clamp(4rem, 18cqw, 11rem)/.82 'Fraunces', serif;
  letter-spacing: -.02em;
  text-wrap: balance;
  background: linear-gradient(
    138deg,
    var(--ink) 0%,
    color-mix(in srgb, var(--accent) 88%, var(--ink)) 48%,
    color-mix(in srgb, var(--accent) 58%, var(--bg)) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- stats as floating glowing chips ---- */
.pg-aurora .ar-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 1.4cqw, .9rem);
  margin-top: clamp(1.6rem, 3.5cqw, 2.4rem);
}

.pg-aurora .ar-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  padding: .85rem 1.35rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pg-aurora .ar-orb b {
  display: block;
  font: 400 italic clamp(1.4rem, 3.5cqw, 2rem)/1 'Fraunces', serif;
  color: var(--accent);
}

.pg-aurora .ar-orb span {
  font: 500 8px/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* orb breathe — very gentle scale pulse, staggered, each chip lives independently */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-aurora .ar-orb {
    animation: ar-orb-breathe 8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1.25s);
  }
  @keyframes ar-orb-breathe {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
    50% {
      transform: scale(1.038);
      box-shadow: 0 0 22px 4px color-mix(in srgb, var(--accent) 14%, transparent);
    }
  }
}

/* ---- bio glass panel ---- */
.pg-aurora .ar-bio {
  margin: clamp(1.8rem, 4.5cqw, 3.2rem) clamp(1.2rem, 4cqw, 2.4rem);
  padding: clamp(1.6rem, 3.8cqw, 2.6rem);
}

.pg-aurora .ar-kicker {
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}

.pg-aurora .ar-bio-text {
  font: 400 clamp(1rem, 2.1cqw, 1.13rem)/1.68 var(--font-serif);
  max-width: 68ch;
}

/* ---- 3D image gallery ---- */
.pg-aurora .ar-gallery {
  padding: clamp(1.8rem, 4.5cqw, 3.2rem) clamp(1.2rem, 4cqw, 2.4rem);
}

/* perspective applied to the grid wrapper; each card transforms in that space */
.pg-aurora .ar-stage3d {
  perspective: 1100px;
  perspective-origin: 50% 38%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.8cqw, 1.2rem);
}

.pg-aurora .ar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  /* each card sits at a slightly different Z/tilt depending on its index  */
  transform:
    rotateY(calc((var(--ci, 0) - 1) * 3.5deg))
    rotateX(calc(((var(--ci, 0) + 1) % 3 - 1) * 2.2deg))
    translateZ(calc((var(--ci, 0) % 3) * -12px));
  transition: transform .5s cubic-bezier(.22,.84,.22,1),
              box-shadow .5s ease,
              border-color .4s ease;
  will-change: transform;
}

.pg-aurora .ar-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.pg-aurora .ar-card figcaption {
  padding: .38rem .6rem;
  font: 400 8px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}

/* hover: card rights itself and lifts towards the viewer */
.pg-aurora .ar-card:hover {
  transform: rotateY(0deg) rotateX(0deg) translateZ(28px) !important;
  box-shadow:
    0 24px 64px color-mix(in srgb, var(--accent) 18%, transparent),
    0 4px 16px color-mix(in srgb, var(--bg) 40%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  z-index: 3;
}

/* card y-drift — staggered 8-10 s loops */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-aurora .ar-card {
    animation: ar-card-float 9s ease-in-out infinite;
    animation-delay: calc(var(--ci, 0) * 1.15s);
  }
  .stage.animate .pg-aurora .ar-card:hover {
    animation: none;
  }

  @keyframes ar-card-float {
    0%, 100% { transform:
      rotateY(calc((var(--ci, 0) - 1) * 3.5deg))
      rotateX(calc(((var(--ci, 0) + 1) % 3 - 1) * 2.2deg))
      translateZ(calc((var(--ci, 0) % 3) * -12px))
      translateY(0); }
    50% { transform:
      rotateY(calc((var(--ci, 0) - 1) * 3.5deg))
      rotateX(calc(((var(--ci, 0) + 1) % 3 - 1) * 2.2deg))
      translateZ(calc((var(--ci, 0) % 3) * -12px))
      translateY(-9px); }
  }
}

/* ---- productions glass panel ---- */
.pg-aurora .ar-prods {
  margin: 0 clamp(1.2rem, 4cqw, 2.4rem) clamp(1.8rem, 4.5cqw, 3.2rem);
  padding: clamp(1.6rem, 3.8cqw, 2.6rem);
}

.pg-aurora .ar-prod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.2rem, 3cqw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.pg-aurora .ar-prod-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font: 400 .88rem/1.4 var(--font-body);
}

.pg-aurora .ar-prod-list li span {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--muted);
}

/* ---- tracks glass panel ---- */
.pg-aurora .ar-tracks {
  margin: 0 clamp(1.2rem, 4cqw, 2.4rem) clamp(1.8rem, 4.5cqw, 3.2rem);
  padding: clamp(1.6rem, 3.8cqw, 2.6rem) clamp(1.6rem, 3.8cqw, 2.6rem) clamp(.8rem, 2cqw, 1.2rem);
}

/* track rows: the shared .tracks/.track-row sit inside the glass; just spacing */
.pg-aurora .ar-tracks .tracks {
  margin-top: .6rem;
}

/* ---- youtube reel ---- */
.pg-aurora .ar-reel {
  margin: 0 clamp(1.2rem, 4cqw, 2.4rem) clamp(1.8rem, 4.5cqw, 3.2rem);
}

/* ---- works / publishers / territories columns ---- */
.pg-aurora .ar-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(.9rem, 2.2cqw, 1.4rem);
  padding: 0 clamp(1.2rem, 4cqw, 2.4rem);
  margin-bottom: clamp(1.8rem, 4.5cqw, 3.2rem);
}

.pg-aurora .ar-list-col {
  padding: clamp(1.2rem, 3cqw, 1.8rem);
}

.pg-aurora .ar-list-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.pg-aurora .ar-list-col li {
  padding: .48rem 0;
  font: 400 .86rem/1.4 var(--font-body);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

/* ---- shared "more" line ---- */
.pg-aurora .ar-more {
  margin-top: .9rem;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- custom sections glass panel ---- */
.pg-aurora .ar-sections {
  position: relative;
  z-index: 1;
  margin: 0 clamp(1.2rem, 4cqw, 2.4rem) clamp(1.8rem, 4.5cqw, 3.2rem);
}

/* Override xsec-zone padding to match aurora glass panel rhythm */
.pg-aurora .ar-sections .xsec-zone {
  padding: clamp(1.6rem, 3.8cqw, 2.6rem);
  gap: clamp(1.4rem, 3.5cqw, 2.4rem);
}

/* ---- footer ---- */
.pg-aurora .ar-foot {
  padding: clamp(1.8rem, 4.5cqw, 3.2rem) clamp(1.2rem, 4cqw, 2.4rem) 0;
  position: relative;
  z-index: 1;
}

.pg-aurora .ar-foot-inner {
  padding: clamp(1.4rem, 3.4cqw, 2.2rem) clamp(1.6rem, 3.8cqw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: .6rem;
}

.pg-aurora .ar-email {
  font: 400 italic clamp(.95rem, 2.2cqw, 1.15rem)/1 'Fraunces', serif;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pg-aurora .ar-soc {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.3rem;
}

/* ---- scroll-reveal flourish (additive — never hides content in base state) */
/* When the stage is running animations, glass panels gain an accent rim on    */
/* reveal. Base state is always fully legible.                                  */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-aurora .ar-glass {
    transition: box-shadow .55s ease;
  }
  .stage.animate .pg-aurora .ar-bio.in,
  .stage.animate .pg-aurora .ar-prods.in,
  .stage.animate .pg-aurora .ar-tracks.in,
  .stage.animate .pg-aurora .ar-list-col.in {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  }
}

/* ---- responsive ---- */
@container page (max-width: 620px) {
  .pg-aurora .ar-stage3d {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-aurora .ar-prod-list {
    grid-template-columns: 1fr;
  }
  .pg-aurora .ar-cols {
    grid-template-columns: 1fr;
  }
}

@container page (max-width: 390px) {
  .pg-aurora .ar-name {
    font-size: clamp(3rem, 24cqw, 5rem);
  }
  .pg-aurora .ar-stage3d {
    grid-template-columns: 1fr;
    perspective: none;
  }
  /* at 390px, 3D tilts are too cramped — flatten cards */
  .pg-aurora .ar-card {
    transform: none !important;
    animation: none !important;
  }
  .pg-aurora .ar-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 15%, transparent) !important;
  }
  .pg-aurora .ar-stats {
    gap: .4rem;
  }
  .pg-aurora .ar-orb {
    padding: .7rem 1rem;
  }
  .pg-aurora .ar-foot-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- ::selection & focus-visible ---- */

.pg-aurora ::selection {
  background: var(--accent);
  color: var(--bg);
}

.pg-aurora a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Glass sheen — one slow sweep per panel; ambient, motion-safe only ---- */

@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-aurora .ar-glass::after {
    animation: ar-sheen 26s ease-in-out infinite;
  }

  @keyframes ar-sheen {
    0%   { background-position: 220% 0; }
    42%  { background-position: -110% 0; }
    100% { background-position: 220% 0; }
  }
}