/* ==========================================================================
   Spiritual Warfare Challenge - overrides, stage 2
   Site:  stb-stl.solutiosoftware.com
   Loaded AFTER /images/pub/spiritual-warfare.css by module 1232.

   WHY THIS IS A SEPARATE FILE
   Everything under /images/pub is served with
   "Cache-Control: max-age=172800" - a 48 hour browser cache. While a page is
   being iterated, an edit made inside a stylesheet a browser already holds can
   stay invisible for two days. Keeping the current round of changes in a file
   of its own, loaded last, keeps iteration predictable; fold it back into the
   main stylesheet once the page is settled. Bump the ?v= on each change.

   Rules here deliberately out-specify the equivalents in the main file
   (.sw-page div.x beats .sw-page .x) and use literal colours and longhand
   background properties, so nothing is left to resolve or mis-parse.
   ========================================================================== */

/* ---------- 1. section edges --------------------------------------------------- */

/* Match the tile width to the scallop diameter, so neighbouring half-circles
   touch and read as one continuous draped valance. */
.sw-page { --sw-scallop: 2.6rem; }

/* Cream hero. The beige drapes DOWN over the blue.
   Layer 1 (top)  cream half-circles hanging from the strip's top edge, sitting
                  in the last R of the element
   Layer 2        a navy strip filling that last R
   Layer 3        cream filling everything above it                              */
.sw-page div.sw-hero {
    background-image:
        radial-gradient(circle at 50% 0, #F6E9D2 0 var(--sw-scallop-h), rgba(49, 63, 90, 0) calc(var(--sw-scallop-h) + 1px)),
        linear-gradient(#313F5A, #313F5A),
        linear-gradient(#F6E9D2, #F6E9D2);
    background-position: 0 100%, 0 100%, 0 0;
    background-size: var(--sw-scallop) var(--sw-scallop-h), 100% var(--sw-scallop-h), 100% calc(100% - var(--sw-scallop-h));
    background-repeat: repeat-x, no-repeat, no-repeat;
}

/* Lower cream band. A plain straight edge - no scallop, and no reserve for one. */
.sw-page div.sw-blessing {
    background-color: #F6E9D2;
    background-image: none;
    padding: min(3vw, 2.25rem) min(5vw, 3.5rem) min(3vw, 2.25rem);
}

/* ---------- 2. the lower band keeps its colour; only its words arrive ----------

   The band was in the scroll-reveal layer, so its cream background faded in with
   the text - the whole edge appeared to wash in on scroll. A band that carries
   its own colour must not fade. The reveal moves to the band's children instead,
   which is the only part anybody needs to watch arrive.
   ------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

    /* undo the reveal state that the main stylesheet puts on the band itself */
    .sw-page > .sw-blessing {
        opacity: 1;
        transform: none;
    }

    .sw-page > .sw-blessing > p {
        opacity: 0;
        transform: translateY(1rem);
        transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                    transform .7s cubic-bezier(.22, .61, .36, 1);
    }

    /* the motto settles a beat after the two paragraphs above it */
    .sw-page > .sw-blessing > p:nth-child(2) { transition-delay: .1s; }
    .sw-page > .sw-blessing > p:nth-child(3) { transition-delay: .2s; }

    .sw-page > .sw-blessing.sw-in > p {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 3. the log card swaps its form for the thank-you -------------------

   The prayer form and the thank-you share one box inside the "Log Your Prayers"
   card. On a successful send the form fades out and the thank-you fades in on top
   of it, so the card keeps its height and nothing below it moves. The dove lives
   in that same box and rises out of it.

   The form keeps its space after the fade: visibility, not display, is what
   changes. Removing it from the flow would collapse the box and the absolutely
   positioned thank-you with it.
   ------------------------------------------------------------------------------ */

.sw-page .sw-formarea { position: relative; }

.sw-page .sw-form.sw-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .45s;
}

/* the thank-you sits exactly over the form's box */
.sw-page .sw-formarea .sw-thanks {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* the main stylesheet dresses .sw-thanks as a panel of its own; inside the
       card that is not wanted */
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1);
}

.sw-page .sw-formarea .sw-thanks[hidden] { display: none; }
.sw-page .sw-formarea .sw-thanks.is-on { opacity: 1; }

.sw-page .sw-formarea .sw-thanks p { margin: 0; color: rgba(246, 233, 210, .92); }

.sw-page .sw-formarea .sw-dove {
    position: absolute;
    left: 50%;
    top: calc(50% - 3.4rem);
    width: 3rem;
    height: auto;
    margin-left: -1.5rem;
    color: #C38E6A;
    pointer-events: none;
}

/* With motion on, the dove lifts out of the card and fades - the prayers sent.
   With motion off it stays as a quiet emblem above the words, and nothing is
   hidden from anybody. */
@media (prefers-reduced-motion: no-preference) {

    .sw-page .sw-formarea .sw-thanks.is-on .sw-dove {
        animation: sw-dove-fly 2.8s cubic-bezier(.22, .61, .36, 1) .3s both;
    }
}

@keyframes sw-dove-fly {
    0%   { opacity: 0;   transform: translate3d(0, 3.4rem, 0) scale(.55) rotate(-8deg); }
    14%  { opacity: 1; }
    50%  { opacity: 1;   transform: translate3d(.9rem, 0, 0) scale(.95) rotate(5deg); }
    78%  { opacity: .85; transform: translate3d(-.5rem, -2.6rem, 0) scale(.7) rotate(-3deg); }
    100% { opacity: 0;   transform: translate3d(.4rem, -5rem, 0) scale(.45) rotate(4deg); }
}


/* ---------- 4. dove placement, tuned -------------------------------------------
   In the first pass the dove sat on the "Thank You" line. It is anchored in the
   clear space ABOVE the wording, and the wording is nudged down to make that
   space, so the whole flight happens above the words and never crosses them.
   ------------------------------------------------------------------------------ */

.sw-page .sw-formarea .sw-thanks { padding-top: 3.6rem; }

.sw-page .sw-formarea .sw-dove { top: 1.4rem; }

@keyframes sw-dove-fly {
    0%   { opacity: 0;   transform: translate3d(0, 2.2rem, 0) scale(.5) rotate(-8deg); }
    16%  { opacity: 1; }
    55%  { opacity: 1;   transform: translate3d(.8rem, 0, 0) scale(.9) rotate(5deg); }
    100% { opacity: 0;   transform: translate3d(-.4rem, -2.6rem, 0) scale(.45) rotate(-4deg); }
}

/* ---------- 5. thank-you emblem: three crosses ---------------------------------
   Replaces the flying dove. A dove in flight needs convincing wing and body
   shapes; a prayer-hands glyph has the same problem. A Latin cross is two
   rectangles, so it can be drawn exactly - and three of them sharing one
   crossbar line read as a Calvary group.

   No flight and no rotation: the three crosses fade in from just below their
   resting place and stay there. The centre cross arrives first, then the two
   beside it.

   The animated element is each cross's OUTER <g> - the un-scaled wrapper - so all
   three rise by the same distance. Animating inside the scale() would make the
   small crosses travel less than the large one.

   Section 3's .sw-dove rules and section 4's dove tunings are now unreachable:
   no element carries .sw-dove any more. They are deleted when this file is folded
   back into spiritual-warfare.css.
   ------------------------------------------------------------------------------ */

/* the wording no longer reserves room for the absolutely placed dove */
.sw-page .sw-formarea .sw-thanks { padding-top: 0; }

.sw-page .sw-formarea .sw-crosses {
    display: block;
    flex: none;
    width: 9.5rem;
    max-width: 60%;
    height: auto;
    margin: 0 auto 1.15rem;
    fill: #C38E6A;
    overflow: visible;
}

/* At rest the crosses are simply visible. Only the animated case starts them
   hidden, so a reader who asks for reduced motion - or whose browser never runs
   the animation - is never left looking at an empty box. */
.sw-page .sw-crosses .sw-cross { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {

    .sw-page .sw-crosses .sw-cross { opacity: 0; }

    .sw-page .sw-formarea .sw-thanks.is-on .sw-cross {
        animation: sw-cross-in .7s cubic-bezier(.22, .61, .36, 1) forwards;
    }

    /* centre first, then the two beside it */
    .sw-page .sw-formarea .sw-thanks.is-on .sw-cross-c { animation-delay: .15s; }
    .sw-page .sw-formarea .sw-thanks.is-on .sw-cross-l { animation-delay: .4s; }
    .sw-page .sw-formarea .sw-thanks.is-on .sw-cross-r { animation-delay: .55s; }
}

@keyframes sw-cross-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 6. crosses: size and weight, tuned ---------------------------------
   At 9.5rem the emblem read as small and washed out against the navy card - the
   bars came out around 2.4px wide, and antialiasing greyed the gold. The emblem
   is larger here, and a stroke of the same colour as the fill thickens every bar
   by stroke-width user units. Thin strokes are what lose the colour; this is the
   cheapest honest fix and it needs no change to the geometry in the page markup.
   ------------------------------------------------------------------------------ */

.sw-page .sw-formarea .sw-crosses {
    width: 13rem;
    max-width: 72%;
    margin: 0 auto 1.35rem;
}

.sw-page .sw-crosses .sw-cross path {
    stroke: #C38E6A;
    stroke-width: 1;
    stroke-linejoin: miter;
}

/* ---------- 7. the thank-you box, given room to breathe ------------------------

   The thank-you is absolutely positioned over the form's box so the card keeps
   its height on submit. That ties its content to the form's height, and on a
   390px phone the wording came within 15px of the box edge - one more wrapped
   line and it would spill out. The box now runs 1rem past the form at the top and
   the bottom. It is centred either way, so nothing moves; this only buys room for
   the content to grow into, and the card's own padding absorbs the overhang.
   ------------------------------------------------------------------------------ */

.sw-page .sw-formarea .sw-thanks { inset: -1rem 0; }