/* ============ Brittani Fagel — little delights: clinking glasses, trinkets, kisses, pearls, fizz ============ */

/* ---------- clinking glasses ---------- */
.cheers { position: relative; display: inline-grid; grid-template-columns: auto auto; align-items: end; justify-content: center; gap: 0; padding: 18px 10px 4px; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.cheers:focus-visible { outline: 2px dashed var(--rose-ink); outline-offset: 4px; }
.cheers-glass { width: 52px; height: 78px; overflow: visible; filter: drop-shadow(0 6px 5px rgba(59, 37, 27, .22)); transition: transform .3s var(--ease); }
.cheers-glass--l { transform-origin: 50% 92%; transform: rotate(-8deg); margin-right: -6px; }
.cheers-glass--r { transform-origin: 50% 92%; transform: rotate(8deg); margin-left: -6px; }
.cheers:hover .cheers-glass--l { transform: rotate(-3deg) translateY(-3px); }
.cheers:hover .cheers-glass--r { transform: rotate(3deg) translateY(-3px); }
.cheers.clinking .cheers-glass--l { animation: clink-l 1s cubic-bezier(.3, .7, .3, 1); }
.cheers.clinking .cheers-glass--r { animation: clink-r 1s cubic-bezier(.3, .7, .3, 1); }
@keyframes clink-l { 0% { transform: rotate(-8deg); } 30% { transform: translate(9px, -16px) rotate(24deg); } 36% { transform: translate(7px, -15px) rotate(18deg); } 55% { transform: translate(4px, -8px) rotate(6deg); } 75% { transform: rotate(-12deg); } 100% { transform: rotate(-8deg); } }
@keyframes clink-r { 0% { transform: rotate(8deg); } 30% { transform: translate(-9px, -16px) rotate(-24deg); } 36% { transform: translate(-7px, -15px) rotate(-18deg); } 55% { transform: translate(-4px, -8px) rotate(-6deg); } 75% { transform: rotate(12deg); } 100% { transform: rotate(8deg); } }
.cheers.clinking .cheers-liquid { transform-box: fill-box; transform-origin: 50% 0; animation: slosh 1s ease-in-out; }
@keyframes slosh { 30% { transform: skewX(12deg); } 50% { transform: skewX(-8deg); } 70% { transform: skewX(4deg); } }
.cb { transform-box: fill-box; animation: cheers-bub 2.6s ease-in infinite; opacity: 0; }
.cb2 { animation-delay: .8s; } .cb3 { animation-delay: 1.6s; }
@keyframes cheers-bub { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-18px); opacity: 0; } }
.cheers-star { position: absolute; left: 50%; top: 14px; width: 26px; height: 26px; margin-left: -13px; background: radial-gradient(circle, #FFF6D8 0 20%, #E9CF8C 45%, transparent 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; transform: scale(.2); pointer-events: none; }
.cheers.clinking .cheers-star { animation: star-flash .7s ease-out .3s; }
@keyframes star-flash { 0% { opacity: 0; transform: scale(.2) rotate(0); } 25% { opacity: 1; transform: scale(1.6) rotate(20deg); } 100% { opacity: 0; transform: scale(2.2) rotate(60deg); } }
.cheers-word { position: absolute; left: 50%; top: -12px; padding: 3px 10px; border-radius: 999px; background: var(--velvet); color: var(--ivory); font: italic 500 17px/1.2 var(--f-display); white-space: nowrap; opacity: 0; transform: translate(-50%, 8px) scale(.7); pointer-events: none; }
.cheers.clinking .cheers-word { animation: word-pop 1.3s var(--ease) .32s; }
@keyframes word-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6) rotate(-6deg); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.08) rotate(-4deg); } 75% { opacity: 1; transform: translate(-50%, -14px) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -24px) scale(.96) rotate(-4deg); } }
.cheers-label { grid-column: 1 / -1; justify-self: center; margin-top: 4px; font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--rose-ink); }
.cheers--hero { justify-self: start; margin-top: -4px; padding-left: 0; }
.cheers--footer .cheers-glass { width: 42px; height: 64px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.cheers--footer { margin: -6px 0 4px; }
.cheers--footer .cheers-glass path[stroke="#9C8574"], .cheers--footer .cheers-glass ellipse[stroke="#9C8574"] { stroke: #E4D0A0; }
.cheers--tea { align-self: center; }

/* ---------- draggable trinkets ---------- */
.toy { pointer-events: auto !important; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; transition: filter .25s; }
.toy:hover { filter: drop-shadow(0 12px 12px rgba(40, 10, 16, .35)); }
.toy--held { cursor: grabbing; z-index: 50 !important; filter: drop-shadow(0 18px 16px rgba(40, 10, 16, .4)) !important; }
.toy--spin { animation: toy-spin .7s var(--ease); }
@keyframes toy-spin { to { rotate: 360deg; } }
.boing { animation: boing .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes boing { 0% { scale: 1; } 30% { scale: 1.25 .85; } 55% { scale: .9 1.12; } 80% { scale: 1.05 .97; } 100% { scale: 1; } }
.toy-hint { position: absolute; z-index: 6; padding: 4px 10px; background: var(--butter); color: var(--burgundy); font: italic 500 16px/1.2 var(--f-display); white-space: nowrap; transform: rotate(-6deg); box-shadow: 0 6px 12px -8px rgba(59, 37, 27, .5); pointer-events: none; animation: hint-bob 2.4s ease-in-out infinite; }
@keyframes hint-bob { 50% { translate: 0 -5px; } }

/* ---------- kiss flurry ---------- */
.kiss-fly { position: absolute; z-index: 60; width: 54px; margin: -20px 0 0 -27px; mix-blend-mode: multiply; pointer-events: none; animation: kiss-fly 1.5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes kiss-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--kx), var(--ky)) scale(1) rotate(var(--kr)); } }
.mwah { position: absolute; z-index: 61; padding: 2px 10px; border-radius: 999px; background: var(--ivory); color: var(--rose-ink); font: italic 500 20px/1.2 var(--f-display); pointer-events: none; transform: translate(-50%, -100%); animation: word-pop 1.2s var(--ease) both; }

/* ---------- rolling pearls ---------- */
.pearl-tray { position: absolute; left: 8%; bottom: 8px; z-index: 5; display: flex; gap: 6px; pointer-events: none; }
.rolling-pearl { position: relative; width: 30px; height: 30px; border-radius: 50%; filter: drop-shadow(0 4px 3px rgba(59, 37, 27, .35)); animation: pearl-in 1.4s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(1.2s + var(--i) * .18s); }
@keyframes pearl-in { 0% { transform: translateX(-160px) rotate(-540deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; } }
.rolling-pearl.rolled { animation: pearl-roll .9s cubic-bezier(.25, .9, .3, 1.2); }
@keyframes pearl-roll { 0% { transform: none; } 50% { transform: translateX(46px) rotate(360deg); } 100% { transform: none; } }

/* ---------- champagne fizz behind page headers ---------- */
.hero, .page-head { position: relative; }
.fizz { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fizz i { position: absolute; bottom: -20px; width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; border: 1.5px solid rgba(201, 164, 94, .55); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9) 0 18%, rgba(255, 246, 216, .25) 40%, transparent 70%); animation: fizz-rise var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes fizz-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate(var(--sway), -45vh); } 90% { opacity: .6; } 100% { transform: translate(0, -95vh); opacity: 0; } }
.hero > :not(.fizz), .page-head > :not(.fizz) { position: relative; z-index: 1; }
.page-head > .photo-el { position: absolute; }

/* ---------- things settle in as you scroll ---------- */
.taped { animation: taped .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes taped { 0% { translate: 0 18px; scale: .96; } 60% { translate: 0 -3px; scale: 1.01; } 100% { translate: 0 0; scale: 1; } }

@media (max-width: 640px) {
  .cheers-glass { width: 44px; height: 66px; }
  .pearl-tray { left: 4%; bottom: 0; }
  .rolling-pearl { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz, .toy-hint { display: none; }
}