/* =====================================================================
   Seasonal effects: shared by vahecooper.com, consultantoralsurgeon.com
   and asktpd.com. Works with the data-season attribute each site sets.
   Nothing here needs editing; each site lists what to decorate in its
   window.SEASONAL_FX settings.
   ===================================================================== */

/* ---------- AUTUMN: warm accents and a campfire flicker on buttons ---------- */
@keyframes fx-flicker {
  0%   { box-shadow: 0 0 0 2px rgba(232, 140, 48, 0.35), 0 8px 26px rgba(214, 98, 32, 0.30); }
  22%  { box-shadow: 0 0 0 2px rgba(245, 170, 60, 0.45), 0 10px 32px rgba(232, 120, 40, 0.42); }
  41%  { box-shadow: 0 0 0 2px rgba(214, 98, 32, 0.32), 0 7px 22px rgba(190, 80, 30, 0.28); }
  63%  { box-shadow: 0 0 0 2px rgba(250, 186, 80, 0.50), 0 12px 36px rgba(236, 130, 46, 0.45); }
  81%  { box-shadow: 0 0 0 2px rgba(222, 110, 36, 0.36), 0 8px 26px rgba(200, 88, 30, 0.32); }
  100% { box-shadow: 0 0 0 2px rgba(232, 140, 48, 0.35), 0 8px 26px rgba(214, 98, 32, 0.30); }
}
@media (hover: hover) {
  [data-season="autumn"] .fx-cta:hover { animation: fx-flicker 1.7s ease-in-out infinite; border-color: #d9822b; }
}
[data-season="autumn"] .fx-cta:focus-visible { outline-color: #d9822b; }

/* ---------- WINTER & HOLIDAYS: frosted glass ---------- */
:where([data-season="winter"], [data-season="christmas"]) .fx-frost {
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
          backdrop-filter: blur(14px) saturate(1.35);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px rgba(60, 90, 130, 0.12);
}

/* ---------- icicles hanging from the main headings ---------- */
.fx-icicles { position: absolute; pointer-events: none; z-index: 1; overflow: visible; }
.fx-icicles .fx-glint { animation: fx-glint 9s ease-in-out infinite; }
@keyframes fx-glint {
  0%   { transform: translateX(-30%); }
  18%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* ---------- fairy lights (Christmas) ---------- */
.fx-lights { position: absolute; left: 0; right: 0; height: 30px; pointer-events: none; z-index: 60; overflow: visible; }
.fx-lights.hang { top: 100%; margin-top: -6px; }
.fx-lights.top { top: -16px; }
.fx-lights svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-bulb { animation: fx-twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fx-bulb ellipse { filter: drop-shadow(0 0 4px currentColor); }
@keyframes fx-twinkle {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.35; }
  55%      { opacity: 0.4; }
}

/* ---------- SPRING: a big fat bumblebee on a looping flight path ---------- */
.fx-bee {
  position: fixed; left: 0; top: 0; width: 56px; height: 46px; z-index: 45; pointer-events: none;
  offset-rotate: auto; offset-anchor: center;
  animation: fx-fly 52s linear infinite;
}
@keyframes fx-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.fx-bee .bob { animation: fx-bob 0.9s ease-in-out infinite alternate; }
@keyframes fx-bob { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
.fx-bee .wing { transform-box: fill-box; transform-origin: center bottom; animation: fx-buzz 0.07s linear infinite alternate; }
@keyframes fx-buzz { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* ---------- SPRING: fledglings flitting across in a bounding flight ---------- */
.fx-bird {
  position: fixed; left: 0; z-index: 44; pointer-events: none;
  width: calc(44px * var(--fx-bird-size, 1)); height: calc(36px * var(--fx-bird-size, 1));
  transform: translateX(-80px); animation: fx-bird-cross 20s linear infinite;
}
@keyframes fx-bird-cross { 0% { transform: translateX(-80px); } 55%, 100% { transform: translateX(calc(100vw + 80px)); } }
.fx-bird .hop { width: 100%; height: 100%; animation: fx-hop 0.8s ease-in-out infinite; }
@keyframes fx-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.fx-bird .wing { transform-box: fill-box; transform-origin: center bottom; animation: fx-flutter 0.16s ease-in-out infinite alternate; }
@keyframes fx-flutter { from { transform: scaleY(1); } to { transform: scaleY(-0.6); } }

/* ---------- growing vine dividers ---------- */
.fx-vine { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: min(440px, 86%); height: 40px; pointer-events: none; z-index: 3; }
.fx-vine svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-vine .stem { fill: none; stroke: #6a9a5b; stroke-width: 2.2; stroke-linecap: round; transition: stroke-dashoffset 1.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.fx-vine .bud { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.fx-vine.grow .stem { stroke-dashoffset: 0 !important; }
.fx-vine.grow .bud { transform: scale(1); }

/* ---------- SUMMER: sky follows the time of day ---------- */
html.fx-on[data-season="summer"] body::before {
  background: linear-gradient(180deg, var(--fx-sky1, #a9d3f2) 0%, var(--fx-sky2, #d3e9f8) 55%, var(--fx-sky3, #f5ead3) 100%) !important;
}
html.fx-on[data-season="summer"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 120% 60% at 50% 105%, var(--fx-warm, rgba(255, 196, 120, 0.35)), transparent 70%);
  animation: fx-breathe 38s ease-in-out infinite alternate;
}
@keyframes fx-breathe { from { opacity: 0.35; } to { opacity: 1; } }

/* ---------- ocean waves along footers and section edges ---------- */
.fx-waves { position: absolute; left: 0; right: 0; height: 34px; top: -34px; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-waves i { position: absolute; inset: 0; background-repeat: repeat-x; background-size: 600px 100%; background-position: 0 100%; }
.fx-waves i.back  { animation: fx-wave 19s linear infinite; }
.fx-waves i.front { animation: fx-wave 12s linear infinite reverse; }
@keyframes fx-wave { from { background-position-x: 0; } to { background-position-x: 600px; } }

/* ---------- sun shimmer sweeping across buttons ---------- */
[data-season="summer"] .fx-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 250, 225, 0.7) 50%, transparent 68%);
  transform: translateX(-120%); animation: fx-shimmer 7.5s ease-in-out infinite;
  animation-delay: var(--fx-delay, 0s);
}
@keyframes fx-shimmer {
  0%, 62% { transform: translateX(-120%); }
  80%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* ---------- respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-bee, .fx-bird, .fx-witch { display: none; }
  .fx-icicles .fx-glint, .fx-bulb, .fx-waves i, .fx-cta, .fx-cta::after,
  .fx-sun .rays, .fx-star, .fx-corner *, .fx-corner .grow,
  html.fx-on[data-season="summer"] body::after { animation: none !important; }
  .fx-vine .stem, .fx-vine .bud { transition: none !important; }
}

/* =====================================================================
   SKY OBJECTS: summer sun, Halloween moon and witch, Coptic star,
   Mount Ararat for Armenian Christmas
   ===================================================================== */
.fx-sun, .fx-moon, .fx-star {
  position: fixed; z-index: 0; pointer-events: none;
  top: calc(var(--fx-sky-top, 0px) - clamp(18px, 3vw, 46px)); right: calc(-1 * clamp(18px, 3vw, 46px));
  width: clamp(150px, 19vw, 270px); aspect-ratio: 1;
}
.fx-sun svg, .fx-moon svg, .fx-star svg { width: 100%; height: 100%; overflow: visible; }
.fx-sun { filter: drop-shadow(0 0 40px rgba(255, 214, 110, 0.75)); }
.fx-sun .rays { transform-origin: 100px 100px; animation: fx-spin 90s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-moon { filter: drop-shadow(0 0 40px rgba(255, 246, 214, 0.9)); }
.fx-star { animation: fx-star 4s ease-in-out infinite alternate; }
@keyframes fx-star { from { transform: scale(0.94); opacity: 0.85; } to { transform: scale(1.04); opacity: 1; } }
@media (max-width: 700px) {
  .fx-sun, .fx-moon, .fx-star { width: 120px; top: calc(var(--fx-sky-top, 0px) - 22px); right: -22px; }
}

.fx-witch {
  position: fixed; left: 0; top: calc(var(--fx-sky-top, 0px) + clamp(30px, 7vw, 90px)); z-index: 1; pointer-events: none;
  width: clamp(80px, 9vw, 120px); height: auto; aspect-ratio: 12 / 7;
  animation: fx-witch 26s linear infinite; animation-delay: 4s; transform: translateX(calc(100vw + 140px));
}
@keyframes fx-witch {
  0%   { transform: translateX(calc(100vw + 140px)) translateY(0) rotate(-4deg); }
  25%  { transform: translateX(65vw) translateY(-18px) rotate(2deg); }
  50%  { transform: translateX(30vw) translateY(10px) rotate(-3deg); }
  70%  { transform: translateX(-160px) translateY(-6px) rotate(2deg); }
  100% { transform: translateX(-160px) translateY(-6px) rotate(2deg); }
}

.fx-ararat { position: fixed; left: 0; right: 0; bottom: 0; height: min(18vh, 160px); z-index: 0; pointer-events: none; opacity: 0.4; }
.fx-ararat svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   CORNER SCENERY: tulips, sunflowers, pumpkins, jack-o'-lanterns,
   bonfires, pomegranates and candles, mirrored left and right
   ===================================================================== */
.fx-corner { position: fixed; bottom: 0; z-index: 1; pointer-events: none; width: clamp(110px, 15vw, 220px); }
.fx-corner.in-host { position: absolute; width: clamp(90px, 11vw, 160px); }
.fx-corner.l { left: clamp(4px, 3vw, 40px); }
.fx-corner.r { right: clamp(4px, 3vw, 40px); transform: scaleX(-1); }
.fx-corner svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 700px) { .fx-corner { width: 64px; } .fx-corner.in-host { width: 56px; } }
@media (max-width: 400px) { .fx-corner { width: 48px; opacity: 0.9; } }

/* flowers grow up out of the ground, then sway */
.fx-corner .grow { transform-box: view-box; transform-origin: 50% 100%; animation: fx-grow 2.6s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes fx-grow { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleY(1); } }
.fx-corner .sway { animation: fx-sway 5s ease-in-out infinite alternate; }
@keyframes fx-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.fx-corner .nod { animation: fx-nod 6s ease-in-out infinite alternate; }
@keyframes fx-nod { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* glowing pumpkins and flickering flames */
.fx-corner .glow { animation: fx-glow 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #ffb347); }
@keyframes fx-glow { from { opacity: 0.75; } to { opacity: 1; } }
.fx-corner .flame { transform-box: view-box; animation: fx-flame 0.9s ease-in-out infinite alternate; }
@keyframes fx-flame { 0% { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(0.96, 1.05) skewX(2deg); } 100% { transform: scale(1.03, 0.97) skewX(-2deg); } }
.fx-bonfire { filter: drop-shadow(0 0 18px rgba(255, 150, 60, 0.55)); }

/* =====================================================================
   SPECIAL-DAY GREETING
   ===================================================================== */
.fx-greeting {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 55; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px;
  font-family: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.35; text-align: center;
  color: #fff; background: rgba(30, 20, 40, 0.82); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: fx-greet-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both 600ms;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fx-greeting.bye { opacity: 0; transform: translate(-50%, -10px); }
.fx-greeting button {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.18); color: inherit; font: inherit; font-size: 16px; line-height: 1;
}
.fx-greeting button:hover { background: rgba(255, 255, 255, 0.32); }
@keyframes fx-greet-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fx-greet-armenian { background: linear-gradient(90deg, #d90012, #0033a0 55%, #e59a00); }
.fx-greet-coptic   { background: linear-gradient(90deg, #14213d, #1f3c88); box-shadow: 0 0 0 2px #e3c26a, 0 10px 30px rgba(0, 0, 0, 0.18); }
.fx-greet-halloween { background: linear-gradient(90deg, #3c2a4d, #6b3fa0); }
.fx-greet-bonfire  { background: linear-gradient(90deg, #7c2d12, #c2410c); }
@media (max-width: 560px) { .fx-greeting { font-size: 0.7rem; padding: 6px 6px 6px 12px; } }