/* =====================================================================
   Shared theme — flowing flower petals + fade-in animations
   Loaded by index.php, checkout.php and success.php
   ===================================================================== */

/* Never allow horizontal scrolling from the full-bleed petal layer */
html, body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   Drifting flower petals — colourful, edge-to-edge background ambience.
   Fixed, full-viewport, non-interactive layer behind all content.
   Per-petal colour / size / position / timing come from inline styles
   generated in partials/petals.php (see --peak for opacity).
   --------------------------------------------------------------------- */
.petals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 0;
}

/* Outer wrapper: the drifting DESCENT (fall + gentle side-to-side swing).
   `perspective` lets the inner leaf flip in real 3D as it tumbles down. */
.pf {
    position: absolute;
    top: -14vh;
    opacity: 0;
    perspective: 620px;
    animation-name: leafDrift;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* eases the swing at each extreme */
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

/* Inner leaf: tumbles (spins + flips) slowly and smoothly in 3D as it falls. */
.leaf {
    display: block;
    /* Tight, un-blurred dark edge = a slight sense of thickness (not a cast shadow). */
    filter: drop-shadow(0 1px 0 rgba(60, 38, 20, 0.42));
    animation-name: leafTumble;
    animation-timing-function: linear; /* constant speed = fluid, never jittery */
    animation-iteration-count: infinite;
    will-change: transform;
}
.leaf svg { display: block; width: 100%; height: 100%; }

/* Descent + pendulum drift — a falling leaf swings gently as it sinks. */
@keyframes leafDrift {
    0%   { transform: translateY(-14vh) translateX(0);                              opacity: 0; }
    10%  {                                                                          opacity: var(--peak, 0.5); }
    30%  { transform: translateY(26vh)  translateX(var(--sway, 40px)); }
    55%  { transform: translateY(56vh)  translateX(calc(var(--sway, 40px) * -0.8)); }
    80%  { transform: translateY(86vh)  translateX(calc(var(--sway, 40px) * 0.5)); }
    90%  {                                                                          opacity: calc(var(--peak, 0.5) * 0.65); }
    100% { transform: translateY(116vh) translateX(calc(var(--sway, 40px) * -0.15)); opacity: 0; }
}

/* Tumble — a smooth, continuous spin with a 3D flip, like a leaf turning in the
   air. Linear timing + a long per-leaf duration keep it calm and fluid. */
@keyframes leafTumble {
    from { transform: rotateY(0deg)   rotateZ(0deg); }
    to   { transform: rotateY(360deg) rotateZ(calc(var(--spin, 1) * 360deg)); }
}

/* ---------------------------------------------------------------------
   Classic theme — vibrant petals + flowers (single-element fall).
   Only used when the "classic" theme is active.
   --------------------------------------------------------------------- */
.petal {
    position: absolute;
    top: -14vh;
    width: 22px;
    height: 22px;
    border-radius: 150% 0 150% 0;
    background: radial-gradient(circle at 30% 30%, #ff8fb1, #d6336c);
    opacity: 0;
    filter: blur(0.3px);
    animation-name: petalFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}
.bloom {
    position: absolute;
    top: -14vh;
    opacity: 0;
    animation-name: petalFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}
.bloom svg { display: block; width: 100%; height: 100%; }

@keyframes petalFall {
    0%   { transform: translateY(-14vh) translateX(0) rotate(0deg); opacity: 0; }
    12%  { opacity: var(--peak, 0.5); }
    50%  { transform: translateY(52vh) translateX(var(--sway, 40px)) rotate(190deg); }
    88%  { opacity: calc(var(--peak, 0.5) * 0.7); }
    100% { transform: translateY(116vh) translateX(calc(var(--sway, 40px) * -0.7)) rotate(360deg); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Plum-blossom branches (theme: blossom) — anchored to the top corners,
   swaying gently as if in a breeze.
   --------------------------------------------------------------------- */
.branch {
    position: fixed;
    top: -8px;
    width: 48vw;
    max-width: 600px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 3px 5px rgba(70, 45, 25, 0.12));
}
.branch svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Each branch: a gentle sway (transform) + a one-time fade-in (opacity) on load. */
.branch-left    { left: -12px;  transform-origin: left 15%;   animation: branchSwayL 7s   ease-in-out infinite alternate, branchIn 1.8s ease-out both; }
.branch-right   { right: -12px; transform-origin: center 15%; animation: branchSwayR 8.5s ease-in-out infinite alternate, branchIn 1.8s ease-out both; }
.branch-left-2  { left: -12px;  top: 7vh; width: 40vw; max-width: 500px; transform-origin: left 15%;   animation: branchSwayL 9.5s ease-in-out infinite alternate, branchIn 2.2s ease-out 0.2s both; }
.branch-right-2 { right: -12px; top: 7vh; width: 40vw; max-width: 500px; transform-origin: center 15%; animation: branchSwayR 11s  ease-in-out infinite alternate, branchIn 2.2s ease-out 0.2s both; }

@keyframes branchSwayL {
    from { transform: rotate(-1.6deg); }
    to   { transform: rotate(1.6deg); }
}
@keyframes branchSwayR {
    from { transform: scaleX(-1) rotate(-1.6deg); }
    to   { transform: scaleX(-1) rotate(1.6deg); }
}
/* Smooth fade-in of the branches (and their blossoms) as the page loads. */
@keyframes branchIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Faint rice-paper grain wash — completes the painted look. */
.paper-wash {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bokashi — soft warm-peach graded wash at the top (misty painting sky). */
.bokashi {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(240,206,182,0.38), rgba(240,206,182,0) 38%);
}

@media (max-width: 640px) {
    .branch { width: 70vw; max-width: 380px; opacity: 0.92; }
    .branch-left-2, .branch-right-2 { display: none; }
}

/* ---------------------------------------------------------------------
   Fade / rise-in on load — for cards and form elements
   --------------------------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.fade-in.delay-1 { animation-delay: 0.10s; }
.fade-in.delay-2 { animation-delay: 0.22s; }
.fade-in.delay-3 { animation-delay: 0.34s; }
.fade-in.delay-4 { animation-delay: 0.46s; }
.fade-in.delay-5 { animation-delay: 0.58s; }

/* ---------------------------------------------------------------------
   Respect users who prefer reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .petals { display: none; }
    .branch { animation: none !important; }
    .fade-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}