/**
 * TPT Seasonal Logo Badge & Theme
 * Marker: TPT_SEASONAL_LOGO_BADGE_V23B_20261107
 */

/* ---------------------------------------------------------------
   Badge host and base badge
   --------------------------------------------------------------- */
.tpt-seasonal-badge-host {
    position: relative;
}

.tpt-seasonal-badge {
    position: absolute;
    z-index: 9;
    display: block;
    width: 38px;
    height: 38px;
    line-height: 0;
    pointer-events: auto;
    cursor: help;
    transform: rotate(-6deg);
}

.tpt-seasonal-badge img,
.tpt-seasonal-badge svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    pointer-events: none;
}

.tpt-seasonal-badge svg {
    overflow: visible;
}

.tpt-seasonal-badge--poppy img,
.tpt-seasonal-badge--daffodil img,
.tpt-seasonal-badge--poppy svg,
.tpt-seasonal-badge--daffodil svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    animation: tpt-glow 3.2s ease-in-out infinite;
}

.tpt-seasonal-badge--poppy {
    animation: tpt-sway-l 5s ease-in-out infinite;
    transform-origin: 50% 8%;
}

.tpt-seasonal-badge--daffodil {
    animation: tpt-sway-l 4.2s ease-in-out infinite;
    transform-origin: 50% 8%;
}

.tpt-seasonal-badge--top-left.tpt-seasonal-badge--poppy,
.tpt-seasonal-badge--top-left.tpt-seasonal-badge--daffodil {
    animation-name: tpt-sway-r;
}

.tpt-seasonal-badge--festival {
    transform: none;
    animation: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

/* Placement — the default is bottom right, sitting slightly over the corner. */
.tpt-seasonal-badge--bottom-right {
    bottom: -10%;
    right: -10%;
}

.tpt-seasonal-badge--bottom-left {
    bottom: -16%;
    left: -16%;
}

.tpt-seasonal-badge--top-right {
    top: -16%;
    right: -16%;
}

.tpt-seasonal-badge--top-left {
    top: -16%;
    left: -16%;
}

.tpt-seasonal-badge--festival.tpt-seasonal-badge--bottom-right {
    bottom: -14%;
    right: -14%;
}

.tpt-seasonal-badge--festival.tpt-seasonal-badge--bottom-left {
    bottom: -28%;
    left: -28%;
}

.tpt-seasonal-badge--festival.tpt-seasonal-badge--top-right {
    top: -28%;
    right: -28%;
}

.tpt-seasonal-badge--festival.tpt-seasonal-badge--top-left {
    top: -28%;
    left: -28%;
}

.tpt-seasonal-badge--nativity.tpt-seasonal-badge--bottom-right {
    bottom: -16%;
    right: -16%;
}

.tpt-seasonal-badge--nativity.tpt-seasonal-badge--top-right {
    top: -42%;
    right: -42%;
}

/* Founding anniversary: the hat is worn on top of the logo.
   TPT_ANNIVERSARY_HAT_CURVE_V1_20261107: size the hat against the logo box
   and centre it on the crest of the mark (61.3% across), so the brim follows
   the top of the curve at every breakpoint instead of floating above it. */
.tpt-seasonal-badge.tpt-seasonal-badge--anniversary {
    top: -38%;
    left: 61.3%;
    right: auto;
    bottom: auto;
    width: 63.5%;
    height: 63.5%;
    max-width: none;
    max-height: none;
    transform: translateX(-50%) rotate(3deg);
    transform-origin: 50% 100%;
    animation: tpt-hat-sway 5s ease-in-out infinite;
}

@keyframes tpt-hat-sway {
    0%, 100% { transform: translateX(-50%) rotate(1deg); }
    50%      { transform: translateX(-50%) rotate(4deg); }
}

.tpt-party-number {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-number-pop 3s ease-in-out infinite;
}

@keyframes tpt-number-pop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

.tpt-confetti-wrap {
    position: absolute;
    inset: -18%;
    z-index: 10;
    pointer-events: none;
}

.tpt-confetti {
    position: absolute;
    display: block;
    width: 5px;
    height: 8px;
    border-radius: 1px;
    opacity: 0;
    animation-name: tpt-confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes tpt-confetti-fall {
    0%   { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate3d(8px, 64px, 0) rotate(var(--tpt-confetti-rot, 180deg)); opacity: 0; }
}

/* ---------------------------------------------------------------
   Hover explanation tooltip
   --------------------------------------------------------------- */
.tpt-badge-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483002;
    max-width: 260px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #0d1a2b;
    color: #f6efe0;
    border: 1px solid rgba(240, 180, 41, 0.6);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tpt-badge-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tpt-badge-tip::after {
    content: "";
    position: absolute;
    left: var(--tpt-tip-arrow, 50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
    transform: translateX(-50%);
}

.tpt-badge-tip--above::after {
    bottom: -12px;
    border-top-color: #0d1a2b;
}

.tpt-badge-tip--below::after {
    top: -12px;
    border-bottom-color: #0d1a2b;
}

/* ---------------------------------------------------------------
   Slimline seasonal footer greeting
   --------------------------------------------------------------- */
.tpt-seasonal-footer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 18px;
    text-align: center;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #ffe6a1;
    background: linear-gradient(90deg, #0a2a1c 0%, #14532d 50%, #0a2a1c 100%);
    border-top: 1px solid rgba(255, 230, 161, 0.35);
}

.tpt-seasonal-footer-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tpt-seasonal-footer svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.tpt-seasonal-footer--easter {
    color: #fff1d6;
    background: linear-gradient(90deg, #26113c 0%, #4b2a6b 50%, #26113c 100%);
    border-top-color: rgba(255, 241, 214, 0.35);
}

/* ---------------------------------------------------------------
   Logo aura + sparkles
   --------------------------------------------------------------- */
.tpt-logo-aura {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7;
}

.tpt-logo-aura--gold {
    background: radial-gradient(circle, rgba(255, 224, 130, 0.55) 0%, rgba(255, 224, 130, 0.18) 42%, rgba(255, 224, 130, 0) 68%);
    animation: tpt-aura 3.6s ease-in-out infinite;
}

.tpt-logo-aura--rays {
    background: repeating-conic-gradient(from 0deg, rgba(255, 235, 170, 0.6) 0deg 4deg, rgba(255, 235, 170, 0) 4deg 22deg);
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 52%, #000 74%, transparent 82%);
    mask: radial-gradient(circle, transparent 40%, #000 52%, #000 74%, transparent 82%);
    animation: tpt-rotate 30s linear infinite;
    transform-origin: center;
}

.tpt-logo-aura--fire {
    background: radial-gradient(circle at 50% 72%, rgba(255, 120, 40, 0.5) 0%, rgba(255, 120, 40, 0.12) 45%, rgba(255, 120, 40, 0) 70%);
    animation: tpt-aura 2.4s ease-in-out infinite;
}

.tpt-logo-sparkles {
    position: absolute;
    inset: -14%;
    pointer-events: none;
    z-index: 8;
}

.tpt-sparkle {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #fff6c8;
    box-shadow: 0 0 6px 1px rgba(255, 233, 160, 0.9);
    animation: tpt-sparkle 2.8s ease-in-out infinite;
}

.tpt-logo-sparkles--fire .tpt-sparkle {
    background: #ffb347;
    box-shadow: 0 0 7px 1px rgba(255, 140, 60, 0.95);
}

/* ---------------------------------------------------------------
   SVG element animations
   --------------------------------------------------------------- */
.tpt-flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tpt-flicker 1.5s ease-in-out infinite;
}

.tpt-twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-twinkle 2.6s ease-in-out infinite;
}

.tpt-sparkle-path {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-twinkle 2.2s ease-in-out infinite;
}

.tpt-palm {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tpt-sway-soft 4.5s ease-in-out infinite;
}

.tpt-cross--good {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-solemn 5.5s ease-in-out infinite;
}

.tpt-chalice,
.tpt-float {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-float 4s ease-in-out infinite;
}

.tpt-easter-rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-rotate 26s linear infinite;
}

.tpt-dove {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-float 4.5s ease-in-out infinite;
}

.tpt-eastertide {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tpt-sway-soft 5s ease-in-out infinite;
}

.tpt-nativity-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-aura 4s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------- */
@keyframes tpt-sway-l {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(4deg); }
}

@keyframes tpt-sway-r {
    0%, 100% { transform: rotate(6deg); }
    50%      { transform: rotate(-4deg); }
}

@keyframes tpt-sway-soft {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

@keyframes tpt-flicker {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.95; }
    50%      { transform: scaleY(1.12) translateY(-0.5px); opacity: 1; }
}

@keyframes tpt-twinkle {
    0%, 100% { opacity: 0.65; transform: scale(0.94); }
    50%      { opacity: 1; transform: scale(1.08); }
}

@keyframes tpt-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50%      { opacity: 1; transform: scale(1); }
}

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

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

@keyframes tpt-aura {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50%      { opacity: 1; transform: scale(1.05); }
}

@keyframes tpt-solemn {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@keyframes tpt-glow {
    0%, 100% { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 0 rgba(255, 220, 120, 0)); }
    50%      { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 6px rgba(255, 220, 120, 0.9)); }
}

/* ---------------------------------------------------------------
   Winter theme
   --------------------------------------------------------------- */
body.tpt-winter-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background:
        radial-gradient(1200px 480px at 50% -8%, rgba(190, 220, 255, 0.22), transparent 62%),
        radial-gradient(900px 500px at 50% 0%, rgba(160, 200, 255, 0.12), transparent 70%);
    mix-blend-mode: screen;
}

.tpt-winter-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.tpt-snowflake {
    position: absolute;
    top: -8vh;
    display: block;
    width: var(--tpt-snow-size, 5px);
    height: var(--tpt-snow-size, 5px);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
    animation-name: tpt-snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes tpt-snowfall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    100% { transform: translate3d(var(--tpt-snow-drift, 0px), 112vh, 0) rotate(360deg); }
}

/* ---------------------------------------------------------------
   Full-page Christmas & Easter greetings
   --------------------------------------------------------------- */
body.tpt-overlay-open {
    overflow: hidden;
}

.tpt-seasonal-overlay,
.tpt-seasonal-overlay *,
.tpt-seasonal-overlay *::before,
.tpt-seasonal-overlay *::after {
    box-sizing: border-box;
}

.tpt-seasonal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    color: #ffffff;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.tpt-seasonal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.55s ease;
}

.tpt-seasonal-overlay--nativity {
    background:
        radial-gradient(900px 620px at 50% 84%, rgba(255, 200, 120, 0.22), transparent 64%),
        radial-gradient(1200px 740px at 50% 114%, rgba(255, 170, 80, 0.2), transparent 72%),
        linear-gradient(180deg, #050b17 0%, #0a1730 46%, #122a4a 100%);
}

.tpt-seasonal-overlay--resurrection {
    background:
        radial-gradient(1100px 720px at 50% 86%, rgba(255, 190, 120, 0.45), transparent 64%),
        radial-gradient(820px 540px at 50% 114%, rgba(255, 150, 90, 0.35), transparent 74%),
        linear-gradient(180deg, #120b2e 0%, #35204a 40%, #8a4b55 72%, #e0a26a 100%);
}

.tpt-overlay-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tpt-overlay-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.tpt-overlay-star-dot {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    animation: tpt-star-twinkle 3s ease-in-out infinite;
}

@keyframes tpt-star-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.25); }
}

.tpt-shooting-star {
    position: absolute;
    top: var(--sy, 10%);
    left: var(--sx, 20%);
    width: 130px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 65%, #ffe6a1);
    box-shadow: 0 0 8px rgba(255, 240, 190, 0.8);
    opacity: 0;
    transform: rotate(34deg);
    animation: tpt-shoot 16s linear infinite;
}

.tpt-shoot-1 { animation-delay: var(--sd, 4s); }
.tpt-shoot-2 { animation-delay: var(--sd, 9s); }
.tpt-shoot-3 { animation-delay: var(--sd, 14s); }

@keyframes tpt-shoot {
    0%, 92% { opacity: 0; transform: translate(0, 0) rotate(34deg); }
    93%     { opacity: 1; }
    97%     { opacity: 1; }
    100%    { opacity: 0; transform: translate(-360px, 250px) rotate(34deg); }
}

.tpt-overlay-bloom {
    position: absolute;
    left: 50%;
    top: 6%;
    width: 80vw;
    height: 56vh;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 214, 140, 0.2) 0%, rgba(255, 200, 110, 0.06) 42%, rgba(255, 200, 110, 0) 70%);
    animation: tpt-bloom-pulse 7s ease-in-out infinite;
}

@keyframes tpt-bloom-pulse {
    0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(0.96); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.04); }
}

.tpt-overlay-burst {
    position: absolute;
    z-index: 1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 245, 200, 0.75) 0%, rgba(255, 220, 130, 0.35) 35%, rgba(255, 220, 130, 0) 70%);
}

.tpt-seasonal-overlay--nativity .tpt-overlay-burst {
    top: 3%;
    left: 50%;
    transform: translateX(-50%) scale(0.2);
}

.tpt-seasonal-overlay--resurrection .tpt-overlay-burst {
    top: 58%;
    left: 64%;
    transform: translateX(-50%) scale(0.2);
}

.tpt-seasonal-overlay.is-open .tpt-overlay-burst {
    animation: tpt-burst 2.2s ease-out 0.2s both;
}

@keyframes tpt-burst {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.15); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scale(2.6); }
}

.tpt-overlay-brand {
    position: absolute;
    top: clamp(10px, 2.2vh, 26px);
    left: clamp(10px, 2vw, 28px);
    z-index: 12;
    width: clamp(50px, 5.6vw, 86px);
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
}

.tpt-overlay-brand::before {
    content: "";
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 130, 0.22), rgba(255, 220, 130, 0) 70%);
    z-index: -1;
}

.tpt-overlay-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.tpt-overlay-mote {
    position: absolute;
    z-index: 1;
    display: block;
    width: var(--mote-size, 4px);
    height: var(--mote-size, 4px);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #fff6c8 0%, #ffd166 55%, rgba(255, 209, 102, 0) 100%);
    box-shadow: 0 0 8px rgba(255, 225, 150, 0.8);
    opacity: 0;
    animation-name: tpt-mote;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--mote-delay, 0s);
}

@keyframes tpt-mote {
    0%   { transform: translate3d(0, 26px, 0) scale(0.6); opacity: 0; }
    12%  { opacity: 0.85; }
    55%  { opacity: 0.7; }
    100% { transform: translate3d(var(--mote-drift, 0px), -180px, 0) scale(1); opacity: 0; }
}

.tpt-overlay-bigstar {
    position: absolute;
    top: clamp(8px, 1.8vh, 24px);
    left: 50%;
    width: clamp(64px, 8vw, 110px);
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 26px rgba(255, 220, 120, 0.55));
    transform-origin: 50% 0;
}

.tpt-overlay-bigstar svg {
    width: 100%;
    height: auto;
    display: block;
}

.tpt-overlay-star-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-star-pulse 3.4s ease-in-out infinite;
}

.tpt-overlay-star-rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-rotate 44s linear infinite;
}

@keyframes tpt-star-pulse {
    0%, 100% { transform: scale(0.94); }
    50%      { transform: scale(1.06); }
}

.tpt-overlay-angels {
    position: absolute;
    top: clamp(38px, 7vh, 92px);
    left: 50%;
    width: min(1200px, 96vw);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
}

.tpt-overlay-angels svg {
    width: 100%;
    height: auto;
    display: block;
}

.tpt-angel {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-angel-float 6s ease-in-out infinite;
}

@keyframes tpt-angel-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.tpt-overlay-main {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(96px, 12vh, 142px) 22px 0;
    text-align: center;
}

.tpt-seasonal-overlay--resurrection .tpt-overlay-main {
    padding-top: clamp(26px, 4.5vh, 54px);
}

.tpt-overlay-kicker {
    margin: 0 0 8px;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(10px, 1.1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ffd98a;
    opacity: 0.95;
}

.tpt-overlay-title {
    margin: 0 0 6px;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 7.4vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: #ffe6a1;
    background: linear-gradient(100deg, #ffe6a1 0%, #fff8d8 32%, #f0b429 55%, #ffe6a1 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.45));
    animation: tpt-title-shimmer 7s linear infinite;
}

.tpt-seasonal-overlay--resurrection .tpt-overlay-title {
    background: linear-gradient(100deg, #fff3d6 0%, #ffffff 32%, #ffd98a 55%, #fff3d6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes tpt-title-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.tpt-overlay-sub {
    margin: 0 0 14px;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(13px, 1.55vw, 18px);
    font-weight: 500;
    color: #f6efe0;
    opacity: 0.94;
}

.tpt-overlay-verse {
    max-width: 780px;
    margin: 0 auto 14px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 230, 161, 0.32);
    border-bottom: 1px solid rgba(255, 230, 161, 0.32);
    border-radius: 10px;
    background: rgba(5, 11, 23, 0.32);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.tpt-overlay-verse.is-changing {
    opacity: 0;
    transform: translateY(5px);
}

.tpt-overlay-verse-text {
    margin: 0 0 7px;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(13px, 1.5vw, 19px);
    line-height: 1.42;
    color: #fff8e6;
}

.tpt-overlay-verse-ref {
    display: block;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd98a;
}

.tpt-overlay-enter {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 1.15vw, 14px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe08a, #f0b429 60%, #d99a1a);
    color: #2b2100;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tpt-overlay-enter:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tpt-overlay-enter:focus-visible,
.tpt-overlay-skip:focus-visible {
    outline: 2px solid #ffe6a1;
    outline-offset: 3px;
}

.tpt-overlay-attribution {
    max-width: 700px;
    margin: 12px auto 0;
    font-family: "Raleway", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
}

.tpt-overlay-skip {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 12;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(8, 16, 30, 0.45);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tpt-overlay-scene {
    position: relative;
    z-index: 3;
    transform-origin: 50% 100%;
    flex: 0 0 auto;
    width: 100%;
    height: clamp(230px, 40vh, 520px);
    margin-top: auto;
    pointer-events: none;
}

.tpt-seasonal-overlay--resurrection .tpt-overlay-scene {
    height: clamp(260px, 44vh, 560px);
}

.tpt-overlay-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scene animations */
.tpt-nat-mary,
.tpt-nat-joseph {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tpt-figure-sway 7s ease-in-out infinite;
}

.tpt-nat-joseph {
    animation-delay: -2.4s;
}

@keyframes tpt-figure-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50%      { transform: rotate(1.1deg); }
}

.tpt-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-halo-pulse 4.5s ease-in-out infinite;
}

@keyframes tpt-halo-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50%      { opacity: 0.95; transform: scale(1.06); }
}

.tpt-tomb-light {
    animation: tpt-tomb-pulse 4s ease-in-out infinite;
}

@keyframes tpt-tomb-pulse {
    0%, 100% { opacity: 0.82; }
    50%      { opacity: 1; }
}

.tpt-res-cross {
    animation: tpt-solemn 7s ease-in-out infinite;
}

.tpt-nat-baby > circle:first-child {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-aura 4s ease-in-out infinite;
}

.tpt-res-rays {
    transform-box: view-box;
    transform-origin: 600px 440px;
    animation: tpt-rotate 80s linear infinite;
}

.tpt-res-stone {
    transform-box: fill-box;
    transform-origin: center;
}

.tpt-res-stone--play {
    animation: tpt-stone-roll 2.8s cubic-bezier(0.25, 0.8, 0.3, 1) 0.5s forwards;
}

@keyframes tpt-stone-roll {
    0%   { transform: translate(0, 0) rotate(0deg); }
    70%  { transform: translate(96px, 18px) rotate(48deg); }
    100% { transform: translate(116px, 26px) rotate(58deg); }
}

.tpt-res-angel {
    transform-box: fill-box;
    transform-origin: center;
    animation: tpt-angel-float 7s ease-in-out infinite;
}

.tpt-res-tomb {
    animation: tpt-solemn 6s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   Grand entrance sequence (restarts each time the overlay opens)
   --------------------------------------------------------------- */
.tpt-seasonal-overlay.is-open .tpt-overlay-bigstar {
    animation: tpt-star-arrive 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-angels {
    animation: tpt-angels-arrive 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-scene {
    animation: tpt-scene-rise 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both, tpt-scene-breathe 18s ease-in-out 2.6s infinite;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-kicker {
    animation: tpt-fade-up 0.8s ease 0.55s backwards;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-title {
    animation: tpt-title-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s backwards, tpt-title-shimmer 7s linear infinite;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-sub {
    animation: tpt-fade-up 0.8s ease 1.25s backwards;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-verse {
    animation: tpt-fade-up 0.8s ease 1.45s backwards;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-enter {
    animation: tpt-pop-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.75s backwards;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-attribution {
    animation: tpt-fade-up 0.8s ease 2s backwards;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-bloom {
    animation: tpt-bloom-in 1.8s ease both, tpt-bloom-pulse 7s ease-in-out 1.8s infinite;
}

.tpt-seasonal-overlay.is-open .tpt-overlay-brand {
    animation: tpt-brand-in 0.9s ease 0.1s backwards, tpt-brand-float 6.5s ease-in-out 1s infinite;
}

@keyframes tpt-brand-in {
    0%   { opacity: 0; transform: scale(0.82) translateY(-8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes tpt-brand-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes tpt-star-arrive {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.15) rotate(-50deg); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.18) rotate(10deg); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
}

@keyframes tpt-angels-arrive {
    0%   { opacity: 0; transform: translateX(-50%) translateY(34px) scale(0.9); }
    100% { opacity: 0.55; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes tpt-scene-rise {
    0%   { opacity: 0; transform: translateY(46px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tpt-scene-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

.tpt-seasonal-overlay--resurrection.is-open .tpt-overlay-burst {
    animation-delay: 1.1s;
}

@keyframes tpt-fade-up {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes tpt-title-in {
    0%   { opacity: 0; transform: translateY(22px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tpt-pop-in {
    0%   { opacity: 0; transform: scale(0.82); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tpt-bloom-in {
    0%   { opacity: 0; }
    100% { opacity: 0.75; }
}

/* ---------------------------------------------------------------
   Animation switches
   --------------------------------------------------------------- */
.tpt-no-anim .tpt-seasonal-badge,
.tpt-no-anim .tpt-seasonal-badge *,
.tpt-no-anim .tpt-logo-aura,
.tpt-no-anim .tpt-logo-sparkles,
.tpt-no-anim .tpt-sparkle,
.tpt-no-anim-all .tpt-seasonal-badge,
.tpt-no-anim-all .tpt-seasonal-badge *,
.tpt-no-anim-all .tpt-logo-aura,
.tpt-no-anim-all .tpt-logo-sparkles,
.tpt-no-anim-all .tpt-sparkle,
.tpt-no-anim-all .tpt-winter-layer,
.tpt-no-anim-all .tpt-confetti,
.tpt-no-anim .tpt-confetti,
.tpt-no-anim-all .tpt-seasonal-overlay,
.tpt-no-anim-all .tpt-seasonal-overlay * {
    animation: none !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .tpt-overlay-title {
        font-size: clamp(40px, 8.4vw, 74px);
    }
    .tpt-overlay-main {
        padding-top: clamp(86px, 11vh, 124px);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .tpt-seasonal-badge {
        max-width: 32px;
        max-height: 32px;
    }
    .tpt-seasonal-badge--festival {
        max-width: 40px;
        max-height: 40px;
    }
    .tpt-seasonal-badge--nativity {
        max-width: 46px;
        max-height: 46px;
    }
    .tpt-seasonal-badge--bottom-right { bottom: -12%; right: -12%; }
    .tpt-seasonal-badge--bottom-left { bottom: -24%; left: -24%; }
    .tpt-seasonal-badge--top-right { top: -24%; right: -24%; }
    .tpt-seasonal-badge--top-left { top: -24%; left: -24%; }
    .tpt-seasonal-badge--festival.tpt-seasonal-badge--bottom-right { bottom: -18%; right: -18%; }
    .tpt-seasonal-badge--festival.tpt-seasonal-badge--bottom-left { bottom: -38%; left: -38%; }
    .tpt-seasonal-badge--festival.tpt-seasonal-badge--top-right { top: -38%; right: -38%; }
    .tpt-seasonal-badge--festival.tpt-seasonal-badge--top-left { top: -38%; left: -38%; }
    .tpt-seasonal-badge--nativity.tpt-seasonal-badge--bottom-right { bottom: -24%; right: -24%; }
    .tpt-seasonal-badge--nativity.tpt-seasonal-badge--top-right { top: -48%; right: -48%; }
    /* TPT_ANNIVERSARY_HAT_CURVE_V1_20261107: the anniversary hat scales
       with the logo, so it needs no separate mobile placement. */

    .tpt-seasonal-footer {
        font-size: 11px;
        letter-spacing: 0.1em;
        padding: 10px 14px;
    }
    .tpt-seasonal-footer svg {
        width: 15px;
        height: 15px;
    }

    .tpt-overlay-main {
        padding: clamp(88px, 11vh, 118px) 16px 0;
    }
    .tpt-seasonal-overlay--resurrection .tpt-overlay-main {
        padding-top: clamp(20px, 3.5vh, 40px);
    }
    .tpt-overlay-angels {
        top: 7vh;
        opacity: 0.42;
    }
    .tpt-overlay-bigstar {
        top: 8px;
        width: 64px;
    }
    .tpt-overlay-brand {
        top: 10px;
        left: 12px;
        width: 46px;
    }
    .tpt-overlay-title {
        font-size: clamp(34px, 10vw, 54px);
    }
    .tpt-overlay-sub {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .tpt-overlay-verse {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    .tpt-overlay-verse-text {
        font-size: 13px;
        line-height: 1.38;
    }
    .tpt-overlay-enter {
        font-size: 12px;
        padding: 11px 22px;
    }
    .tpt-overlay-attribution {
        font-size: 8.5px;
        margin-top: 9px;
    }
    .tpt-overlay-scene {
        height: clamp(210px, 36vh, 340px);
    }
    .tpt-seasonal-overlay--resurrection .tpt-overlay-scene {
        height: clamp(220px, 38vh, 360px);
    }
    .tpt-seasonal-overlay--resurrection .tpt-overlay-scene svg {
        transform: translateX(-7%);
    }
}

/* Short screens */
@media (max-height: 700px) {
    .tpt-overlay-main {
        padding-top: clamp(70px, 10vh, 100px);
    }
    .tpt-seasonal-overlay--resurrection .tpt-overlay-main {
        padding-top: 18px;
    }
    .tpt-overlay-title {
        font-size: clamp(32px, 8vw, 62px);
    }
    .tpt-overlay-verse {
        padding: 7px 12px;
        margin-bottom: 9px;
    }
    .tpt-overlay-verse-text {
        font-size: 13px;
        line-height: 1.35;
    }
    .tpt-overlay-scene {
        height: clamp(180px, 32vh, 300px);
    }
    .tpt-seasonal-overlay--resurrection .tpt-overlay-scene {
        height: clamp(190px, 34vh, 320px);
    }
}

/* Landscape phones and very short windows */
@media (max-height: 480px) {
    .tpt-overlay-main {
        padding-top: 8px;
    }
    .tpt-overlay-kicker {
        display: none;
    }
    .tpt-overlay-title {
        font-size: clamp(24px, 4.2vw, 38px);
        margin-bottom: 3px;
    }
    .tpt-overlay-sub {
        font-size: 11px;
        margin-bottom: 6px;
    }
    .tpt-overlay-verse {
        padding: 5px 8px;
        margin-bottom: 6px;
    }
    .tpt-overlay-verse-text {
        font-size: 11px;
        line-height: 1.3;
        margin-bottom: 3px;
    }
    .tpt-overlay-verse-ref {
        font-size: 9px;
    }
    .tpt-overlay-enter {
        font-size: 10px;
        padding: 8px 18px;
    }
    .tpt-overlay-attribution {
        display: none;
    }
    .tpt-overlay-bigstar {
        width: 48px;
    }
    .tpt-overlay-angels {
        display: none;
    }
    .tpt-overlay-scene,
    .tpt-seasonal-overlay--resurrection .tpt-overlay-scene {
        height: 40vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tpt-seasonal-badge,
    .tpt-seasonal-badge *,
    .tpt-logo-aura,
    .tpt-logo-sparkles,
    .tpt-sparkle,
    .tpt-winter-layer,
    .tpt-winter-theme::before,
    .tpt-overlay-star-dot,
    .tpt-shooting-star,
    .tpt-overlay-bloom,
    .tpt-overlay-brand,
    .tpt-overlay-mote,
    .tpt-halo,
    .tpt-tomb-light,
    .tpt-res-cross,
    .tpt-nat-mary,
    .tpt-nat-joseph,
    .tpt-party-number,
    .tpt-confetti,
    .tpt-seasonal-badge--anniversary,
    .tpt-overlay-burst,
    .tpt-overlay-bigstar,
    .tpt-overlay-star-glow,
    .tpt-overlay-star-rays,
    .tpt-overlay-angels,
    .tpt-angel,
    .tpt-res-angel,
    .tpt-res-rays,
    .tpt-res-tomb,
    .tpt-nat-baby > circle:first-child,
    .tpt-overlay-kicker,
    .tpt-overlay-title,
    .tpt-overlay-sub,
    .tpt-overlay-verse,
    .tpt-overlay-enter,
    .tpt-overlay-attribution,
    .tpt-overlay-scene {
        animation: none !important;
    }
    .tpt-winter-layer {
        display: none;
    }
    .tpt-res-stone--play {
        animation: none !important;
        transform: translate(116px, 26px) rotate(58deg) !important;
    }
}
