/* Blue Petal — watercolor petals on warm handmade paper, based on the supplied video. */
body.theme-blue-petal{
  --radius:18px;--on-primary:#fff;--card-border:rgba(78,108,148,.23);
  --shadow:0 16px 38px -18px rgba(51,69,93,.25);
  position:relative;isolation:isolate;background:#f6f2e8;color:var(--text)
}

/* The user's video supplies the paper grain, corner flowers, and golden light trail. */
body.theme-blue-petal::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:#f6f2e8;
  background-image:url('/themes/blue-petal/floral-paper-clean.webp');
  background-size:auto 100vh;background-position:center top;background-repeat:no-repeat;opacity:.82
}
@media(min-width:900px){body.theme-blue-petal::before{background-position:right top}}

/* Soft falling petals remain behind content and never intercept taps. */
body.theme-blue-petal::after{
  content:"";position:fixed;inset:-12vh 0 0;z-index:1;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(ellipse 4px 8px at 12% 18%,rgba(67,101,145,.62) 42%,transparent 75%),
    radial-gradient(ellipse 5px 8px at 28% 63%,rgba(112,143,171,.52) 42%,transparent 75%),
    radial-gradient(ellipse 4px 7px at 46% 34%,rgba(67,101,145,.48) 42%,transparent 75%),
    radial-gradient(ellipse 5px 8px at 67% 82%,rgba(112,143,171,.48) 42%,transparent 75%),
    radial-gradient(ellipse 4px 7px at 85% 49%,rgba(67,101,145,.5) 42%,transparent 75%);
  animation:blue-petal-fall 20s ease-in-out infinite alternate;will-change:transform
}
@keyframes blue-petal-fall{
  0%{transform:translate3d(0,-2vh,0) rotate(-4deg)}
  100%{transform:translate3d(8px,9vh,0) rotate(9deg)}
}

.theme-blue-petal .shell{position:relative;z-index:2}
.theme-blue-petal .shell::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url('/themes/blue-petal/floral-motifs.png');
  background-size:auto 100vh;background-position:center top;background-repeat:no-repeat;
  transform-origin:50% 8%;animation:blue-petal-sway 9s ease-in-out infinite alternate;will-change:transform
}
@keyframes blue-petal-sway{
  0%{transform:rotate(-1.2deg)}
  100%{transform:rotate(1.2deg)}
}
@media(min-width:900px){.theme-blue-petal .shell::before{background-position:right top}}
.theme-blue-petal .main{background:transparent;background-image:none}
.theme-blue-petal .sec{background:transparent}
.theme-blue-petal .corner,.theme-blue-petal .cover__corner{opacity:.22}
.theme-blue-petal .hero{background:linear-gradient(180deg,rgba(255,253,247,.26),rgba(255,253,247,.12))}

/* Reuse an invited couple's own cover photo when supplied; otherwise show the artwork. */
.theme-blue-petal .cover{background:#f6f2e8;background-image:none;color:#344154}
.theme-blue-petal .cover__bg{
  background-color:#f6f2e8;
  background-image:linear-gradient(180deg,rgba(255,253,247,.08),rgba(255,253,247,.3)),url('/themes/blue-petal/floral-paper-clean.webp');
  background-position:center,center top;
  background-size:cover,auto 100vh;
  background-repeat:no-repeat,no-repeat
}
.theme-blue-petal .cover__bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url('/themes/blue-petal/floral-motifs.png');
  background-size:auto 100vh;background-position:center top;background-repeat:no-repeat;
  transform-origin:50% 8%;animation:blue-petal-sway 9s ease-in-out infinite alternate;will-change:transform
}
.theme-blue-petal .cover__inner{max-width:420px}
.theme-blue-petal .cover__label,.theme-blue-petal .cover__guest,.theme-blue-petal .cover__to{color:#526a8a}
.theme-blue-petal .cover__title,.theme-blue-petal .hero__title,.theme-blue-petal .person__nick,.theme-blue-petal .closing__title,.theme-blue-petal .side__title{color:#536f96}
.theme-blue-petal .cover__date,.theme-blue-petal .hero__date{color:#53637a;letter-spacing:.2em}
.theme-blue-petal .cover__frame,.theme-blue-petal .person__photo{border-color:#fffdf7;outline-color:#8198b4;box-shadow:var(--shadow)}
.theme-blue-petal .monogram{background:radial-gradient(circle at 32% 26%,#dce6ee,#fffdf7 72%);color:#536f96}
.theme-blue-petal .sec__title,.theme-blue-petal .event__name,.theme-blue-petal .event__num,.theme-blue-petal .countdown b,.theme-blue-petal .timeline__date{color:#536f96}
.theme-blue-petal .event,.theme-blue-petal .quote__box,.theme-blue-petal .card,.theme-blue-petal .countdown div,.theme-blue-petal .wish{
  background:rgba(255,253,247,.9);border:1px solid var(--card-border);box-shadow:var(--shadow);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
}
.theme-blue-petal .btn--primary{background:#536f96;border-color:#435f84;color:#fff;box-shadow:0 8px 20px -8px rgba(66,93,132,.4)}
.theme-blue-petal .btn--primary:hover{background:#405d83}
.theme-blue-petal .btn--ghost{color:#536f96;border-color:rgba(83,111,150,.5)}
.theme-blue-petal .form input:not([type=radio]),.theme-blue-petal .form textarea,.theme-blue-petal .form select{background:rgba(255,253,247,.94);color:#344154;border-color:rgba(83,111,150,.3)}
.theme-blue-petal .bottom-nav{background:rgba(255,253,247,.96);border-top:1px solid rgba(83,111,150,.2)}
.theme-blue-petal .side:not([style]){
  background-color:#f6f2e8;background-image:linear-gradient(180deg,rgba(255,253,247,.25),rgba(255,253,247,.42)),url('/themes/blue-petal/floral-paper-clean.webp');
  background-position:center;background-size:cover;color:#344154
}
.theme-blue-petal .side:not([style])::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('/themes/blue-petal/floral-motifs.png');
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform-origin:50% 8%;animation:blue-petal-sway 9s ease-in-out infinite alternate;will-change:transform
}
.theme-blue-petal .side__overlay{position:relative;z-index:1;padding:28px 32px;border:1px solid rgba(83,111,150,.18);border-radius:20px;background:rgba(255,253,247,.7);backdrop-filter:blur(5px)}
.theme-blue-petal .side__label{color:#536f96}
.theme-blue-petal .gift__qr{background:#fff}
.theme-blue-petal .toast{background:#536f96;color:#fff}

@media(max-width:480px){
  body.theme-blue-petal::after{opacity:.34}
  .theme-blue-petal .sec{padding-left:22px;padding-right:22px}
  .theme-blue-petal .corner,.theme-blue-petal .cover__corner{width:120px}
}
@media(prefers-reduced-motion:reduce){
  body.theme-blue-petal::after,.theme-blue-petal .shell::before,.theme-blue-petal .cover__bg::after,.theme-blue-petal .side:not([style])::before{animation:none!important;transform:none!important;will-change:auto}
  .theme-blue-petal *{scroll-behavior:auto!important}
}