/* Share mode (AXALS): subtle calibration scanline + phase ripple
   Rule: dynamic background applies to ticket + movie intro only.
   Receipt stays white and static. */

:root{
  --sans: "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink:#141414;
  --muted:#4e5c6a;
  --paper:#f8f8f6;
  --paper2:#fbfbfa;
  --line:#ccd4dd;
  --dash:#c1c8d0;
  --bg-a: rgba(22,106,168,.06);
  --bg-b: rgba(40,58,90,.035);
  --bg-c: rgba(20,30,48,.025);
  --panel-bg:rgba(255,255,255,.84);
  --panel-bg-soft:rgba(255,255,255,.92);
  --panel-border:#bfcddd;
  --panel-dash:#b8c7d8;
  --panel-ink:#1f2a35;
  --panel-ink-soft:#30475e;
}

body{
  background:
    radial-gradient(1200px 700px at -10% -20%, rgba(82,167,255,.22), rgba(82,167,255,0) 60%),
    radial-gradient(1000px 650px at 120% 10%, rgba(255,190,92,.16), rgba(255,190,92,0) 58%),
    linear-gradient(120deg, #edf4ff 0%, #f7fbff 45%, #fff8ef 100%);
}

.stage{
  border-color:rgba(88,124,165,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78)),
    repeating-linear-gradient(90deg, rgba(30,88,140,.04) 0 1px, transparent 1px 16px);
  box-shadow:0 14px 36px rgba(22,56,96,.14);
}

.ticket,
.movieSheet,
.receipt{
  border-color:#c8d3de;
  box-shadow:0 6px 20px rgba(28,54,88,.1);
}

.ticket,
.movieSheet{
  position:relative;
  overflow:hidden;
}

.ticket{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.028) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #fcfdff, #f4f7fa);
}

.movieSheet{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,254,.94));
}

.ticket:before,
.ticket:after,
.movieSheet:after{
  z-index:0;
}

.ticket > *,
.movieSheet > *{
  position:relative;
  z-index:1;
}

/* Dynamic layer: subtle scanline sweep + phase alignment ripple */
.ticket:after,
.movieSheet:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(130% 90% at -10% -15%, rgba(74,153,230,.1) 0%, rgba(74,153,230,0) 58%),
    radial-gradient(140% 95% at 110% 115%, rgba(255,186,92,.08) 0%, rgba(255,186,92,0) 62%),
    repeating-linear-gradient(0deg, rgba(20,50,86,.05) 0 1px, rgba(20,50,86,0) 1px 8px);
  background-size:150% 150%, 160% 160%, 100% 34px;
  background-position:0% 0%, 100% 100%, 0 0;
  opacity:.22;
  animation:axalsPhaseShift 34s ease-in-out infinite alternate, axalsScanSweep 18s linear infinite;
}

.receipt{
  background:#fff;
}

.receipt:before{
  display:none !important;
}

.sigil{
  background:linear-gradient(180deg, #ffffff, #f1f5fa);
  border-color:#c9d5e0;
}

.movieHeaderTag,
.brandTop .code{
  border-color:#bfcddd;
  background:linear-gradient(180deg, #ffffff, #f3f8ff);
}

.tagline{
  color:#465c72;
}

.barcodeSim{
  background:
    repeating-linear-gradient(90deg, #0e1520 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #ffffff, #f7fafc);
  background-size: calc(100% - 20px) 36px, 100% 100%;
  background-repeat:no-repeat;
  background-position:center 10px, 0 0;
}

@keyframes axalsPhaseShift{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-1.2%, 1%, 0); }
  100%{ transform:translate3d(1.2%, -1%, 0); }
}

@keyframes axalsScanSweep{
  from{ background-position:0% 0%, 100% 100%, 0 0; }
  to{ background-position:4% 6%, 96% 94%, 0 34px; }
}

@keyframes axalsReducePulse{
  0%,100%{ opacity:.16; }
  50%{ opacity:.22; }
}

@media (prefers-reduced-motion: reduce){
  .ticket:after,
  .movieSheet:after{
    animation:axalsReducePulse 80s ease-in-out infinite !important;
    transform:none !important;
  }
}