/* ==== Global styles (Always Together LP) ==== */
body { margin: 0; background: #f5fbfc; }
* { box-sizing: border-box; }
a { color: #ff7a54; }
a:hover { color: #e8623d; }
html { scroll-behavior: smooth; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes fade-in-load { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-drift { 0% { transform: scale(1.08) translate(0, 0); } 50% { transform: scale(1.14) translate(-1.5%, -1%); } 100% { transform: scale(1.08) translate(0, 0); } }
@keyframes badge-pop { 0%,100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.12) rotate(-8deg); } }
@keyframes pulse-cta { 0%,100% { box-shadow: 0 12px 30px rgba(255,122,84,0.3); } 50% { box-shadow: 0 12px 34px rgba(255,122,84,0.55); } }
@keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.sparkle { animation: twinkle 2.4s ease-in-out infinite; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glow-pulse { 0%,100% { text-shadow: 0 0 12px rgba(255,255,255,0.25); } 50% { text-shadow: 0 0 28px rgba(255,255,255,0.65); } }
@keyframes drift-up { 0% { transform: translateY(0); opacity: 0.35; } 50% { opacity: 0.9; } 100% { transform: translateY(-90px); opacity: 0; } }
@keyframes underline-grow { from { width: 0; } to { width: 100%; } }
@keyframes glow-border { 0%,100% { box-shadow: 0 0 0 1px rgba(255,122,84,0.25), 0 20px 50px rgba(255,122,84,0.08); } 50% { box-shadow: 0 0 0 1px rgba(255,148,102,0.45), 0 20px 60px rgba(255,148,102,0.2); } }
@keyframes parallax-hero { from { transform: translateY(-6%); } to { transform: translateY(14%); } }
@keyframes parallax-story { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
@keyframes fade-in-fab { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gallery-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#seat-fab { animation: fade-in-fab 0.5s ease both; }
@media (max-width: 760px) {
  .header-bar { max-height: none !important; opacity: 1 !important; padding: 10px 16px !important; flex-wrap: wrap; }
  .header-bar a[href="#top"] { width: 68px !important; height: 37px !important; }
  .header-nav { gap: 10px 14px !important; font-size: 10px !important; justify-content: center !important; width: 100%; }
  .hero-content { padding-top: 96px !important; box-sizing: border-box; }
  .hl-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hl-row > div { order: 0 !important; }
  .cast-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .seat-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .seat-grid > div:first-child { order: 2 !important; }
  .seat-grid > div:last-child { order: 1 !important; }
  .seat-points { grid-template-columns: 1fr 1fr !important; }
  .schedule-row { grid-template-columns: 100px 1fr !important; gap: 12px !important; }
  .gallery-item { width: 240px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  #gallery { padding-left: 0 !important; padding-right: 0 !important; }
  #about, #story, #highlight, #cast, #schedule, #gallery { padding-top: 72px !important; padding-bottom: 72px !important; }
  #seat { padding-bottom: 90px !important; }
  #seat-fab { left: 16px; right: 16px; width: auto !important; bottom: 16px; }
  .hero-title-sub { font-size: 12px !important; }
  .hero-daily { font-size: 22px !important; }
  .hero-startdate { font-size: 13px !important; }
  .about-title { white-space: normal !important; font-size: 17px !important; }
  .story-lead { font-size: 15px !important; }
  .story-body { font-size: 14px !important; line-height: 2 !important; }
  .schedule-label, .schedule-value { font-size: 13px !important; }
}
image-slot[data-filled]::part(frame) { background: transparent; }
[data-reveal] { opacity: 1; }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  [data-parallax="hero"] { animation: parallax-hero linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  [data-parallax="story"] { animation: parallax-story linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}