/* ==========================================================================
   Thanksgiving. Loaded by /seasonal/seasonal_head.cfm (via /site/site_head.cfm)
   only while the season is on, AFTER /site/site.css. Built the way
   halloween.css is (read its header for the rules a season follows):

          .site-header         every page: a maple leaf on the logo, a
                               cranberry-to-gold edge
          .home-hero           front-page stage: a warm dusk tint; leaves drift
                               down it (thanksgiving.js)
          .site-band           a page's closing band: leaves in the corner,
                               a sheaf of wheat
          .site-band--lead     a block that opens the page: leaves low, wheat
                               beside the form
          .site-band--plain    a dark block that only takes the colors
          .site-footer         every page: the footer's colour
          .site-ledge          every page: a turkey, pumpkins and a gourd on the
                               footer's ledge; they open the game, Turkey Got Wings

   The hidden surprises (thanksgiving.js): three quick taps on the front-page
   stage send a gust of leaves across it; the turkey watches the pointer and
   gobbles when it comes close; the wheat bends when the pointer brushes it.
   ========================================================================== */

:root {
    /* Site tokens: a harvest night, deep cranberry with candlelight */
    --site-header-bg: #2a1314;
    --site-stage-bg: #2a1314;
    --site-video-bg: #221011;
    --site-hero-tint: rgba(42, 19, 20, 0.62);           /* the hero's one flat overlay, as dark as the normal 56% black, in the night's cranberry */
    --site-band-bg: #2a1314;
    --site-band-edge: transparent;                      /* the bands carry glows, not the edge line */
    --site-band-glow-top: rgba(232, 84, 60, 0.24);      /* firelight: red, since a dim gold on this ground reads brown */
    --site-band-glow-bottom: rgba(0, 0, 0, 0.4);        /* a shadow at the bottom left, as the normal site has */
    --site-footer-bg: #1e0d0e;
    --site-mist: #faf5ee;               /* light page grounds take a warm cream; white cards stay white */

    /* The logo's coin (three taps on the front page) lands on a pumpkin pie */
    --site-coin-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' fill='%23d9a45a'/%3E%3Ccircle cx='20' cy='20' r='17.4' fill='none' stroke='%23f0c680' stroke-width='3' stroke-dasharray='2.6 2'/%3E%3Ccircle cx='20' cy='20' r='14.4' fill='%23c8641e'/%3E%3Cg fill='%23fffaf0'%3E%3Ccircle cx='16.4' cy='22' r='3'/%3E%3Ccircle cx='23.6' cy='22' r='3'/%3E%3Ccircle cx='20' cy='20.6' r='4'/%3E%3Ccircle cx='20' cy='16.8' r='2.6'/%3E%3C/g%3E%3C/svg%3E");

    /* Thanksgiving's own palette and art */
    --tg-gold: #f2a52a;
    --tg-cranberry: #a3213a;
    --tg-edge: linear-gradient(90deg, var(--tg-cranberry), var(--tg-gold) 50%, var(--tg-cranberry));

    --tg-leaf-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23c8401f' d='M50 2L55 15L62 12L60 27L67 29L58 41L73 33L76 39L92 30L86 46L96 50L81 57L84 63L69 62L79 76L70 75L67 83L55 72L52 73L52 98L48 98L48 73L45 72L33 83L30 75L21 76L31 62L16 63L19 57L4 50L14 46L8 30L24 39L27 33L42 41L33 29L40 27L38 12L45 15Z'/%3E%3Cpath fill='none' stroke='rgba(0,0,0,0.22)' stroke-width='2' stroke-linecap='round' d='M50 92V12M50 60L86 34M50 60L14 34M50 66L74 74M50 66L26 74'/%3E%3C/svg%3E");
    --tg-leaf-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e8892a' d='M50 2L55 15L62 12L60 27L67 29L58 41L73 33L76 39L92 30L86 46L96 50L81 57L84 63L69 62L79 76L70 75L67 83L55 72L52 73L52 98L48 98L48 73L45 72L33 83L30 75L21 76L31 62L16 63L19 57L4 50L14 46L8 30L24 39L27 33L42 41L33 29L40 27L38 12L45 15Z'/%3E%3Cpath fill='none' stroke='rgba(0,0,0,0.22)' stroke-width='2' stroke-linecap='round' d='M50 92V12M50 60L86 34M50 60L14 34M50 66L74 74M50 66L26 74'/%3E%3C/svg%3E");
    --tg-leaf-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e9b52e' d='M50 2L55 15L62 12L60 27L67 29L58 41L73 33L76 39L92 30L86 46L96 50L81 57L84 63L69 62L79 76L70 75L67 83L55 72L52 73L52 98L48 98L48 73L45 72L33 83L30 75L21 76L31 62L16 63L19 57L4 50L14 46L8 30L24 39L27 33L42 41L33 29L40 27L38 12L45 15Z'/%3E%3Cpath fill='none' stroke='rgba(0,0,0,0.22)' stroke-width='2' stroke-linecap='round' d='M50 92V12M50 60L86 34M50 60L14 34M50 66L74 74M50 66L26 74'/%3E%3C/svg%3E");
    --tg-leaf-cranberry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a3213a' d='M50 2L55 15L62 12L60 27L67 29L58 41L73 33L76 39L92 30L86 46L96 50L81 57L84 63L69 62L79 76L70 75L67 83L55 72L52 73L52 98L48 98L48 73L45 72L33 83L30 75L21 76L31 62L16 63L19 57L4 50L14 46L8 30L24 39L27 33L42 41L33 29L40 27L38 12L45 15Z'/%3E%3Cpath fill='none' stroke='rgba(0,0,0,0.22)' stroke-width='2' stroke-linecap='round' d='M50 92V12M50 60L86 34M50 60L14 34M50 66L74 74M50 66L26 74'/%3E%3C/svg%3E");

    /* A few fallen leaves, for a corner */
    --tg-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M50 2L55 15L62 12L60 27L67 29L58 41L73 33L76 39L92 30L86 46L96 50L81 57L84 63L69 62L79 76L70 75L67 83L55 72L52 73L52 98L48 98L48 73L45 72L33 83L30 75L21 76L31 62L16 63L19 57L4 50L14 46L8 30L24 39L27 33L42 41L33 29L40 27L38 12L45 15Z'/%3E%3Cpath fill='none' stroke='rgba(0,0,0,0.22)' stroke-width='2' stroke-linecap='round' d='M50 92V12M50 60L86 34M50 60L14 34M50 66L74 74M50 66L26 74'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23l' fill='%23a3213a' transform='translate(72 64) rotate(200) scale(0.42) translate(-50 -50)'/%3E%3Cuse href='%23l' fill='%23e8892a' transform='translate(20 88) rotate(70) scale(0.52) translate(-50 -50)'/%3E%3Cuse href='%23l' fill='%23e9b52e' transform='translate(88 18) rotate(-25) scale(0.55) translate(-50 -50)'/%3E%3Cuse href='%23l' fill='%23c8401f' transform='translate(34 30) rotate(135) scale(0.78) translate(-50 -50)'/%3E%3Cuse href='%23l' fill='%23e8892a' transform='translate(122 10) rotate(30) scale(0.34) translate(-50 -50)'/%3E%3C/svg%3E");

    /* A sheaf of wheat tied with a cranberry ribbon */
    --tg-wheat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 150'%3E%3Cdefs%3E%3Cg id='w'%3E%3Cpath d='M0 0V-112' stroke='%23c99a45' stroke-width='2' fill='none'/%3E%3Cg fill='%23e8b956'%3E%3Cellipse cx='-4' cy='-72' rx='3.2' ry='6.4' transform='rotate(-28 -4 -72)'/%3E%3Cellipse cx='4' cy='-76' rx='3.2' ry='6.4' transform='rotate(28 4 -76)'/%3E%3Cellipse cx='-4' cy='-81' rx='3.2' ry='6.4' transform='rotate(-28 -4 -81)'/%3E%3Cellipse cx='4' cy='-85' rx='3.2' ry='6.4' transform='rotate(28 4 -85)'/%3E%3Cellipse cx='-4' cy='-90' rx='3.2' ry='6.4' transform='rotate(-28 -4 -90)'/%3E%3Cellipse cx='4' cy='-94' rx='3.2' ry='6.4' transform='rotate(28 4 -94)'/%3E%3Cellipse cx='-4' cy='-99' rx='3' ry='6' transform='rotate(-28 -4 -99)'/%3E%3Cellipse cx='4' cy='-103' rx='3' ry='6' transform='rotate(28 4 -103)'/%3E%3Cellipse cx='-3.5' cy='-108' rx='2.8' ry='5.6' transform='rotate(-28 -3.5 -108)'/%3E%3Cellipse cx='3.5' cy='-111' rx='2.8' ry='5.6' transform='rotate(28 3.5 -111)'/%3E%3Cellipse cx='0' cy='-118' rx='2.8' ry='6'/%3E%3C/g%3E%3Cpath d='M0 -122L-1 -140M-4 -112L-13 -128M4 -114L13 -130' stroke='%23e2b257' stroke-width='0.8' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23w' transform='translate(35 148) rotate(-15)'/%3E%3Cuse href='%23w' transform='translate(35 148) rotate(14) scale(0.94)'/%3E%3Cuse href='%23w' transform='translate(35 148)'/%3E%3Crect x='25' y='111' width='20' height='5' rx='2' fill='%23a3213a'/%3E%3C/svg%3E");

    /* Pumpkins and a gourd for the footer's ledge */
    --tg-gourds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.42' stop-color='%234f7a2a'/%3E%3Cstop offset='0.56' stop-color='%23e2b93a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 18c0-4 1-8 4-10l2 2c-2 2-3 5-3 8z' fill='%236b4a1f'/%3E%3Cellipse cx='15' cy='31' rx='12' ry='13' fill='%23c95a14'/%3E%3Cellipse cx='37' cy='31' rx='12' ry='13' fill='%23c95a14'/%3E%3Cellipse cx='26' cy='31' rx='12.5' ry='13' fill='%23ec7a2a'/%3E%3Cpath d='M66 27c0-3 1-6 3-7l1.6 1.6c-1.5 1.5-2 3.5-2 5.4z' fill='%235a6b2c'/%3E%3Cellipse cx='60' cy='35' rx='9' ry='9' fill='%23d8c59c'/%3E%3Cellipse cx='76' cy='35' rx='9' ry='9' fill='%23d8c59c'/%3E%3Cellipse cx='68' cy='35' rx='9.5' ry='9' fill='%23f1e6cc'/%3E%3Cpath d='M100 44c-9 0-12-6-10-12 1.5-4 5-5 6-10 .8-4 1-9 4-9s3.2 5 4 9c1 5 4.5 6 6 10 2 6-1 12-10 12z' fill='url(%23g)'/%3E%3Cpath d='M100 13c0-3 1-5 3-6' stroke='%235a4a22' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
}


/* ---------- .site-header: a cranberry-to-gold edge and a maple leaf on the logo ---------- */

.site-header::after { background: var(--tg-edge); }

.site-header__logo::before {
    content: "";
    position: absolute;
    /* On the top right of the "sm" coin, sized from the logo so it sits right at every logo size */
    top: -18%;
    left: calc(var(--site-logo-h) * 0.55);
    height: 58%;
    aspect-ratio: 1;
    pointer-events: none;
    transform: rotate(28deg);
    background: no-repeat center / contain var(--tg-leaf-amber);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Orange buttons glow like candlelight */
.site-btn--brand:hover,
.site-btn--brand:focus-visible {
    box-shadow: 0 0 0 3px rgba(242, 165, 42, 0.25), 0 0 26px rgba(242, 165, 42, 0.5);
}


/* ---------- .home-hero: the leaves come from thanksgiving.js ---------- */

/* The leaf layer sits over the photo and under the words. Each leaf falls the stage's height
   (cqh: a share of the layer's height) while its inner part sways and turns. */
.tg-leaves {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
}

.tg-leaf {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    animation: tg-fall var(--fall) linear var(--delay) infinite;
}

.tg-leaf > i {
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center / contain var(--tg-leaf-amber);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    animation: tg-sway var(--sway) ease-in-out infinite alternate;
}

.tg-leaf--red > i { background-image: var(--tg-leaf-red); }
.tg-leaf--gold > i { background-image: var(--tg-leaf-gold); }
.tg-leaf--cranberry > i { background-image: var(--tg-leaf-cranberry); }

/* The gust: leaves blow in from the left and across the stage, tumbling */
.tg-leaf--gust {
    top: var(--y);
    left: calc(-1 * var(--size));
    animation: tg-gust var(--fall) cubic-bezier(0.35, 0.1, 0.6, 1) var(--delay) both;
}

.tg-leaf--gust > i { animation: tg-tumble 0.9s linear infinite; }

@keyframes tg-fall {
    from { transform: translateY(-15cqh); }
    to   { transform: translateY(110cqh); }
}

@keyframes tg-sway {
    from { transform: translateX(-28px) rotate(0deg); }
    to   { transform: translateX(28px) rotate(var(--turn)); }
}

@keyframes tg-gust {
    from { transform: translate(0, 0); }
    to   { transform: translate(calc(100cqw + 2 * var(--size)), 18cqh); }
}

@keyframes tg-tumble {
    to { transform: rotate(360deg); }
}


/* ---------- .site-band: harvest colors on every dark band ----------
   The colour and the two glows come from site.css; the tokens above make them harvest ones. */

.site-band {
    position: relative;
    overflow: hidden;
}

.site-band .call-action-content,
.site-band .home-closing__inner {
    position: relative;
    z-index: 1;
}

/* A closing band: leaves in the top corner, a sheaf of wheat at the bottom right */
.site-band:not(.site-band--lead, .site-band--plain)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(110px, 15vw, 190px);
    aspect-ratio: 1;
    pointer-events: none;
    background: no-repeat top left / contain var(--tg-leaves);
}

.site-band:not(.site-band--lead, .site-band--plain)::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 70px;
    height: 150px;
    pointer-events: none;
    transform-origin: bottom center;
    background: no-repeat bottom center / contain var(--tg-wheat);
}

/* Phones: a smaller sheaf, tucked in the corner clear of the buttons */
@media (max-width: 767px) {
    .site-band:not(.site-band--lead, .site-band--plain)::after {
        right: 4%;
        width: 44px;
        height: 94px;
    }
}

/* A block that opens the page (sign-in, password reset): leaves low on the left,
   and on wide screens wheat beside the form */
.site-band--lead::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: scaleY(-1);
    background: no-repeat top left / contain var(--tg-leaves);
}

/* When a plain block continues the page, the leaves move to that block's bottom corner */
.site-band--lead:has(+ .site-band--plain)::before { content: none; }

.site-band--lead + .site-band--plain::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: scaleY(-1);
    background: no-repeat top left / contain var(--tg-leaves);
}

@media (max-width: 719px) {
    .site-band--lead + .site-band--plain::before { width: 90px; }
}

@media (min-width: 992px) {
    .site-band--lead::after,
    .site-band--lead + .site-band--plain::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 5%;
        width: 84px;
        height: 180px;
        pointer-events: none;
        transform-origin: bottom center;
        background: no-repeat bottom center / contain var(--tg-wheat);
    }

    /* Wheat stands on the ground: when a plain block continues the page, it stands in that block
       (at most nine-tenths of its height) instead of floating where the lead block ends */
    .site-band--lead:has(+ .site-band--plain)::after { content: none; }
    .site-band--lead + .site-band--plain::after { height: min(180px, 90%); }
}

@keyframes tg-wheat-sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}


/* ---------- .site-ledge: a turkey, pumpkins and a gourd on the footer's ledge (they open Turkey Got Wings) ---------- */

/* The pumpkins on the right; the turkey (thanksgiving.js draws it) stands to their left */
.site-ledge {
    display: block;
    top: -70px;
    right: 6%;
    width: 192px;
    height: 74px;
    background: no-repeat right bottom / 120px 44px var(--tg-gourds);
    filter: drop-shadow(0 0 6px rgba(242, 165, 42, 0.25));
}

.tg-turkey {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 72px;
    overflow: visible;
}

/* The tail rattles about the turkey's middle */
.tg-turkey__tail {
    transform-box: view-box;
    transform-origin: 40px 52px;
}

/* Each feather turns about the turkey's middle by its own angle, times how far the tail is spread */
.tg-feather {
    transform-box: view-box;
    transform-origin: 40px 52px;
    transform: rotate(calc(var(--a) * var(--tg-spread, 0.8)));
}

.tg-pupil { transform: translate(var(--tg-look-x, 0), var(--tg-look-y, 0)); }

.tg-turkey__head {
    transform-box: view-box;
    transform-origin: 40px 44px;
    transform: rotate(var(--tg-tilt, 0deg));
}

/* "Gobble gobble!": a small card beside the turkey's head while it shows off. Beside, not above:
   above it would cover the buttons at the bottom of the block over the footer (a phone's closing band). */
.tg-gobble {
    position: absolute;
    right: calc(100% + 2px);
    bottom: 40px;
    padding: 4px 10px;
    border-radius: 10px;
    background: #ffffff;
    color: var(--site-ink);
    font: 700 12px/1.4 var(--site-font);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.site-ledge.is-gobbling .tg-gobble { opacity: 1; }
.site-ledge.is-gobbling .tg-turkey { --tg-spread: 1.08; }

/* Phones: a smaller turkey and pumpkins */
@media (max-width: 719px) {
    .site-ledge {
        top: -56px;
        width: 150px;
        height: 60px;
        background-size: 96px 35px;
    }

    .tg-turkey { width: 58px; height: 58px; }
    .tg-gobble { bottom: 30px; }
}


/* ---------- Motion: only for visitors who haven't asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {
    .site-band:not(.site-band--lead, .site-band--plain)::after,
    .site-band--lead::after,
    .site-band--lead + .site-band--plain::after {
        animation: tg-wheat-sway 5s ease-in-out infinite;
    }

    /* Brushed by the pointer (thanksgiving.js): the sheaf bends the way it was pushed, then springs back.
       Last, so it wins over the sway above. */
    .site-band.tg-brushed::after { animation: tg-wheat-brush 1.1s ease-out; }

    /* The turkey: the tail fans out with a spring, rattles, and the head shakes while it gobbles */
    .tg-feather { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
    .tg-pupil { transition: transform 0.15s ease-out; }
    .tg-turkey__head { transition: transform 0.25s ease-out; }
    .tg-gobble { transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
    .site-ledge.is-gobbling .tg-gobble { transform: translateY(0); }
    .site-ledge.is-gobbling .tg-turkey__tail { animation: tg-rattle 0.12s linear 0.3s 6; }
    .site-ledge.is-gobbling .tg-turkey__head { animation: tg-gobble-head 0.16s ease-in-out 6 alternate; }
}

@keyframes tg-wheat-brush {
    0%   { transform: rotate(0deg); }
    18%  { transform: rotate(calc(var(--tg-brush, 1) * 12deg)); }
    40%  { transform: rotate(calc(var(--tg-brush, 1) * -6deg)); }
    62%  { transform: rotate(calc(var(--tg-brush, 1) * 3deg)); }
    82%  { transform: rotate(calc(var(--tg-brush, 1) * -1deg)); }
    100% { transform: rotate(0deg); }
}

@keyframes tg-rattle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(1.6deg); }
    75%      { transform: rotate(-1.6deg); }
}

@keyframes tg-gobble-head {
    from { transform: rotate(-9deg); }
    to   { transform: rotate(9deg); }
}