/*
 * Song Gift Story - Pricing page (new magical design) styles.
 * De-bundled from the Claude Design export; scoped to .sgs-pricing so it only
 * affects the pricing page. Loaded only on the pricing page (functions.php).
 * Pixel-identical to the design.
 */

.sgs-pricing *{box-sizing:border-box;}
.sgs-pricing{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.sgs-pricing a{color:inherit;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

@keyframes sgsFloat{0%{transform:translateY(0) translateX(0);}50%{transform:translateY(-26px) translateX(10px);}100%{transform:translateY(0) translateX(0);}}
@keyframes sgsGlow{0%,100%{opacity:.55;}50%{opacity:.95;}}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:var(--o);}50%{transform:translateY(-14px) translateX(6px);opacity:calc(var(--o) * 1.6);}100%{transform:translateY(0) translateX(0);opacity:var(--o);}}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(7px);opacity:1;}}
@keyframes haloPulse{0%,100%{opacity:.55;}50%{opacity:.9;}}

.sgs-pricing .gift-scroll::-webkit-scrollbar{width:5px;}
.sgs-pricing .gift-scroll::-webkit-scrollbar-thumb{background:rgba(214,184,120,.35);border-radius:3px;}
.sgs-pricing .gift-scroll{scrollbar-width:thin;scrollbar-color:rgba(214,184,120,.35) transparent;}

/* scroll reveal - .sgs-motion is added to the .sgs-pricing wrapper by pricing.js */
.sgs-pricing.sgs-motion .sgs-reveal{opacity:0;transform:translateY(32px);transition:opacity 1s ease, transform 1.05s cubic-bezier(.22,.72,.18,1);}
.sgs-pricing.sgs-motion .sgs-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.sgs-pricing .sgs-reveal{opacity:1 !important;transform:none !important;transition:none !important;}}

/* responsive layout (replaces the design's JS width logic) */
.sgs-pricing [data-grid="pkg"]{display:grid;grid-template-columns:repeat(4,1fr);}
.sgs-pricing [data-grid="extras"]{display:grid;grid-template-columns:repeat(3,1fr);}
.sgs-pricing [data-grid="steps"]{display:grid;grid-template-columns:repeat(3,1fr);}
.sgs-pricing [data-grid="feat"]{display:grid;grid-template-columns:repeat(2,1fr);}
.sgs-pricing [data-flex="showcase"]{display:flex;flex-direction:row;}
.sgs-pricing [data-cmp="cards"]{display:none !important;}
@media (max-width:1099px){.sgs-pricing [data-grid="pkg"]{grid-template-columns:repeat(2,1fr);}}
@media (max-width:979px){.sgs-pricing [data-grid="extras"]{grid-template-columns:repeat(2,1fr);}}
@media (max-width:899px){.sgs-pricing [data-flex="showcase"]{flex-direction:column;}}
@media (max-width:859px){.sgs-pricing [data-cmp="table"]{display:none !important;}.sgs-pricing [data-cmp="cards"]{display:flex !important;}}
@media (max-width:759px){.sgs-pricing [data-grid="pkg"]{grid-template-columns:1fr;}.sgs-pricing [data-grid="steps"]{grid-template-columns:1fr;}}
@media (max-width:619px){.sgs-pricing [data-grid="extras"]{grid-template-columns:1fr;}}
@media (max-width:519px){.sgs-pricing [data-grid="feat"]{grid-template-columns:1fr;}}

/* hover states (de-bundled from style-hover="...") */
.sgs-pricing .sgs-hv-1:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(189,154,82,.46);}
.sgs-pricing .sgs-hv-2:hover{background:rgba(189,154,82,.08);border-color:#BD9A52;}
.sgs-pricing .sgs-hv-3:hover{transform:translateY(-8px);}
.sgs-pricing .sgs-hv-4:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(189,154,82,.48);}
.sgs-pricing .sgs-hv-5:hover{transform:translateY(-8px);}
.sgs-pricing .sgs-hv-6:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(189,154,82,.48);}
.sgs-pricing .sgs-hv-7:hover{transform:translateY(-8px);}
.sgs-pricing .sgs-hv-8:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(189,154,82,.48);}
.sgs-pricing .sgs-hv-9:hover{transform:translateY(-8px);}
.sgs-pricing .sgs-hv-10:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(189,154,82,.48);}
.sgs-pricing .sgs-hv-11:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-12:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-13:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-14:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-15:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-16:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(30,42,74,.11);border-color:#D8C49A;}
.sgs-pricing .sgs-hv-17:hover{background:rgba(231,214,172,.1);border-color:#E7D6AC;}
.sgs-pricing .sgs-hv-18:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(189,154,82,.55);}
.sgs-pricing .sgs-hv-19:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(189,154,82,.6);}
.sgs-pricing .sgs-hv-20:hover{transform:translateY(-4px);box-shadow:0 30px 68px rgba(22,31,56,.45);border-color:#E7D6AC;}