/* CueClass site — backgrounds and decorations of the themed "六種主題" section (see themes.css).
   One full-bleed layer per theme; the active one fades in (opacity) and its pieces slide into
   place (transform). Reduced motion: layers switch instantly. All pieces are CSS / inline SVG. */

.theme-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tb {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms ease;
}

.tb > * {
  position: absolute;
  display: block;
  transform: translate3d(0, 24px, 0) scale(0.96);
  transition: transform 520ms cubic-bezier(0.2, 0.9, 0.1, 1);
}

.themes[data-theme="soft-glass"] .tb-soft-glass,
.themes[data-theme="paper-parade"] .tb-paper-parade,
.themes[data-theme="pop-collage"] .tb-pop-collage,
.themes[data-theme="playful-desk"] .tb-playful-desk,
.themes[data-theme="pixel-sky"] .tb-pixel-sky,
.themes[data-theme="halftone-comic"] .tb-halftone-comic {
  opacity: 1;
}

.themes[data-theme="soft-glass"] .tb-soft-glass > *,
.themes[data-theme="paper-parade"] .tb-paper-parade > *,
.themes[data-theme="pop-collage"] .tb-pop-collage > *,
.themes[data-theme="playful-desk"] .tb-playful-desk > *,
.themes[data-theme="pixel-sky"] .tb-pixel-sky > *,
.themes[data-theme="halftone-comic"] .tb-halftone-comic > * {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tb,
  .tb > * {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- soft glass: warm sand, orange glow, glass */

.tb-soft-glass {
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255, 178, 122, 0.55), transparent 62%),
    radial-gradient(700px 500px at 0% 100%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(160deg, #f3ece3 0%, #efe7dd 45%, #e4d8ca 100%);
}

.sg-orb {
  right: 6%;
  top: 70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffc08f, #ff7a1a 56%, #e4570a);
  box-shadow: 0 30px 70px -10px rgba(255, 122, 26, 0.55);
}

.sg-ring {
  left: -120px;
  bottom: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 60%);
}

.themes[data-theme="soft-glass"] .tc-slide .screen-bezel {
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

.themes[data-theme="soft-glass"] .themes-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7a1a;
}

/* ---------------------------------------------------------------- paper parade: cream paper, doodles, marker */

.tb-paper-parade {
  background-color: #fbf7ee;
  background-image: repeating-linear-gradient(0deg, transparent 0 35px, rgba(26, 26, 26, 0.05) 35px 36px);
}

.pp-string {
  right: 3%;
  top: 24px;
  width: 200px;
}

.pp-kids {
  right: 5%;
  bottom: 28px;
  width: 150px;
}

.themes[data-theme="paper-parade"] .showcase-head h2 {
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-6 90-8 194-5' fill='none' stroke='%23F7C530' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% 0.45em no-repeat;
}

.themes[data-theme="paper-parade"] .themes-label {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
}

/* ---------------------------------------------------------------- pop collage: tile wall, tape, starburst */

.tb-pop-collage {
  background: var(--tiles), #f4f4f2;
}

.pc-tape {
  right: 8%;
  top: 56px;
  width: 170px;
  height: 26px;
  background: var(--checker);
  border: 2px solid #111111;
  rotate: 8deg;
}

.pc-burst {
  left: -40px;
  bottom: -30px;
  width: 220px;
  aspect-ratio: 204 / 114;
  background: var(--burst) center / 100% 100% no-repeat;
  rotate: -12deg;
}

/* ---------------------------------------------------------------- playful desk: cardboard, braces, swoosh */

.tb-playful-desk {
  background:
    radial-gradient(800px 420px at 100% 0%, rgba(255, 253, 247, 0.55), transparent 60%),
    linear-gradient(180deg, #e9dcc7 0%, #dfcfb5 100%);
}

.pd-arc {
  left: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 6px dashed #ff5a2c;
}

.pd-flag {
  right: 4%;
  top: 46px;
  width: 64px;
  height: 64px;
  background: repeating-conic-gradient(#171717 0 25%, #fffdf7 0 50%) 0 0 / 16px 16px;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(160, 128, 84, 0.4);
  rotate: 8deg;
}

.pd-pencil {
  right: 12%;
  bottom: 44px;
  width: 200px;
  height: 18px;
  border-radius: 4px 9px 9px 4px;
  background: linear-gradient(90deg, #f7a6a6 0 12%, #c9cfd6 12% 18%, #ffc83d 18% 86%, #f3d9b3 86%);
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  rotate: -8deg;
}

.themes[data-theme="playful-desk"] .showcase-head h2::before,
.themes[data-theme="playful-desk"] .showcase-head h2::after {
  color: #ff5a2c;
  font-weight: 800;
}

.themes[data-theme="playful-desk"] .showcase-head h2::before {
  content: "{" / "";
  margin-right: 0.08em;
}

.themes[data-theme="playful-desk"] .showcase-head h2::after {
  content: "}" / "";
  margin-left: 0.08em;
}

/* ---------------------------------------------------------------- pixel sky: sky gradient, pixel clouds and sun */

.tb-pixel-sky {
  background: linear-gradient(180deg, #8fd3f0 0%, #b9e4f6 38%, #def2fb 100%);
}

.tb-pixel-sky svg {
  image-rendering: pixelated;
}

.ps-cloud-1 {
  right: 28%;
  top: 44px;
  width: 176px;
}

.ps-cloud-2 {
  right: 18%;
  bottom: 120px;
  width: 128px;
}

.ps-sun {
  right: 6%;
  top: 48px;
  width: 80px;
}

.themes[data-theme="pixel-sky"] .showcase-head h2 {
  letter-spacing: 0.04em;
}

.themes[data-theme="pixel-sky"] .themes-label {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------- halftone comic: yellow page, dots, speed lines */

.tb-halftone-comic {
  background: #ffd21f;
}

.hc-dots {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, #111111 0 30%, transparent 33%) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0 30%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0 30%, transparent 70%);
}

.hc-dots-1 {
  right: 0;
  top: 0;
}

.hc-dots-2 {
  left: 0;
  bottom: 0;
  rotate: 180deg;
}

.hc-lines {
  left: 0;
  right: 0;
  width: auto;
  top: 46%;
  height: 120px;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(17, 17, 17, 0.12) 46px 48px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}

@media (max-width: 760px) {
  .pp-string,
  .sg-ring,
  .pd-pencil,
  .ps-cloud-2 {
    display: none;
  }
  .pp-kids {
    width: 96px;
    bottom: 12px;
  }
  .sg-orb {
    width: 96px;
    height: 96px;
    top: 24px;
  }
  .ps-sun,
  .pd-flag {
    width: 48px;
    top: 24px;
  }
  .pd-flag {
    height: 48px;
  }
}