*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --white: #ffffff;
      --cream: #fafbfd;
      --blue-50: #f0f4fa;
      --blue-100: #e1e8f4;
      --blue-200: #a8bcd8;
      --blue-300: #7a9ac4;
      --blue-400: #4a78a8;
      --blue-500: #3d68a0;
      --blue-600: #3a5f8a;
      --text: #2c3e50;
      --text-secondary: #3d5568;
      --text-muted: #5f7d93;
      --border: rgba(150, 176, 212, 0.2);
      --accent-soft: rgba(112, 150, 196, 0.1);
      --green: #3d9970;
      --green-dark: #2d8a60;
      --red: #c0544e;
      --red-dark: #a8413c;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'Inter', system-ui, -apple-system, sans-serif;
      --spring: linear(
        0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
        1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.152, 1.128 31.6%,
        1.091 34.9%, 1.007 43.6%, 0.985, 0.974 53.1%, 0.975 57.1%,
        0.988 65.1%, 1.002 74.8%, 1.007 82.5%, 1.007 100%
      );
    }

    body {
      background: var(--white);
      color: var(--text);
      font-family: var(--sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      transition: background 1.5s ease;
    }

    /* ======================== */
    /*  HERO                    */
    /* ======================== */
    .hero {
      position: relative;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(180deg, #edf2f9 0%, #f0f4fa 25%, var(--white) 50%, #f0f4fa 75%, #e8eef6 100%);
      overflow: hidden;
      padding: 2rem;
    }

    /* Central glow — large and warm */
    .hero::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(120, 160, 220, 0.12), rgba(150, 176, 212, 0.04) 50%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: glow-pulse 8s ease-in-out infinite;
    }

    /* Secondary glow — offset for depth */
    .hero::after {
      content: '';
      position: absolute;
      width: 350px;
      height: 350px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(160, 140, 200, 0.06), transparent 60%);
      top: 35%;
      left: 60%;
      transform: translate(-50%, -50%);
      animation: glow-pulse 10s ease-in-out 2s infinite;
    }

    @keyframes glow-pulse {
      0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    }

    /* Subtle hue-shifting ambient overlay */
    .hero-ambient {
      position: absolute;
      inset: 0;
      opacity: 0.35;
      background: linear-gradient(
        135deg,
        oklch(0.92 0.02 230) 0%,
        oklch(0.95 0.01 260) 50%,
        oklch(0.92 0.02 210) 100%
      );
      background-size: 300% 300%;
      animation: ambient-shift 20s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes ambient-shift {
      0%, 100% { background-position: 0% 50%; }
      33% { background-position: 100% 50%; }
      66% { background-position: 50% 100%; }
    }

    .particle-field {
      position: absolute;
      inset: 0;
      pointer-events: none;
      transition: transform 0.4s ease-out;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      transition: transform 0.4s ease-out;
    }

    .hero-eyebrow {
      font-family: var(--sans);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--blue-400);
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .hero-ornament {
      display: block;
      margin: 0 auto 0.5rem;
    }

    .hero-name-wrapper {
      position: relative;
      display: inline-block;
    }

    .hero-name {
      font-family: var(--serif);
      font-size: 2.8rem;
      font-weight: 400;
      color: var(--text);
      letter-spacing: 1px;
      line-height: 1.15;
      margin-bottom: 0.3rem;
    }

    .hero-surname {
      font-family: var(--serif);
      font-size: 2.8rem;
      font-weight: 400;
      background: linear-gradient(
        90deg,
        var(--blue-500) 0%,
        var(--blue-500) 40%,
        #7baad4 50%,
        var(--blue-500) 60%,
        var(--blue-500) 100%
      );
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1px;
      line-height: 1.15;
      margin-bottom: 1.5rem;
      animation: shimmer-text 4s ease-in-out 2s infinite;
    }

    @keyframes shimmer-text {
      0%, 100% { background-position: 100% 0; }
      50% { background-position: -100% 0; }
    }

    /* Sparkle particles around name */
    .sparkle-field {
      position: absolute;
      inset: -30px -40px;
      pointer-events: none;
      z-index: 2;
    }

    .sparkle {
      position: absolute;
      opacity: 0;
    }

    @keyframes sparkle-pop {
      0% { transform: scale(0) rotate(0deg); opacity: 0; }
      30% { transform: scale(1.2) rotate(30deg); opacity: 1; }
      70% { transform: scale(0.9) rotate(50deg); opacity: 0.8; }
      100% { transform: scale(0) rotate(70deg); opacity: 0; }
    }

    .hero-date {
      font-family: var(--sans);
      font-size: 0.85rem;
      color: var(--text-secondary);
      font-weight: 400;
      letter-spacing: 2px;
    }

    .scroll-hint {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: hero-reveal-in 0.6s ease 1.5s forwards,
                 scroll-bounce 2.5s ease-in-out 2s infinite;
    }

    /* ======================== */
    /*  HERO ANIMATIONS         */
    /* ======================== */
    .hero-reveal {
      opacity: 0;
      transform: translateY(12px);
      animation: hero-reveal-in 0.8s var(--spring) forwards;
    }

    @keyframes hero-reveal-in {
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-eyebrow { animation-delay: 0.3s; }
    .hero-ornament:first-of-type { animation-delay: 0.5s; }
    .hero-name { animation-delay: 0.7s; }
    .hero-surname { animation-delay: 0.85s; }
    .hero-ornament:last-of-type { animation-delay: 0.9s; }
    .hero-date { animation-delay: 1.1s; }

    /* SVG self-drawing */
    .ornament-path {
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: draw-line 1.4s ease forwards;
    }
    .hero-ornament:first-of-type .ornament-path { animation-delay: 0.5s; }
    .hero-ornament:last-of-type .ornament-path { animation-delay: 0.9s; }

    @keyframes draw-line {
      to { stroke-dashoffset: 0; }
    }

    @keyframes scroll-bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(6px); }
    }

    /* Particles */
    .particle {
      position: absolute;
      border-radius: 50%;
      animation: particle-float var(--duration) ease-in-out infinite,
                 particle-twinkle var(--twinkle) ease-in-out infinite;
      animation-delay: var(--delay);
    }

    @keyframes particle-float {
      0%, 100% { transform: translateY(0) translateX(0); }
      25% { transform: translateY(calc(var(--drift-y) * -1)) translateX(var(--drift-x)); }
      50% { transform: translateY(calc(var(--drift-y) * -0.5)) translateX(calc(var(--drift-x) * -0.7)); }
      75% { transform: translateY(var(--drift-y)) translateX(calc(var(--drift-x) * 0.5)); }
    }

    @keyframes particle-twinkle {
      0%, 100% { opacity: var(--base-opacity); }
      50% { opacity: calc(var(--base-opacity) * 0.3); }
    }

    /* ======================== */
    /*  SECTION DIVIDERS        */
    /* ======================== */
    .section-divider {
      display: flex;
      justify-content: center;
      padding: 0.5rem 0;
    }

    .divider-line {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 1.2s ease;
    }

    .section-divider.visible .divider-line {
      stroke-dashoffset: 0;
    }

    .divider-dot {
      opacity: 0;
      transform-origin: center;
      transition: opacity 0.4s ease 0.6s, transform 0.4s var(--spring) 0.6s;
      transform: scale(0);
    }

    .section-divider.visible .divider-dot {
      opacity: 1;
      transform: scale(1);
    }

    /* ======================== */
    /*  SHARED REVEAL           */
    /* ======================== */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.7s var(--spring),
                  transform 0.7s var(--spring);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-title {
      font-family: var(--sans);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 4px;
      color: var(--blue-500);
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 1.8rem;
    }

    /* ======================== */
    /*  DETAILS                 */
    /* ======================== */
    .details {
      text-align: center;
      padding: 3rem 1.5rem;
      background: linear-gradient(180deg, var(--blue-50) 0%, var(--cream) 40%, var(--cream) 60%, var(--blue-50) 100%);
    }

    .fancy-date {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.2rem;
      margin-bottom: 2rem;
    }

    .fancy-date::before,
    .fancy-date::after {
      content: '';
      flex: 1;
      max-width: 80px;
      height: 1px;
      background: var(--blue-200);
    }

    .date-center {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .date-day {
      font-family: var(--serif);
      font-size: 4.5rem;
      font-weight: 300;
      color: var(--blue-500);
      line-height: 1;
      letter-spacing: -1px;
    }

    .date-month-year {
      display: flex;
      flex-direction: column;
    }

    .date-month {
      font-family: var(--serif);
      font-size: 2rem;
      color: var(--text);
      font-weight: 400;
      line-height: 1.1;
    }

    .date-year {
      font-family: var(--sans);
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 4px;
    }

    .photo-stack {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 400px;
      margin: 0 auto;
    }

    .venue-card {
      background: var(--white);
      border-radius: 20px;
      padding: 12px;
      box-shadow:
        0 2px 8px rgba(100, 140, 200, 0.1),
        0 8px 28px rgba(100, 140, 200, 0.12);
      opacity: 0;
      transform: translateY(20px) scale(0.97);
      transition: opacity 0.5s ease, transform 0.6s var(--spring);
    }

    .venue-card.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .w-frame {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 16/10;
    }

    .w-frame img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      will-change: transform;
      -webkit-user-drag: none;
      user-select: none;
    }

    .w-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.12);
      border-radius: inherit;
      z-index: 2;
      pointer-events: none;
    }

    .gallery-dots {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      z-index: 5;
    }

    .gallery-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transition: background 0.3s;
    }

    .gallery-dot.active {
      background: rgba(255, 255, 255, 0.95);
    }

    .card-info {
      padding: 0.5rem 0.5rem 0.5rem;
      text-align: center;
    }

    .card-info .venue-label {
      font-size: 0.65rem;
      letter-spacing: 4px;
      color: var(--blue-400);
      text-transform: uppercase;
      font-weight: 600;
      display: block;
      margin-bottom: 0.15rem;
    }

    .card-ornament {
      display: flex;
      justify-content: center;
      padding: 0.7rem 0 0;
    }

    .card-info .venue-name {
      font-family: var(--serif);
      font-size: 2.4rem;
      font-weight: 400;
      color: var(--text);
      line-height: 1;
      display: block;
      letter-spacing: 0.5px;
    }

    .card-info .venue-sub {
      font-size: 0.95rem;
      color: var(--blue-300);
      display: block;
      font-style: italic;
      font-family: 'Lora', Georgia, serif;
      margin-top: 0.25rem;
      letter-spacing: 0.3px;
    }

    .venue-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      margin-top: 0.45rem;
    }

    .venue-time {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.95rem;
      color: var(--blue-400);
      font-weight: 500;
    }

    .venue-meta-sep {
      color: var(--blue-200);
      font-size: 0.8rem;
    }

    .venue-address {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.95rem;
      color: var(--blue-400);
      font-weight: 500;
      text-decoration: none;
    }

    /* Handwritten underline divider */
    .underline-divider {
      width: 100%;
      display: block;
      overflow: visible;
    }

    .underline-divider .ink-body {
      fill: oklch(0.40 0.16 255);
    }

    /* Pin bounce */
    .pin-bounce {
      position: relative;
      display: inline-flex;
      align-items: flex-end;
      height: 20px;
    }

    .pin-bounce svg {
      animation: pin-float 2s ease-in-out infinite;
    }

    .pin-shadow {
      position: absolute;
      bottom: -1px;
      left: 50%;
      width: 12px;
      height: 4px;
      background: rgba(44, 62, 80, 0.4);
      border-radius: 50%;
      transform: translateX(-50%);
      animation: pin-shadow 2s ease-in-out infinite;
    }

    @keyframes pin-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }

    @keyframes pin-shadow {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.7; }
      50% { transform: translateX(-50%) scaleX(0.5); opacity: 0.3; }
    }

    /* ======================== */
    /*  GREETING                */
    /* ======================== */
    .greeting {
      text-align: center;
      padding: 3.5rem 1.5rem;
      position: relative;
      background: linear-gradient(180deg, var(--white) 0%, #f8fafd 50%, var(--white) 100%);
    }

    .greeting-card {
      max-width: 480px;
      margin: 0 auto;
      padding: 2.5rem 2rem 2rem;
      background: linear-gradient(160deg, #fdfeff, #f6f9fd, #fafcff);
      border: 1px solid rgba(150, 176, 212, 0.25);
      border-radius: 20px;
      box-shadow:
        0 8px 32px rgba(100, 140, 200, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      position: relative;
      overflow: hidden;
    }

    /* Soft inner glow at top */
    .greeting-card::before {
      content: '';
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(120, 160, 220, 0.08), transparent 70%);
      pointer-events: none;
    }

    /* Decorative corner ornaments */
    .greeting-card::after {
      content: '';
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(150, 176, 212, 0.1);
      border-radius: 14px;
      pointer-events: none;
    }

    .greeting-inner {
      position: relative;
      z-index: 1;
    }

    .greeting-quote {
      display: block;
      margin: 0 auto 1.2rem;
      opacity: 0.4;
      filter: drop-shadow(0 1px 2px rgba(100, 140, 200, 0.15));
    }

    .greeting-svg {
      width: 100%;
      overflow: visible;
    }
    .greeting-svg path {
      fill: var(--blue-600);
      stroke: var(--blue-600);
      stroke-width: 1.2;
      stroke-linejoin: round;
      clip-path: inset(0 100% 0 0);
    }

    .greeting-svg path.hw-reveal {
      animation: hw-clip var(--hw-dur, 0.15s) ease-out forwards;
    }

    .greeting-svg path.hw-done {
      clip-path: inset(0 0% 0 0);
    }

    @keyframes hw-clip {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0% 0 0); }
    }

    .greeting-loading {
      font-family: var(--serif);
      font-size: 1.1rem;
      color: var(--text-muted);
      padding: 2rem 0;
    }

    /* Decorative ornament between message and signature */
    .greeting-ornament {
      display: block;
      margin: 1.5rem auto 1.2rem;
    }

    .greeting-ornament .ornament-path {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 1.2s ease;
    }

    .greeting-ornament.draw .ornament-path {
      stroke-dashoffset: 0;
    }

    .greeting-hearts {
      font-size: 0.7rem;
      letter-spacing: 6px;
      color: var(--blue-300);
      margin-top: 0.5rem;
      opacity: 0;
      transition: opacity 0.6s ease;
      text-align: center;
    }
    .greeting-hearts.visible {
      opacity: 1;
    }

    /* ======================== */
    /*  SCHEDULE                */
    /* ======================== */
    .schedule {
      padding: 3rem 1.5rem;
      background: linear-gradient(180deg, var(--blue-50) 0%, var(--cream) 30%, var(--cream) 70%, var(--blue-50) 100%);
    }

    .timeline {
      max-width: 340px;
      margin: 0 auto;
      position: relative;
      padding-left: 32px;
      view-timeline-name: --timeline;
      view-timeline-axis: block;
    }

    /* Vertical line — positioned to center under dots */
    .timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: var(--blue-100);
      border-radius: 1px;
    }

    .timeline-progress {
      position: absolute;
      left: 11px;
      top: 10px;
      width: 2px;
      height: calc(100% - 20px);
      background: linear-gradient(180deg, var(--blue-400), var(--blue-200));
      border-radius: 1px;
      transform-origin: top;
      transform: scaleY(0);
    }

    @supports (animation-timeline: view()) {
      .timeline-progress {
        animation: grow-timeline linear both;
        animation-timeline: --timeline;
        animation-range: entry 20% cover 60%;
      }
    }

    @keyframes grow-timeline {
      to { transform: scaleY(1); }
    }

    /* Fallback for browsers without scroll-driven animations */
    @supports not (animation-timeline: view()) {
      .timeline-progress {
        transition: transform 1.5s var(--spring);
      }
      .timeline.visible .timeline-progress {
        transform: scaleY(1);
      }
    }

    .timeline-item {
      position: relative;
      margin-bottom: 1.2rem;
      padding: 0.8rem 1rem;
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: 0 1px 4px rgba(100, 140, 200, 0.05);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease, transform 0.5s var(--spring);
    }

    .timeline-item:last-child {
      margin-bottom: 0;
    }

    .timeline-item.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Dot on the line — perfectly centered on the 2px line at left:11px */
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -26px;
      top: 50%;
      margin-top: -5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--white);
      border: 2.5px solid var(--blue-300);
      transform: scale(0);
      transition: transform 0.4s var(--spring);
      box-shadow: 0 0 0 3px rgba(122, 154, 196, 0.1);
    }

    .timeline-item.visible::before {
      transform: scale(1);
    }

    /* Connector line from dot to card */
    .timeline-item::after {
      content: '';
      position: absolute;
      left: -16px;
      top: 50%;
      width: 16px;
      height: 1px;
      background: var(--blue-100);
      margin-top: -0.5px;
    }

    .timeline-time {
      font-family: var(--sans);
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--blue-500);
      letter-spacing: 1.5px;
      margin-bottom: 0.15rem;
      text-transform: uppercase;
    }

    .timeline-event {
      font-family: var(--serif);
      font-size: 1.15rem;
      color: var(--text);
      font-weight: 500;
    }

    .timeline-note {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
    }

    /* ======================== */
    /*  RSVP                    */
    /* ======================== */
    .rsvp {
      padding: 3rem 1.5rem 4rem;
      text-align: center;
      position: relative;
      z-index: 35;
      transition: background 1.5s ease;
    }

    /* Scroll lock during effects — no position:fixed to avoid viewport jump */
    body.effects-playing {
      overflow: hidden;
      touch-action: none;
    }

    /* Storm mode — body-level dark theme */
    body.storm-mode {
      background: linear-gradient(180deg, #5a6878, #8090a0 30%, #a8b2be 60%);
    }
    .storm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 28, 40, 0);
      pointer-events: none;
      z-index: 30;
      transition: background 1.5s ease;
    }
    body.storm-mode .storm-overlay {
      background: rgba(20, 28, 40, 0.35);
    }

    .rsvp .form-wrapper-inner {
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      z-index: 35;
      transition: opacity 0.5s ease, transform 0.5s ease;
      text-align: left;
    }
    .rsvp .form-wrapper-inner.exiting {
      opacity: 0;
      transform: scale(0.95) translateY(-20px);
    }
    .rsvp .form-wrapper-inner.hidden { display: none; }

    /* Title flourish */
    .rsvp .rsvp-title {
      font-family: var(--serif);
      font-size: 1.6rem;
      font-weight: 400;
      text-align: center;
      color: var(--text);
      margin-bottom: 1.5rem;
      letter-spacing: 0.5px;
      opacity: 0;
      animation: title-flourish 0.8s ease-out 0.1s forwards;
      transition: color 1.5s ease;
    }
    body.storm-mode .rsvp .rsvp-title { color: rgba(180, 195, 215, 0.7); }

    @keyframes title-flourish {
      0% {
        opacity: 0;
        transform: scale(0.92);
        letter-spacing: 4px;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: scale(1);
        letter-spacing: 0.5px;
      }
    }

    /* Staggered entrance */
    .stagger-item {
      opacity: 0;
      animation: card-enter 0.6s var(--spring) forwards;
    }
    .stagger-item:nth-child(1) { animation-delay: 0.15s; }
    .stagger-item:nth-child(2) { animation-delay: 0.22s; }
    .stagger-item:nth-child(3) { animation-delay: 0.29s; }
    .stagger-item:nth-child(4) { animation-delay: 0.36s; }
    .stagger-item:nth-child(5) { animation-delay: 0.43s; }
    .stagger-item:nth-child(6) { animation-delay: 0.50s; }
    .stagger-item:nth-child(7) { animation-delay: 0.57s; }
    .stagger-item:nth-child(8) { animation-delay: 0.64s; }
    .stagger-item:nth-child(9) { animation-delay: 0.71s; }

    @keyframes card-enter {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* RSVP toggle */
    .rsvp-toggle {
      display: flex;
      gap: 0.75rem;
      max-width: 340px;
      margin: 0 auto 2.5rem;
    }
    .rsvp-toggle-btn {
      flex: 1;
      padding: 1.1rem 1rem;
      border-radius: 14px;
      border: 2px solid var(--border);
      background: var(--white);
      color: var(--text-muted);
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.5s var(--spring);
      -webkit-tap-highlight-color: transparent;
      text-align: center;
      box-shadow: 0 2px 8px rgba(100,140,200,0.06);
    }
    .rsvp-toggle-btn.active {
      background: linear-gradient(135deg, var(--green), var(--green-dark, #2d8a60));
      border-color: var(--green-dark, #2d8a60);
      color: var(--white);
      font-weight: 600;
      box-shadow: 0 4px 16px rgba(61,153,112,0.25);
    }
    .rsvp-toggle-btn.active-decline {
      background: linear-gradient(135deg, var(--red), var(--red-dark, #a8413c));
      border-color: var(--red-dark, #a8413c);
      color: var(--white);
      font-weight: 600;
      box-shadow: 0 4px 16px rgba(192,84,78,0.25);
    }
    /* Storm mode: inactive buttons darken */
    .rsvp-toggle-btn:not(.active):not(.active-decline) {
      transition: all 0.5s var(--spring), background 1.5s ease, border-color 1.5s ease, color 1.5s ease;
    }
    body.storm-mode .rsvp-toggle-btn:not(.active):not(.active-decline) {
      background: #3a4250;
      border-color: rgba(80, 100, 130, 0.4);
      color: rgba(180, 195, 215, 0.6);
    }

    /* Clip-path wipe for rsvp-fields */
    #rsvp-fields {
      overflow: hidden;
      transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
    #rsvp-fields.hiding {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
    #rsvp-fields.hidden {
      display: none;
    }

    /* Section groups */
    .form-section {
      margin-bottom: 1.5rem;
    }
    .section-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .section-accent {
      width: 3px;
      height: 16px;
      border-radius: 2px;
    }
    .section-accent.primary {
      background: linear-gradient(180deg, var(--blue-400), var(--blue-300));
    }
    .section-accent.secondary {
      background: linear-gradient(180deg, var(--blue-200), #c8d6e8);
    }
    .section-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }
    .section-label.primary { color: var(--blue-500); }
    .section-label.secondary { color: #6b8da5; }

    /* Form cards */
    .form-card {
      background: linear-gradient(135deg, var(--cream), var(--white));
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.2rem;
      margin-bottom: 0.6rem;
      box-shadow: 0 2px 8px rgba(100,140,200,0.05);
      transition: background 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
    }
    body.storm-mode .form-card {
      background: linear-gradient(135deg, #3a4250, #2d3444);
      border-color: rgba(80, 100, 130, 0.4);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .form-card-label {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: var(--text);
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      transition: color 1.5s ease;
    }
    body.storm-mode .form-card-label { color: rgba(200, 210, 225, 0.8); }
    .required { color: var(--red); font-size: 0.72rem; }

    /* Big number stepper */
    .stepper-row {
      display: flex;
      gap: 2rem;
      justify-content: center;
    }
    .stepper-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
    }
    .stepper-big-num {
      font-family: var(--sans);
      font-size: 2.4rem;
      font-weight: 300;
      color: var(--text);
      line-height: 1;
      height: 2.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .stepper-big-num span {
      display: inline-block;
    }
    .stepper-type {
      font-size: 0.7rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-bottom: 0.3rem;
    }
    .stepper-btns {
      display: flex;
      gap: 0.4rem;
    }
    .stepper-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--white);
      color: var(--blue-400);
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.45s var(--spring), border-color 0.2s ease, background-color 0.2s ease;
    }
    .stepper-btn:hover { border-color: var(--blue-300); }
    .stepper-divider {
      width: 1px;
      background: var(--border);
      align-self: stretch;
    }

    /* Squash & stretch keyframes */
    @keyframes num-up {
      0%   { transform: scaleX(1)    scaleY(1); }
      20%  { transform: scaleX(0.8)  scaleY(1.25); }
      50%  { transform: scaleX(1.08) scaleY(0.92); }
      75%  { transform: scaleX(0.97) scaleY(1.03); }
      100% { transform: scaleX(1)    scaleY(1); }
    }
    @keyframes num-down {
      0%   { transform: scaleX(1)    scaleY(1); }
      20%  { transform: scaleX(1.25) scaleY(0.8); }
      50%  { transform: scaleX(0.92) scaleY(1.08); }
      75%  { transform: scaleX(1.03) scaleY(0.97); }
      100% { transform: scaleX(1)    scaleY(1); }
    }
    @keyframes num-shake {
      0%, 100% { transform: translateX(0); }
      25%  { transform: translateX(-3px); }
      75%  { transform: translateX(3px); }
    }

    /* Icon cards (menu, allergies, needs) */
    .icon-cards {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .icon-card {
      text-align: center;
      padding: 0.85rem 0.9rem;
      border-radius: 12px;
      background-color: var(--white);
      border: 1.5px solid var(--border);
      min-width: 75px;
      flex: 1;
      cursor: pointer;
      position: relative;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      transition: transform 0.5s var(--spring), background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
    }
    .icon-card .ic-emoji {
      font-size: 1.4rem;
      margin-bottom: 0.15rem;
      display: inline-block;
      transition: transform 0.5s var(--spring);
    }
    .icon-card .ic-label {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-secondary);
      transition: color 0.45s ease;
    }

    /* Badge with visible border */
    .icon-card .badge {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--white);
      border: 1.5px solid var(--blue-300);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      opacity: 0;
      transform: scale(0);
      transition: opacity 0.4s ease 0.1s, transform 0.4s var(--spring) 0.1s;
    }

    .icon-card.selected {
      background-color: var(--blue-600);
      border-color: var(--blue-600);
      box-shadow: 0 4px 14px rgba(74,120,168,0.18);
    }
    .icon-card.selected .ic-label { color: white; font-weight: 600; }
    .icon-card.selected .badge {
      opacity: 1;
      transform: scale(1);
      border-color: var(--blue-200);
    }

    /* Allergy toggle */
    .allergy-toggle {
      display: flex;
      background: var(--blue-50);
      border-radius: 10px;
      padding: 3px;
      margin-bottom: 0.7rem;
    }
    .allergy-toggle-btn {
      flex: 1;
      padding: 0.55rem 0.8rem;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 400;
      cursor: pointer;
      transition: all 0.4s var(--spring);
      -webkit-tap-highlight-color: transparent;
    }
    .allergy-toggle-btn.active-no {
      background: var(--white);
      color: var(--green);
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .allergy-toggle-btn.active-yes {
      background: var(--white);
      color: var(--red);
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* Allergy grid staggered reveal */
    .allergy-grid {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      margin-top: 0.5rem;
    }
    .allergy-grid .icon-card {
      min-width: 65px;
      padding: 0.65rem 0.5rem;
      opacity: 0;
      transform: scale(0.5) translateY(12px);
      transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
    }
    .allergy-grid .icon-card.entered {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .allergy-grid .icon-card .ic-emoji { font-size: 1.2rem; }
    .allergy-grid .icon-card .ic-label { font-size: 0.65rem; }

    /* Altceva input */
    .altceva-input {
      width: 100%;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.55rem 0.8rem;
      color: var(--text);
      font-size: 0.82rem;
      font-family: var(--sans);
      outline: none;
      margin-top: 0.5rem;
      opacity: 0;
      transform: translateY(-4px);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .altceva-input.entered {
      opacity: 1;
      transform: translateY(0);
    }
    .altceva-input:focus {
      border-color: var(--blue-300);
      box-shadow: 0 0 0 3px rgba(112,150,196,0.08);
    }

    /* Quick wishes */
    .wish-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-bottom: 0.6rem;
    }
    .wish-chip {
      padding: 0.35rem 0.75rem;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      transition: transform 0.5s var(--spring), background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
    }
    .wish-chip.selected {
      background-color: var(--blue-600);
      border-color: var(--blue-600);
      color: white;
    }
    body.storm-mode .wish-chip:not(.selected) {
      background: rgba(40, 50, 65, 0.6);
      border-color: rgba(80, 100, 130, 0.4);
      color: rgba(180, 195, 215, 0.6);
    }

    /* Message textarea */
    .message-label {
      font-family: var(--sans);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: var(--text);
      margin-bottom: 0.6rem;
      transition: color 1.5s ease;
    }
    body.storm-mode .message-label { color: rgba(200, 210, 225, 0.8); }
    .message-area {
      width: 100%;
      min-height: 180px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 0.9rem 1rem;
      color: var(--text);
      font-size: 1rem;
      font-family: var(--serif);
      outline: none;
      resize: vertical;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 1.5s ease, color 1.5s ease;
      line-height: 1.5;
    }
    body.storm-mode .message-area {
      background: rgba(40, 50, 65, 0.8);
      border-color: rgba(80, 100, 130, 0.4);
      color: rgba(200, 210, 225, 0.8);
    }
    .message-area::placeholder {
      color: #5a7080;
      font-style: italic;
      transition: color 1.5s ease;
    }
    body.storm-mode .message-area::placeholder { color: rgba(160, 175, 195, 0.5); }
    .message-area:focus {
      border-color: var(--blue-300);
      box-shadow: 0 0 0 3px rgba(112,150,196,0.08);
    }

    /* Sticky submit */
    .submit-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.75rem 1.5rem;
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
      background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9) 30%, white);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 40;
      transition: opacity 0.4s ease, transform 0.4s ease, background 1.5s ease;
    }
    body.storm-mode .submit-wrapper {
      background: linear-gradient(180deg, transparent, rgba(30, 40, 55, 0.9) 30%, rgba(30, 40, 55, 1));
    }
    .submit-wrapper.hidden {
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    .submit-btn {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      display: block;
      padding: 1rem;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
      color: var(--white);
      font-family: var(--sans);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.5s var(--spring), box-shadow 0.3s ease;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 2px 12px rgba(74,117,168,0.2);
      letter-spacing: 0.5px;
    }
    .submit-btn:hover { box-shadow: 0 4px 20px rgba(74,117,168,0.3); }
    .submit-btn:active { transform: scale(0.96); }

    /* Storm effects */
    .lightning-flash {
      position: fixed;
      inset: 0;
      background: white;
      pointer-events: none;
      z-index: 70;
      opacity: 0;
    }
    @keyframes flash {
      0%   { opacity: 0; }
      5%   { opacity: 0.85; }
      10%  { opacity: 0.15; }
      15%  { opacity: 0.7; }
      20%  { opacity: 0; }
      100% { opacity: 0; }
    }
    .lightning-bolt {
      position: fixed;
      pointer-events: none;
      z-index: 65;
      opacity: 0;
      filter: drop-shadow(0 0 15px rgba(200, 220, 255, 0.8)) drop-shadow(0 0 40px rgba(150, 180, 255, 0.4));
    }
    @keyframes bolt-strike {
      0%   { opacity: 0; transform: scaleY(0.3); transform-origin: top; }
      8%   { opacity: 1; transform: scaleY(1); }
      12%  { opacity: 0.3; }
      16%  { opacity: 0.9; }
      25%  { opacity: 0; }
      100% { opacity: 0; }
    }

    .cloud-layer {
      position: fixed;
      top: -60px;
      left: -10%;
      right: -10%;
      height: 140px;
      pointer-events: none;
      z-index: 45;
      opacity: 0;
      transition: opacity 1.2s ease, transform 1.2s ease;
      transform: translateY(-30px);
    }
    .cloud-layer.show {
      opacity: 1;
      transform: translateY(0);
    }
    .cloud {
      position: absolute;
      border-radius: 50%;
      box-shadow: 0 6px 30px rgba(20, 25, 35, 0.35);
    }
    .cloud.c1  { width: 160px; height: 70px;  top: 40px; left: 5%;  background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }
    .cloud.c2  { width: 200px; height: 80px;  top: 25px; left: 15%; background: radial-gradient(ellipse at 50% 55%, #555e6e, #3a4250); }
    .cloud.c3  { width: 180px; height: 75px;  top: 35px; left: 30%; background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }
    .cloud.c4  { width: 220px; height: 85px;  top: 20px; left: 42%; background: radial-gradient(ellipse at 50% 50%, #4e5769, #333c4d); }
    .cloud.c5  { width: 180px; height: 72px;  top: 32px; left: 58%; background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }
    .cloud.c6  { width: 210px; height: 82px;  top: 22px; left: 70%; background: radial-gradient(ellipse at 50% 55%, #525b6b, #38414f); }
    .cloud.c7  { width: 150px; height: 65px;  top: 42px; left: 85%; background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }
    .cloud.c8  { width: 170px; height: 72px;  top: 30px; left: -2%; background: radial-gradient(ellipse at 50% 50%, #4d5667, #353e4e); }
    .cloud.c9  { width: 280px; height: 50px;  top: 75px; left: 10%; opacity: 0.7; background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }
    .cloud.c10 { width: 250px; height: 45px;  top: 80px; left: 45%; opacity: 0.6; background: radial-gradient(ellipse at 50% 60%, #4a5568, #2d3748); }

    @media (min-width: 768px) {
      .cloud-layer { height: 200px; top: -80px; transform: translateY(-40px); }
      .cloud.c1  { width: 280px; height: 120px; top: 60px; }
      .cloud.c2  { width: 350px; height: 140px; top: 40px; }
      .cloud.c3  { width: 300px; height: 130px; top: 55px; }
      .cloud.c4  { width: 400px; height: 150px; top: 30px; }
      .cloud.c5  { width: 320px; height: 125px; top: 50px; }
      .cloud.c6  { width: 380px; height: 145px; top: 35px; }
      .cloud.c7  { width: 260px; height: 115px; top: 65px; }
      .cloud.c8  { width: 300px; height: 130px; top: 45px; }
      .cloud.c9  { width: 500px; height: 80px;  top: 110px; }
      .cloud.c10 { width: 450px; height: 70px;  top: 120px; }
    }

    .raindrop {
      position: fixed;
      top: -20px;
      border-radius: 0 0 2px 2px;
      pointer-events: none;
      z-index: 42;
      opacity: 0;
    }

    /* Emoji overlay (storm/happy) */
    .emoji-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 50;
      pointer-events: none;
      opacity: 0;
    }
    .emoji-overlay.show { opacity: 1; }
    .emoji-char {
      font-size: 5rem;
      filter: drop-shadow(0 4px 24px rgba(0,0,0,0.2));
    }
    .tear {
      position: fixed;
      pointer-events: none;
      z-index: 51;
    }

    @keyframes emoji-in {
      0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
      50%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes emoji-out {
      0%   { transform: scale(1) translateY(0); opacity: 1; }
      100% { transform: scale(0.6) translateY(-30px); opacity: 0; }
    }
    @keyframes emoji-cry-shake {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      15%  { transform: translateY(3px) rotate(-4deg); }
      30%  { transform: translateY(0px) rotate(2deg); }
      45%  { transform: translateY(4px) rotate(-2deg); }
      60%  { transform: translateY(1px) rotate(3deg); }
      75%  { transform: translateY(3px) rotate(-3deg); }
    }
    @keyframes emoji-hug-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* Rainbow (happy effect) — positioned at bottom of viewport */
    .rainbow-container {
      position: fixed;
      bottom: 0;
      left: -30vw;
      width: 160vw;
      height: 50vh;
      pointer-events: none;
      z-index: 38;
      opacity: 0;
    }
    @keyframes rainbow-arc-in {
      0%   { opacity: 0; transform: scale(0.3) translateY(60%); }
      40%  { opacity: 0.9; }
      100% { opacity: 1; transform: scale(1) translateY(0%); }
    }
    @keyframes rainbow-arc-out {
      0%   { opacity: 1; transform: scale(1) translateY(0%); }
      100% { opacity: 0; transform: scale(1.05) translateY(-10%); }
    }

    /* Decline screen */
    .decline-screen {
      position: fixed; inset: 0; z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #edf2f9, #f5f7fb 40%, var(--white));
    }
    .decline-screen.show { display: flex; }
    .decline-content {
      text-align: center;
      max-width: 400px;
      padding: 2rem 1.5rem;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.7s var(--spring);
    }
    .decline-content.show {
      opacity: 1;
      transform: translateY(0);
    }
    .decline-emoji {
      font-size: 3.5rem;
      margin-bottom: 1rem;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
    }
    .decline-title {
      font-family: var(--serif);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--text);
      margin-bottom: 0.6rem;
      letter-spacing: 0.5px;
    }
    .decline-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    .decline-message {
      font-family: var(--serif);
      font-size: 1rem;
      font-style: italic;
      color: var(--text-secondary);
      padding: 0.8rem 1rem;
      background: var(--blue-50);
      border-radius: 12px;
      margin-bottom: 1.2rem;
      display: none;
    }
    .decline-message.show { display: block; }
    .decline-footer {
      font-size: 0.85rem;
      color: var(--text-muted);
      letter-spacing: 0.3px;
    }

    /* Celebration screen */
    .celebration {
      position: fixed; inset: 0; z-index: 100;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #0c1220, #152035 30%, #1a2744 60%, #1f2f52);
      touch-action: none;
    }
    .celebration.show { display: flex; }

    .stars { position: absolute; inset: 0; }
    .star {
      position: absolute; border-radius: 50%; background: white;
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.5); }
    }

    .party-scene {
      position: relative; z-index: 5;
      display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
      opacity: 0; transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.8s var(--spring);
    }
    .party-scene.show { opacity: 1; transform: translateY(0); }

    .characters {
      display: flex; gap: 0.5rem; align-items: flex-end; justify-content: center;
    }
    .character {
      display: flex; flex-direction: column; align-items: center;
      opacity: 0; transform: translateY(20px) scale(0.8);
      transition: opacity 0.5s ease, transform 0.6s var(--spring);
    }
    .character.show { opacity: 1; transform: translateY(0) scale(1); }

    .char-emoji {
      font-size: 4.5rem;
      filter: drop-shadow(0 6px 16px rgba(0,0,0,0.3));
      display: block;
      line-height: 1;
    }
    .character.kid .char-emoji {
      font-size: 3.5rem;
    }

    @keyframes dance-1 {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      20% { transform: translateY(-12px) rotate(-8deg); }
      40% { transform: translateY(0) rotate(0deg); }
      60% { transform: translateY(-8px) rotate(6deg); }
      80% { transform: translateY(-2px) rotate(-3deg); }
    }
    @keyframes dance-2 {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-10px) rotate(7deg); }
      50% { transform: translateY(0) rotate(0deg); }
      75% { transform: translateY(-14px) rotate(-5deg); }
    }
    @keyframes dance-3 {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
      30% { transform: translateY(-6px) rotate(-6deg) scale(1.05); }
      60% { transform: translateY(-10px) rotate(4deg) scale(0.95); }
    }
    @keyframes kid-bounce {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
      25% { transform: translateY(-18px) rotate(-10deg) scale(1.08); }
      50% { transform: translateY(0) rotate(0deg) scale(0.95); }
      75% { transform: translateY(-12px) rotate(8deg) scale(1.05); }
    }

    .character.dancing .char-emoji { animation: dance-1 1.6s ease-in-out infinite; }
    .character:nth-child(2).dancing .char-emoji { animation: dance-2 1.4s ease-in-out infinite; }
    .character:nth-child(3).dancing .char-emoji { animation: dance-3 1.8s ease-in-out infinite; }
    .character:nth-child(4).dancing .char-emoji { animation: dance-1 1.5s ease-in-out 0.2s infinite; }
    .character.kid.dancing .char-emoji { animation: kid-bounce 1s ease-in-out infinite; }

    /* Summary card */
    .summary-card {
      position: relative;
      max-width: 600px; width: 96%;
      border-radius: 20px;
      padding: 2px;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.6s var(--spring);
    }
    .summary-card.show { opacity: 1; transform: translateY(0); }

    .summary-inner {
      background: rgba(15, 22, 40, 0.7);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border-radius: 18px;
      padding: 1.8rem 2rem;
      color: white;
    }

    .summary-header {
      text-align: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .summary-header-icon {
      font-size: 2rem;
      margin-bottom: 0.3rem;
      display: block;
    }
    .summary-title {
      font-family: var(--serif);
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: 1px;
    }
    .summary-subtitle {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.45);
      margin-top: 0.3rem;
      letter-spacing: 0.5px;
    }

    .summary-rows {
      display: flex; flex-direction: column; gap: 0;
    }
    .summary-row {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 0.7rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      opacity: 0; transform: translateX(-10px);
      transition: opacity 0.4s ease, transform 0.4s var(--spring);
    }
    .summary-row.show { opacity: 1; transform: translateX(0); }
    .summary-row:last-child { border-bottom: none; }

    .summary-row-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .summary-row-content { flex: 1; }
    .summary-row-label {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
      margin-bottom: 0.15rem;
    }
    .summary-row-value {
      font-size: 0.9rem;
      font-weight: 500;
      color: rgba(255,255,255,0.9);
    }

    .summary-footer {
      text-align: center;
      margin-top: 1.2rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .summary-footer-text {
      font-family: var(--serif);
      font-size: 1.05rem;
      font-style: italic;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.3px;
    }
    .summary-footer-hearts {
      margin-top: 0.3rem;
      font-size: 0.7rem;
      color: rgba(255, 107, 138, 0.6);
      letter-spacing: 3px;
    }

    /* Fireworks & confetti particles */
    .firework-particle, .confetti-piece {
      position: absolute; pointer-events: none; z-index: 55;
    }
    .confetti-piece { z-index: 60; }

    /* ======================== */
    /*  REDUCED MOTION          */
    /* ======================== */
    @media (prefers-reduced-motion: reduce) {
      .hero-reveal,
      .reveal,
      .venue-card,
      .form-card,
      .timeline-item,
      .scroll-hint,
      .stagger-item,
      .rsvp-title {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
      }

      .particle {
        animation: none !important;
        opacity: 0.2 !important;
      }

      .ornament-path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
      }

      .divider-line {
        stroke-dashoffset: 0 !important;
        transition: none !important;
      }

      .divider-dot {
        opacity: 1 !important;
        transition: none !important;
        transform: scale(1) !important;
      }

      .timeline-progress {
        transform: scaleY(1) !important;
        animation: none !important;
        transition: none !important;
      }

      .hero-content,
      .particle-field {
        transition: none !important;
      }

      .timeline-item::before {
        transform: scale(1) !important;
        transition: none !important;
      }

      .hero::before,
      .hero::after,
      .hero-ambient,
      .hero-surname {
        animation: none !important;
      }

      .hero-surname {
        -webkit-text-fill-color: var(--blue-500) !important;
        background: none !important;
      }

      .hero-ambient {
        display: none !important;
      }
    }

    /* Static hero variant (no animations, used on private/error pages) */
    .hero--static .hero-content,
    .hero--static .hero-surname,
    .hero--static .hero-date {
      opacity: 1;
      transform: none;
      animation: none;
    }
    .hero--static .hero-surname {
      -webkit-text-fill-color: var(--blue-500);
      background: none;
    }