/* A single purchase, given a little gravity of its own. */
.hero-art { overflow: hidden; }
.scene-halo {
  position: absolute;
  width: 440px;
  height: 440px;
  max-width: 95%;
  max-height: 95%;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #475c31, #202d1a 48%, #10190e 85%);
  box-shadow: inset 0 0 0 1px #71854b, inset -15px -25px 55px #060b0590;
}
.scene-halo::after {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid #d5f49c26;
  border-radius: 50%;
}
.art-grid { opacity: .18; }
.orbital { border-color: #a8c66c75; z-index: 1; }
.orbital-one { width: 94%; height: 69%; }
.orbital-two { width: 85%; height: 86%; border-style: dashed; border-color: #c6db8a55; }
.orbital-satellite { position: absolute; top: 8%; left: 20%; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px #d5f58f; }
.orbital-two .orbital-satellite { top: 85%; left: 80%; width: 4px; height: 4px; background: #f5ffe5; }
.ticket-rig {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .28s ease-out;
}
.ticket {
  --notch-y: 82px;
  left: 50%;
  top: 26px;
  transform: translateX(-50%) rotate(-9deg) rotateY(-8deg);
  background: linear-gradient(135deg, #f0ffc1, #d5f776 27%, #c5ef60 58%, #9fce46);
  filter: none;
  transition: none;
  mask-image: radial-gradient(circle 12px at 0 var(--notch-y), transparent 98%, #000 100%), radial-gradient(circle 12px at 100% var(--notch-y), transparent 98%, #000 100%);
  mask-composite: intersect;
}
.hero-art:hover .ticket { transform: translateX(-50%) rotate(-9deg) rotateY(-8deg); }
.ticket::before, .ticket::after { display: none; }
.ticket-number { text-shadow: 0 1px #edffc0; }
.ticket-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(115deg, transparent 28%, #fff0 40%, #fffff4b0 48%, #e2fff780 52%, transparent 64%), radial-gradient(circle at var(--light-x, 50%) var(--light-y, 35%), #fff9, transparent 58%);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 50%, center;
  mix-blend-mode: soft-light;
  opacity: .85;
}
.ticket-shadow { top: auto; bottom: 27px; height: 28px; width: 230px; background: #080f05; transform: translateX(-50%) rotate(-9deg); filter: blur(12px); opacity: .55; }
.seal { z-index: 3; box-shadow: 0 8px 24px #17200c24; }
.art-caption { color: #708153; z-index: 4; }
.art-cross { color: #829951; z-index: 4; }
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #c4cbb7; background: transparent; color: var(--muted); padding: 9px 12px; border-radius: 30px; font: inherit; letter-spacing: .3px; cursor: pointer; }
.motion-toggle[hidden] { display: none !important; }
.motion-toggle:hover { border-color: #7b8c56; color: var(--ink); }
.motion-toggle svg { width: 12px; height: 12px; }
.motion-play, .motion-toggle[data-motion-active=false] .motion-pause { display: none; }
.motion-toggle[data-motion-active=false] .motion-play { display: block; }

html[data-effects=on] .ticket { animation: ticket-float 6.5s ease-in-out infinite; }
html[data-effects=on] .ticket-foil { animation: foil-pass 8s ease-in-out infinite; }
html[data-effects=on] .orbital-one { animation: orbit-drift 26s linear infinite; }
html[data-effects=on] .orbital-two { animation: orbit-cross 34s linear infinite reverse; }
html[data-effects=on] .ticket-shadow { animation: shadow-breathe 6.5s ease-in-out infinite; }
html[data-page-hidden=true] .hero-art *, .hero-art[data-scene-visible=false] * { animation-play-state: paused !important; }
html[data-effects=off] .ticket-rig { transform: none; transition: none; }
html[data-effects=off] .app-card:hover .app-phone { transform: translateX(-50%) rotate(8deg); }
html[data-effects=off] [data-reveal] { transition: none; }
[data-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.reveal-pending { opacity: 0; transform: translateY(26px); }
.reveal-pending:focus-within { opacity: 1; transform: none; }
.is-revealed { opacity: 1; transform: none; }

@keyframes ticket-float {
  0%, 100% { transform: translateX(-50%) translateY(5px) rotate(-9deg) rotateY(-8deg); }
  50% { transform: translateX(-50%) translateY(-9px) rotate(-5deg) rotateY(7deg); }
}
@keyframes foil-pass { 0%, 15% { background-position: 100% 50%, center; } 65%, 100% { background-position: -100% 50%, center; } }
@keyframes orbit-drift { to { transform: translate(-50%, -50%) rotate(335deg); } }
@keyframes orbit-cross { to { transform: translate(-50%, -50%) rotate(405deg); } }
@keyframes shadow-breathe { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: .3; scale: .84; } }

@media (max-width: 1100px) {
  .scene-halo { width: 360px; height: 390px; }
  .ticket { top: 36px; }
  .ticket-shadow { bottom: 26px; width: 200px; }
}
@media (max-width: 760px) {
  .hero-art { height: 430px; }
  .scene-halo { width: 340px; height: 350px; max-width: 92%; top: 47%; }
  .ticket { --notch-y: 72px; top: 23px; }
  .ticket-shadow { bottom: 23px; width: 190px; }
  .hero-foot > span:first-child { display: none; }
  .hero-foot { gap: 12px; }
  .motion-toggle { font-size: 8px; padding: 10px 11px; }
  .art-caption { right: 1%; }
  .seal { bottom: 0; }
}
@media (max-width: 360px) {
  .ticket { width: 212px; transform: translateX(-50%) rotate(-6deg); }
  html[data-effects=on] .ticket { animation-name: ticket-float-small; }
  .seal { width: 94px; height: 94px; left: 0; }
  .art-caption { font-size: 6px; }
}
@keyframes ticket-float-small { 0%, 100% { transform: translateX(-50%) translateY(4px) rotate(-6deg); } 50% { transform: translateX(-50%) translateY(-6px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) {
  .ticket-rig, html[data-effects=on] .ticket-rig { transform: none; }
  .ticket, .hero-art:hover .ticket { transform: translateX(-50%) rotate(-6deg); }
  .reveal-pending { opacity: 1; transform: none; }
  html[data-effects=off] [data-reveal] { transition: none; }
[data-reveal] { transition: none; }
}