/*
 * Song Gift Story - Single Occasion (new magical design) styles.
 * Scoped to #sgs-root so it only affects occasion pages. Loaded only on single
 * occasion pages (inc/occasion-cpt.php). Pixel-identical to the design.
 */

#sgs-root, #sgs-root *{box-sizing:border-box;}
#sgs-root{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

@keyframes sgsFloat{0%{transform:translateY(0) translateX(0);}50%{transform:translateY(-26px) translateX(10px);}100%{transform:translateY(0) translateX(0);}}
@keyframes sgsTwinkle{0%,100%{opacity:.2;}50%{opacity:.85;}}
@keyframes sgsSway{0%,100%{transform:rotate(-2.5deg);}50%{transform:rotate(2.5deg);}}
@keyframes sgsGlow{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.9;transform:scale(1.06);}}
@keyframes sgsEq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
@keyframes sgsProgress{0%{width:0;}100%{width:100%;}}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.25;}50%{transform:translateY(-16px);opacity:.7;}}
@keyframes haloPulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.08);}}
@keyframes scrollBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@keyframes wavePulse{0%,100%{transform:scaleY(.6);}50%{transform:scaleY(1);}}

#sgs-root .gift-scroll::-webkit-scrollbar{display:none;}

/* rich-text prose (gift problem, why-a-song) - matches the design's paragraphs */
#sgs-root .sgs-occ-prose p{font-size:18px;line-height:1.78;color:#5A5F70;margin:0 0 18px;}
#sgs-root .sgs-occ-prose p:last-child{margin-bottom:0;}
#sgs-root .sgs-occ-prose-wide p{max-width:680px;margin-left:auto;margin-right:auto;}

/* FAQ: long questions must wrap on narrow screens and the +/x icon must stay
   pinned to the right, aligned with the first line. A <button> can carry a
   non-wrapping white-space default, which clipped long questions and let the
   icon overlap the text - force normal wrapping and keep the icon flex:none. */
#sgs-root [data-faq-q]{ white-space:normal; align-items:flex-start; }
#sgs-root [data-faq-q] > span:first-child{ flex:1 1 auto; min-width:0; overflow-wrap:break-word; }
#sgs-root [data-faq-icon]{ flex:0 0 auto; margin-top:3px; }

/* mobile: stack the gift-page showcase to one column and centre the phone mockup
   (JS-independent guard; JS also reserves the scaled size for exact centring) */
@media (max-width: 760px){
  #sgs-root [data-showcase-grid]{ grid-template-columns:1fr !important; }
  #sgs-root [data-phone-mockup]{ margin-left:auto !important; margin-right:auto !important; }
}

@media (prefers-reduced-motion: reduce){#sgs-root *{animation:none !important;}}