/* Harbor House — Birthdays / Birthday Party Machine (Stage 5) */

.machine{margin:var(--sp-6) 0 var(--sp-8)}
.machine-sub{color:var(--ink-soft);font-weight:700;margin-top:calc(-1 * var(--sp-2))}

/* ── Theme chooser ── */
.theme-chooser{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0}
.theme-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:56px;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-full);border:3px solid rgba(15,35,64,.15);background:#fff;color:var(--navy);
  font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.theme-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.theme-btn .theme-emoji{font-size:1.5rem;line-height:1}
.theme-btn[aria-pressed="true"]{border-color:var(--navy);background:var(--sun);box-shadow:var(--shadow-sm)}
.theme-btn:focus-visible,.faq-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ── Stage ── */
.party-stage{--party-accent:#2d6a4f;position:relative;border:4px solid var(--party-accent);border-radius:var(--radius-xl);
  background:linear-gradient(180deg,#fffdf8, #fff6e8);padding:var(--sp-5);box-shadow:var(--shadow);
  transition:border-color var(--dur-slow) var(--ease);overflow:hidden;isolation:isolate}
/* Dimensional backdrop (scene.css vocabulary): accent-tinted depth planes + warm key light */
.party-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);
  background:
    radial-gradient(circle at 18% 6%, rgba(255,201,60,.30), transparent 42%),
    radial-gradient(ellipse 120% 55% at 50% 118%, rgba(15,35,64,.10), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--party-accent) 16%, #fffdf8), #fff6e8 58%, color-mix(in srgb, var(--party-accent) 10%, #fff1d6))}
.party-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 108% 92% at 50% 42%, transparent 62%, rgba(10,22,40,.10) 100%)}
.party-stage>*{position:relative;z-index:1}
.party-stage>.party-balloons{z-index:2}
.bunting{width:100%;height:44px;display:block;margin-bottom:var(--sp-3);transform-origin:50% 0;animation:bunting-sway 6.5s ease-in-out infinite}
@keyframes bunting-sway{0%,100%{transform:rotate(-.55deg)}50%{transform:rotate(.55deg)}}
/* Balloons bob — transform only */
.party-balloons{position:absolute;top:var(--sp-3);right:var(--sp-4);display:flex;gap:2px;pointer-events:none}
.balloon{font-size:1.7rem;line-height:1;display:inline-block;animation:balloon-bob 4.6s ease-in-out infinite}
.balloon-2{animation-delay:-1.5s;animation-duration:5.4s;font-size:1.4rem}
.balloon-3{animation-delay:-3s;animation-duration:5s}
@keyframes balloon-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.bunting .bun-string{stroke:var(--navy);stroke-width:2;opacity:.35}
.bunting .bun-a{fill:var(--party-accent);transition:fill var(--dur-slow) var(--ease)}
.bunting .bun-b{fill:var(--sun);transition:fill var(--dur-slow) var(--ease)}
.stage-inner{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.party-stage.swapping .stage-inner{opacity:0;transform:translateY(10px) scale(.985)}
.party-stage.swapping .stage-scene{transform:scale(.97)}
.party-stage.settling .stage-inner{opacity:1;transform:none}
.party-stage.settling .stage-scene{transform:scale(1)}
.stage-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-5);align-items:start}
.stage-scene{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:3px solid var(--party-accent);
  transition:border-color var(--dur-slow) var(--ease),transform var(--dur) var(--ease);background:#fff}
/* Scene light: warm haze from upper-left + soft vignette over the world (plane 5) */
.stage-scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%)}
.stage-scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 105% 90% at 50% 42%,transparent 58%,rgba(10,22,40,.22) 100%)}
.stage-scene svg{display:block;width:100%;height:auto}
.stage-party-name{font-size:var(--fs-2xl);margin:0 0 var(--sp-1);color:var(--navy)}
.stage-room{font-weight:800;color:var(--party-accent);font-size:var(--fs-lg);margin:0 0 var(--sp-1);transition:color var(--dur-slow) var(--ease)}
.stage-price{font-weight:700;color:var(--ink-soft);margin:0 0 var(--sp-3)}
.stage-info h4{margin:var(--sp-3) 0 var(--sp-1);color:var(--navy)}
.stage-activities{margin:0;padding-left:1.2em}
.stage-activities li{margin-bottom:var(--sp-1);font-weight:600}
.stage-star{margin:0;font-weight:600}
/* ── Crown moment: the crown descends onto the birthday star when a theme is chosen ── */
.star-area{position:relative}
.crown-moment{position:relative;height:2.6rem;margin-bottom:calc(-1 * var(--sp-1));pointer-events:none}
.crown-moment .crown{font-size:2.1rem;line-height:1;display:inline-block;filter:drop-shadow(0 4px 6px rgba(15,35,64,.25))}
.crown-sparkle{position:absolute;color:var(--sun-dark);opacity:0;font-size:1rem;line-height:1}
.sparkle-1{left:-.4rem;top:.1rem}.sparkle-2{left:2.6rem;top:-.2rem}.sparkle-3{left:2.2rem;top:1.1rem;font-size:.8rem}
.crown-moment.crowning .crown{animation:crown-drop .95s var(--ease-bounce)}
.crown-moment.crowning .crown-sparkle{animation:crown-sparkle .95s ease-out}
@keyframes crown-drop{0%{transform:translateY(-52px) rotate(-9deg) scale(.85);opacity:0}45%{opacity:1}70%{transform:translateY(3px) rotate(2deg) scale(1.04)}100%{transform:translateY(0) rotate(0) scale(1);opacity:1}}
@keyframes crown-sparkle{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(.9) translateY(-4px)}}
.stage-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.stage-col{background:#fff;border:2px solid rgba(15,35,64,.07);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5)}
.stage-col h4{margin-top:0;color:var(--navy)}
.stage-schedule{list-style:none;margin:0;padding:0}
.stage-schedule li{padding:var(--sp-2) 0;border-bottom:1px dashed rgba(15,35,64,.14);font-weight:600}
.stage-schedule li:last-child{border-bottom:none}
.sched-time{display:inline-block;min-width:3.2em;font-family:var(--font-display);font-weight:800;color:var(--party-accent);transition:color var(--dur-slow) var(--ease)}
.menu-label{font-family:var(--font-display);font-weight:800;color:var(--navy);margin:var(--sp-3) 0 var(--sp-1)}
.stage-menu{margin:0;padding-left:1.2em}
.stage-menu li{margin-bottom:var(--sp-1);font-weight:600}

/* Summary card */
.summary-card{margin-top:var(--sp-5);background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.summary-card h4{color:var(--sun);margin:0;width:100%}
.summary-card dl{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin:0;flex:1}
.summary-card dl div{min-width:130px}
.summary-card dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:#a9bedd;font-weight:800}
.summary-card dd{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700}
.summary-card .sample-note{color:#a9bedd;width:100%}
.sample-note{font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft)}

/* ── Packages ── */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-5);margin:var(--sp-4) 0}
.pkg-card{position:relative}
.pkg-card.pkg-popular{border:3px solid var(--sun);box-shadow:var(--shadow)}
.pkg-flag{position:absolute;top:-14px;right:var(--sp-4);background:var(--sun);color:var(--navy);font-family:var(--font-display);
  font-weight:800;font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);margin:0}
.pkg-card h3{margin-top:0}
.pkg-price{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:800;color:var(--coral-dark);margin:0}
.pkg-meta{font-weight:800;color:var(--navy);margin:var(--sp-1) 0 var(--sp-3)}
.pkg-bestfor{font-weight:800;color:var(--teal-dark);background:var(--cream);border:2px dashed var(--sun);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3)}
.pkg-card ul{margin:0 0 var(--sp-3);padding-left:1.2em}
.pkg-card li{margin-bottom:var(--sp-1);font-weight:600}
.addons-h{margin-top:var(--sp-6)}
.addons{list-style:none;margin:var(--sp-3) 0;padding:0;max-width:640px}
.addons li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:#fff;
  border:2px solid rgba(15,35,64,.07);border-radius:var(--radius);margin-bottom:var(--sp-2);font-weight:700}
.addons strong{color:var(--coral-dark);white-space:nowrap}

/* ── FAQ ── */
.faq-list{max-width:820px}
.faq-item{border:2px solid rgba(15,35,64,.09);border-radius:var(--radius);margin-bottom:var(--sp-3);background:#fff;overflow:hidden}
.faq-item h3{margin:0}
.faq-btn{width:100%;text-align:left;background:none;border:none;cursor:pointer;min-height:52px;
  padding:var(--sp-3) var(--sp-4);font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.faq-btn::after{content:"＋";font-weight:800;color:var(--coral-dark)}
.faq-btn[aria-expanded="true"]::after{content:"－"}
.faq-panel{padding:0 var(--sp-4) var(--sp-4)}
.faq-panel p{margin:0;font-weight:600;color:var(--ink-soft)}

/* ── Form ── */
#party-form fieldset{border:3px solid rgba(15,35,64,.12);border-radius:var(--radius-lg);padding:var(--sp-5);background:#fff;max-width:720px}
#party-form legend{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);color:var(--navy);padding:0 var(--sp-2)}
#party-form label{display:block;font-weight:800;color:var(--navy);margin-bottom:var(--sp-1)}
#party-form .optional{font-weight:700;color:var(--ink-soft);font-size:var(--fs-sm)}
#party-form input,#party-form select,#party-form textarea{width:100%;min-height:48px;padding:var(--sp-2) var(--sp-3);
  border:2px solid rgba(15,35,64,.25);border-radius:var(--radius-sm);font:inherit;background:#fffdf8;color:var(--ink)}
#party-form textarea{min-height:96px}
#party-form input:focus,#party-form select:focus,#party-form textarea:focus{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--teal-dark)}
.field-help{font-size:var(--fs-sm);color:var(--ink-soft);font-weight:600;margin:var(--sp-1) 0 0}
.form-error{background:#fdecea;border:2px solid var(--coral-dark);color:#7a1f0e;border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);font-weight:800}

/* ── Confirmation ── */
.confirm-panel{max-width:720px;background:#fff;border:4px solid var(--teal);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow)}
.confirm-panel:focus{outline:3px solid var(--sun);outline-offset:3px}
.sim-label{display:inline-block;background:var(--coral);color:#fff;font-family:var(--font-display);font-weight:800;
  letter-spacing:.1em;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);margin:0 0 var(--sp-3)}
.confirm-warn{font-size:var(--fs-lg)}
.confirm-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3) var(--sp-5);margin:var(--sp-4) 0}
.confirm-plan dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}
.confirm-plan dd{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--navy)}
.next-steps{font-weight:600}
.next-steps li{margin-bottom:var(--sp-2)}

/* ── Calm / reduced motion: instant swaps, decorations still ── */
body.hh-calm .party-stage *,body.hh-calm .theme-btn{transition:none!important}
body.hh-calm .bunting,body.hh-calm .balloon,body.hh-calm .crown-moment .crown,body.hh-calm .crown-moment .crown-sparkle{animation:none!important}
body.hh-calm .crown-sparkle{opacity:0}
@media (prefers-reduced-motion: reduce){
  .party-stage *,.theme-btn{transition:none!important}
  .bunting,.balloon,.crown-moment .crown,.crown-moment .crown-sparkle{animation:none!important}
  .crown-sparkle{opacity:0}
}

/* ── Small screens ── */
@media (max-width:640px){
  .stage-top{grid-template-columns:1fr}
  .party-stage{padding:var(--sp-4)}
  .theme-btn{flex:1 1 44%;justify-content:center}
  .summary-card dl{gap:var(--sp-3)}
  #party-form fieldset{padding:var(--sp-4)}
  .confirm-panel{padding:var(--sp-5)}
}