/* Occasion pages (birthday, anniversary, proposal, event on a boat) — visuals and motion on top of
   the shared boat/package styles. Scoped to .boat-page--celebrate (plus one theme class), so no other
   page is affected. Motion is transform/opacity only, paused while the hero is off-screen, and
   switched off for prefers-reduced-motion. */

.boat-page--celebrate { --bc-a: #ff7a59; --bc-b: #ffb347; --bc-glow: rgba(255,150,90,.45); }
.boat-page--anniversary { --bc-a: #c2427c; --bc-b: #f2a65a; --bc-glow: rgba(255,170,90,.5); }
.boat-page--proposal    { --bc-a: #8e3aa8; --bc-b: #e8567d; --bc-glow: rgba(255,120,150,.42); }
.boat-page--event       { --bc-a: #1f7a8c; --bc-b: #e8a33d; --bc-glow: rgba(255,200,90,.42); }

/* ═════════════ Hero ═════════════ */
.boat-page--celebrate .pkg-hero { isolation: isolate; min-height: 540px; display: flex; align-items: center; }
.boat-page--celebrate .pkg-hero::after { background: linear-gradient(90deg, rgba(1,23,37,.93) 0%, rgba(3,46,66,.8) 42%, rgba(3,46,66,.4) 72%, rgba(3,46,66,.2) 100%); }
.boat-page--celebrate .pkg-hero__inner { grid-template-columns: minmax(0, 720px); width: 100%; }

.bc-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bc-glow { position: absolute; inset: 0; background: radial-gradient(620px 400px at 80% 64%, var(--bc-glow), transparent 70%); animation: bc-pulse 7s ease-in-out infinite alternate; }
@keyframes bc-pulse { from { opacity: .65; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }

/* Birthday: balloons and confetti */
.bc-balloon { position: absolute; left: var(--x); bottom: -150px; width: var(--w); height: calc(var(--w) * 1.22); border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.78) 0 6%, rgba(255,255,255,0) 28%), var(--c); box-shadow: inset -6px -8px 14px rgba(0,0,0,.18); opacity: .92; animation: bc-rise var(--s) linear var(--d) infinite; }
.bc-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 70px; background: rgba(255,255,255,.55); transform: translateX(-50%); }
.bc-balloon::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
@keyframes bc-rise { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(14px, -200px, 0); } 50% { transform: translate3d(-10px, -420px, 0); } 75% { transform: translate3d(12px, -640px, 0); } 100% { transform: translate3d(0, -860px, 0); } }
.bc-confetti { position: absolute; left: var(--x); top: -24px; width: 7px; height: 12px; background: var(--c); opacity: .85; animation: bc-fall var(--s) linear var(--d) infinite; }
@keyframes bc-fall { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(36px, 760px, 0) rotate(var(--r)); } }

/* Anniversary: floating diyas and rising hearts */
.bc-diya { position: absolute; left: 0; bottom: var(--b); width: 38px; height: 38px; max-width: none; translate: -60px 0; animation: bc-drift var(--s) linear var(--d) infinite, bc-bob 3.2s ease-in-out infinite alternate; }
@keyframes bc-drift { from { translate: -60px 0; } to { translate: 106vw 0; } }
@keyframes bc-bob { from { transform: translateY(-3px) rotate(-3deg); } to { transform: translateY(3px) rotate(3deg); } }
.bc-flame { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 0 6px rgba(255,190,80,.95)); animation: bc-flicker 1.3s ease-in-out var(--f) infinite alternate; }
@keyframes bc-flicker { from { transform: scale(.88, .8); opacity: .8; } to { transform: scale(1.06, 1.12); opacity: 1; } }
.bc-heart { position: absolute; left: var(--x); bottom: -30px; width: var(--w); height: var(--w); max-width: none; fill: rgba(255,172,192,.9); opacity: 0; animation: bc-float var(--s) ease-in var(--d) infinite; }
@keyframes bc-float { 0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate3d(-44px, -600px, 0) scale(1.15); opacity: 0; } }

/* Proposal and event: a string of party lights across the top */
.bc-lights { position: absolute; left: 0; top: 0; width: 100%; height: 84px; max-width: none; }
.bc-bulb { filter: drop-shadow(0 0 7px rgba(255,225,160,.95)); animation: bc-twinkle 2.2s ease-in-out var(--d) infinite alternate; }
@keyframes bc-twinkle { from { opacity: .3; } to { opacity: 1; } }

/* Proposal: rose petals */
.bc-petal { position: absolute; left: var(--x); top: -30px; width: var(--w); height: calc(var(--w) * 1.4); background: radial-gradient(circle at 30% 30%, #ff9bb3, #c2184d); border-radius: 80% 0 80% 0; opacity: .82; animation: bc-petal var(--s) linear var(--d) infinite; }
@keyframes bc-petal { 0% { transform: translate3d(0, 0, 0) rotate(0); } 25% { transform: translate3d(30px, 190px, 0) rotate(90deg); } 50% { transform: translate3d(-22px, 380px, 0) rotate(190deg); } 75% { transform: translate3d(28px, 570px, 0) rotate(280deg); } 100% { transform: translate3d(0, 760px, 0) rotate(360deg); } }

/* Event: lanterns and sparkles */
.bc-lantern { position: absolute; left: var(--x); bottom: -80px; width: 26px; height: 34px; border-radius: 40% 40% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff0b0, #ffa63d 60%, #e0701c); box-shadow: 0 0 22px 8px rgba(255,170,70,.55); opacity: 0; animation: bc-lantern var(--s) ease-in-out var(--d) infinite; }
@keyframes bc-lantern { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate3d(18px, -330px, 0); } 100% { transform: translate3d(-12px, -760px, 0); opacity: 0; } }
.bc-spark { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: bc-spark 2.8s ease-in-out var(--d) infinite; }
@keyframes bc-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }

.pkg-hero.is-paused .bc-fx, .pkg-hero.is-paused .bc-fx * { animation-play-state: paused; }

/* ═════════════ Titles, cards, entrances ═════════════ */
.boat-page--celebrate h2.pkg-title::after { content: ""; display: block; width: 68px; height: 4px; margin: 12px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--bc-a), var(--bc-b)); transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.8,.2,1) .15s; }
.boat-page--celebrate .is-visible h2.pkg-title::after { transform: scaleX(1); }
.boat-page--celebrate .pkg-card { position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.boat-page--celebrate .pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(3,46,66,.14); }
.boat-page--celebrate .pkg-card__icon { width: 46px; height: 46px; padding: 12px; margin-bottom: 14px; border-radius: 14px; color: #fff; fill: #fff; background: linear-gradient(140deg, var(--bc-a), var(--bc-b)); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.boat-page--celebrate .pkg-card:hover .pkg-card__icon { transform: rotate(-8deg) scale(1.1); }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(1) { --i: 0; }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(2) { --i: 1; }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(3) { --i: 2; }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(4) { --i: 3; }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(5) { --i: 4; }
.boat-page--celebrate .pkg-cards .pkg-card:nth-child(6) { --i: 5; }
.boat-page--celebrate .is-visible .pkg-card,
.boat-page--celebrate .is-visible .pkg-service,
.boat-page--celebrate .is-visible .pkg-place { animation: bc-pop .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes bc-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* ═════════════ Step-by-step timeline ═════════════ */
.bc-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; padding: 0; list-style: none; }
.bc-timeline::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 27px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--bc-a), var(--bc-b)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.3,.7,.2,1) .2s; }
.is-visible .bc-timeline::before { transform: scaleX(1); }
.bc-timeline li { position: relative; text-align: center; padding: 0 6px; }
.bc-timeline__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; color: #fff; fill: #fff; font-size: 22px; background: linear-gradient(140deg, var(--bc-a), var(--bc-b)); box-shadow: 0 0 0 6px #fff, 0 12px 24px rgba(0,0,0,.18); opacity: 0; transform: scale(.4); }
.pkg-section--alt .bc-timeline__dot { box-shadow: 0 0 0 6px var(--pkg-light), 0 12px 24px rgba(0,0,0,.18); }
.is-visible .bc-timeline__dot { animation: bc-dot .7s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .28s + .2s); }
@keyframes bc-dot { to { opacity: 1; transform: none; } }
.bc-timeline__n { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bc-a); }
.boat-page--celebrate .bc-timeline h3 { font-size: 17px; margin: 2px 0 6px; }
.bc-timeline p { margin: 0; font-size: 14.5px; color: #4b5a60; }

/* ═════════════ Responsive ═════════════ */
@media (max-width: 960px) {
	.bc-timeline { grid-template-columns: 1fr; gap: 26px; margin-left: 4px; }
	.bc-timeline::before { left: 27px; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; transform: scaleY(0); transform-origin: top; }
	.is-visible .bc-timeline::before { transform: scaleY(1); }
	.bc-timeline li { text-align: left; padding: 0 0 0 82px; min-height: 58px; }
	.bc-timeline__dot { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (max-width: 640px) {
	.boat-page--celebrate .pkg-hero { min-height: 0; }
	.bc-balloon { --w: 30px !important; }
	.bc-lights { height: 60px; }
}

/* ═════════════ Reduced motion ═════════════ */
@media (prefers-reduced-motion: reduce) {
	.bc-fx, .bc-fx *, .boat-page--celebrate .pkg-card, .boat-page--celebrate .pkg-service, .boat-page--celebrate .pkg-place { animation: none !important; transition: none !important; }
	.bc-diya { translate: 30vw 0; }
	.bc-timeline__dot { opacity: 1; transform: none; }
	.bc-timeline::before { transform: none; }
	.boat-page--celebrate h2.pkg-title::after { transform: scaleX(1); }
}