/* CharaSelect trading-card intro shared by both Studio compositions. */
.studio-shell {
  perspective: 1050px;
  -webkit-perspective: 1050px;
  perspective-origin: 50% 46%;
}

/* Keep the live character card visually the same, but round the physical card
   and keep its border cream regardless of the selected character theme. */
.studio-card {
  border-color: var(--studio-cream, #fff0d2);
  border-radius: 24px;
}

/* The card back is part of the selected character's palette from its first
   paint. The logo stays white so every theme retains a readable brand mark. */
.studio-card-back {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid var(--studio-cream, #fff0d2);
  border-radius: inherit;
  background:
    radial-gradient(90% 78% at 92% 0%, color-mix(in srgb, var(--intro-card-glow, var(--theme-glow, rgba(255,54,68,.42))) 82%, transparent), transparent 62%),
    linear-gradient(155deg, var(--intro-card-a, var(--theme-panel-a, var(--theme-accent, #ff3644))) 0%, var(--intro-card-b, var(--theme-panel-b, var(--theme-accent-dark, #9f2630))) 100%);
  transition: background .48s ease, border-color .48s ease;
  pointer-events: none;
  transform: translateZ(2px);
}

.studio-card-back[hidden] {
  display: none !important;
}

.studio-card-back::before {
  position: absolute;
  inset: -12%;
  background: rgba(255,240,210,.14);
  content: "";
  transform: rotate(-8deg) scale(1.08);
  -webkit-mask: url('/assets/charaselect/logos/charaselect-no-arrow.svg') center / 132px 120px repeat;
  mask: url('/assets/charaselect/logos/charaselect-no-arrow.svg') center / 132px 120px repeat;
}

.studio-card-back__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(42%, 235px);
  max-height: 42%;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(74,10,16,.24));
}

/* Everything starts hidden behind the pending class. Full intro reveals the
   physical card first; repeat visits use the same post-flip reveal without the
   drop/flip so data can settle before anything is painted. */
html.studio-intro-pending .studio-card {
  opacity: 0;
  pointer-events: none;
}

html.studio-intro-pending body.studio-intro-running .studio-card {
  opacity: 1;
}

html.studio-intro-pending body.studio-intro-quick .studio-card {
  opacity: 0;
  transform: translate3d(0,10px,0) scale(.992);
}

html.studio-intro-pending.studio-intro-reveal body.studio-intro-quick .studio-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition:
    opacity .38s cubic-bezier(.2,.8,.2,1),
    transform .48s cubic-bezier(.16,.84,.28,1);
}

/* Neutral dark edge + cast shadow: visible thickness without creating a red
   duplicate-card stripe underneath the back. */
body.studio-intro-running .studio-card {
  overflow: hidden;
  border-color: var(--studio-cream, #fff0d2);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform, box-shadow;
  box-shadow:
    0 6px 0 #261018,
    2px 9px 0 #10070d,
    0 30px 52px rgba(0,0,0,.42);
}

/* Before the reveal, keep all surrounding UI hidden. The topbar never moves:
   .studio-home is fixed inside it, and transforming the ancestor changes the
   fixed element's containing block in Safari, which caused the final snap. */
html.studio-intro-pending .studio-topbar,
html.studio-intro-pending .studio-character-rail,
html.studio-intro-pending .studio-cta-row,
html.studio-intro-pending .studio-ticket--cta,
html.studio-intro-pending .studio-footer {
  opacity: 0;
  pointer-events: none;
}

html.studio-intro-pending .studio-character-rail {
  transform: translateY(-10px);
}

html.studio-intro-pending .studio-cta-row,
html.studio-intro-pending .studio-footer {
  transform: translateY(12px);
}

/* Render the page pattern with these same two complete-logo row layers both
   during and after the intro. Keeping the final representation identical to the
   animated representation prevents the top row from jumping when pending is
   removed. Odd/even full-logo rows still enter from opposite sides. */
.studio-pattern {
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.studio-pattern::before,
.studio-pattern::after {
  position: absolute;
  inset: 0;
  content: "" !important;
  background-image: url('/assets/charaselect/logos/charaselect-no-arrow.svg');
  background-position: center top;
  background-repeat: repeat;
  background-size: 128px 118px;
  opacity: .07;
  pointer-events: none;
  transform: translate3d(0,0,0);
}

.studio-pattern::before {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 118px, transparent 118px 236px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 118px, transparent 118px 236px);
}

.studio-pattern::after {
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 118px, #000 118px 236px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 118px, #000 118px 236px);
}

html.studio-intro-pending .studio-pattern {
  opacity: 0;
  pointer-events: none;
}

html.studio-intro-pending .studio-pattern::before,
html.studio-intro-pending .studio-pattern::after {
  will-change: transform;
  transition: transform .56s cubic-bezier(.16,.84,.28,1);
}

html.studio-intro-pending .studio-pattern::before {
  transform: translate3d(-118vw,0,0);
}

html.studio-intro-pending .studio-pattern::after {
  transform: translate3d(118vw,0,0);
}

html.studio-intro-pending.studio-intro-reveal .studio-pattern {
  opacity: 1;
  transition: opacity .28s ease-out;
}

html.studio-intro-pending.studio-intro-reveal .studio-pattern::before,
html.studio-intro-pending.studio-intro-reveal .studio-pattern::after {
  transform: translate3d(0,0,0);
}

/* Same post-card keyframe for both the full intro and repeat visits. */
html.studio-intro-pending.studio-intro-reveal .studio-topbar {
  opacity: 1;
  transition: opacity .46s cubic-bezier(.2,.8,.2,1);
}

html.studio-intro-pending.studio-intro-reveal .studio-character-rail,
html.studio-intro-pending.studio-intro-reveal .studio-cta-row,
html.studio-intro-pending.studio-intro-reveal .studio-footer {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .46s cubic-bezier(.2,.8,.2,1),
    transform .46s cubic-bezier(.2,.8,.2,1);
}

html.studio-intro-pending.studio-intro-reveal .studio-topbar { transition-delay: .035s; }
html.studio-intro-pending.studio-intro-reveal .studio-character-rail { transition-delay: .08s; }
html.studio-intro-pending.studio-intro-reveal .studio-cta-row { transition-delay: .13s; }
html.studio-intro-pending.studio-intro-reveal .studio-footer { transition-delay: .18s; }

@media (max-width: 760px) {
  .studio-card {
    border-radius: 20px;
  }

  .studio-card-back {
    border-width: 2px;
  }

  .studio-card-back::before {
    -webkit-mask-size: 104px 95px;
    mask-size: 104px 95px;
  }

  .studio-card-back__logo {
    width: min(48%, 195px);
  }

  body.studio-intro-running .studio-card {
    box-shadow:
      0 5px 0 #261018,
      2px 8px 0 #10070d,
      0 24px 40px rgba(0,0,0,.4);
  }

  .studio-pattern::before,
  .studio-pattern::after {
    background-size: 112px 103px;
  }

  .studio-pattern::before {
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 103px, transparent 103px 206px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 103px, transparent 103px 206px);
  }

  .studio-pattern::after {
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 103px, #000 103px 206px);
    mask-image: repeating-linear-gradient(to bottom, transparent 0 103px, #000 103px 206px);
  }
}


/* The CTAs rise as one grouped action. Keep the row present during the
   reveal so the ticket and Instagram button cannot paint in separate beats. */
html.studio-intro-pending .studio-cta-row {
  opacity: 1;
  transform: none;
  transition: none;
}

html.studio-intro-pending .studio-cta-row > * {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(.92);
  transform-origin: 50% 100%;
  will-change: opacity, transform;
  pointer-events: none;
}

html.studio-intro-pending.studio-intro-reveal .studio-cta-row {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

/* Preserve the disabled-ticket contract for past/unannounced events. */
html.studio-intro-pending.studio-intro-reveal .studio-cta-row > .studio-ticket--cta[aria-disabled="true"] {
  pointer-events: none;
}

html.studio-intro-pending.studio-intro-reveal .studio-cta-row > * {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .26s ease-out,
    transform .5s cubic-bezier(.18, 1.48, .34, 1);
  transition-delay: .07s;
}

@media (prefers-reduced-motion: reduce) {
  html.studio-intro-pending .studio-cta-row,
  html.studio-intro-pending .studio-cta-row > * {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  html.studio-intro-pending .studio-pattern::before,
  html.studio-intro-pending .studio-pattern::after,
  html.studio-intro-pending .studio-card,
  html.studio-intro-pending .studio-character-rail,
  html.studio-intro-pending .studio-cta-row,
  html.studio-intro-pending .studio-footer {
    transform: none;
    transition: none;
  }

  html.studio-intro-pending .studio-topbar {
    transition: none;
  }
}