/* TWells Creative Arts — gallery animations + winter/Christmas dressing.
   Shared by the public site and the admin preview; everything is class-scoped. */

/* ── Squares appearing as they scroll into view ───────────────── */
.fx { --fxd: 700ms; }
.fx.speed-gentle { --fxd: 1100ms; }
.fx.speed-lively { --fxd: 420ms; }
.js .fx:not(.fx-none) .tile {
  opacity: 0;
  transition: opacity var(--fxd) ease, transform var(--fxd) cubic-bezier(.2, .75, .25, 1), filter var(--fxd) ease, box-shadow .25s ease;
  transition-delay: var(--d, 0ms);
}
.js .fx-rise .tile  { transform: translateY(28px); }
.js .fx-zoom .tile  { transform: scale(.86); }
.js .fx-flip .tile  { transform: perspective(900px) rotateY(-75deg); transform-origin: left center; }
.js .fx-blur .tile  { filter: blur(14px); transform: scale(1.04); }
.js .fx-drop .tile  { transform: translateY(-40px) rotate(-3deg); }
.js .fx .tile.in { opacity: 1; transform: none; filter: none; }

/* ── Hover effects ─────────────────────────────────────────────── */
.hover-zoom a.tile img { transition: transform .6s cubic-bezier(.2, .75, .25, 1); }
.hover-zoom a.tile:hover img, .hover-zoom a.tile:focus-visible img { transform: scale(1.07); }
.hover-lift a.tile { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift a.tile:hover, .hover-lift a.tile:focus-visible { transform: translateY(-5px) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
.hover-glow a.tile { transition: box-shadow .3s ease; }
.hover-glow a.tile:hover, .hover-glow a.tile:focus-visible { box-shadow: 0 0 0 3px var(--fx-accent, #3b7ddd), 0 0 22px 2px color-mix(in srgb, var(--fx-accent, #3b7ddd) 45%, transparent); }

/* ── Accent colours ───────────────────────────────────────────── */
.accent-red   { --fx-accent: #b3202a; --link: #b3202a; }
.accent-green { --fx-accent: #1e7045; --link: #1e7045; }
.accent-ice   { --fx-accent: #3a8fc2; --link: #2f7fb3; }
.accent-gold  { --fx-accent: #b07d12; --link: #9a6c0c; }

/* ── Banner ───────────────────────────────────────────────────── */
.season-banner {
  position: relative; z-index: 5; padding: 9px 44px; text-align: center; color: #fff;
  font: 500 14px/1.4 "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; letter-spacing: .04em;
}
.season-banner::before, .season-banner::after { content: "❄"; position: absolute; top: 50%; transform: translateY(-50%); opacity: .8; font-size: 15px; }
.season-banner::before { left: 16px; } .season-banner::after { right: 16px; }
.season-banner.style-red   { background: linear-gradient(90deg, #8c1016, #b3202a 50%, #8c1016); }
.season-banner.style-green { background: linear-gradient(90deg, #14482d, #1e7045 50%, #14482d); }
.season-banner.style-night { background: linear-gradient(90deg, #0d1b33, #1b2f55 50%, #0d1b33); color: #f3d98b; }
.season-banner.style-gold  { background: linear-gradient(90deg, #f4e7c3, #fbf3dc 50%, #f4e7c3); color: #6b4c07; }

/* ── Fairy lights along the top ───────────────────────────────── */
.xmas-lights {
  position: relative; z-index: 4; height: 40px; overflow: hidden; display: flex; justify-content: center; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26'%3E%3Cpath d='M0 3 Q24 24 48 3' fill='none' stroke='%23445' stroke-width='1.6'/%3E%3C/svg%3E") center top / 48px 26px repeat-x;
  margin-bottom: -14px;
}
.xmas-lights i { flex: none; width: 48px; position: relative; }
.xmas-lights i::before { /* socket */
  content: ""; position: absolute; left: 50%; top: 12px; width: 6px; height: 6px; margin-left: -3px; background: #3b4250; border-radius: 1px;
}
.xmas-lights i::after { /* bulb */
  content: ""; position: absolute; left: 50%; top: 17px; width: 9px; height: 14px; margin-left: -4.5px; border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  background: var(--c); box-shadow: 0 0 10px 2px var(--c); animation: fx-twinkle 1.8s ease-in-out infinite alternate; animation-delay: var(--t, 0s);
}
.xmas-lights i:nth-child(4n+1) { --c: #ff3b3b; --t: -.2s; }
.xmas-lights i:nth-child(4n+2) { --c: #ffd23b; --t: -.9s; }
.xmas-lights i:nth-child(4n+3) { --c: #37d67a; --t: -1.4s; }
.xmas-lights i:nth-child(4n+4) { --c: #4aa8ff; --t: -.5s; }
.xmas-lights i:nth-child(3n) { animation-duration: 2.3s; }
.xmas-lights i:nth-child(3n)::after { animation-duration: 2.3s; }
@keyframes fx-twinkle { from { opacity: 1; } 60% { opacity: .95; } to { opacity: .35; box-shadow: 0 0 3px 0 var(--c); } }

/* ── Snow on the tops of squares ──────────────────────────────── */
.snowcap-logo .tile.logo::before,
.snowcap-all .tile::before {
  content: ""; position: absolute; z-index: 1; left: -2%; right: -2%; top: -1px; height: 16%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v14c-8 2-12 10-20 9s-9-8-18-7-11 13-22 12-10-9-20-9-12 11-24 10-9-10-19-9-13 8-22 7-9-9-19-8-9 10-18 9S4 16 0 18z' fill='%23fff'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 90, 130, .28));
}
.snowcap-all .tile .cap { z-index: 2; }

/* ── Falling snow canvas ──────────────────────────────────────── */
canvas.fx-snow { inset: 0; pointer-events: none; z-index: 60; }

@media (prefers-reduced-motion: reduce) {
  .js .fx .tile { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .xmas-lights i::after { animation: none; }
  .hover-zoom a.tile img, .hover-lift a.tile { transition: none; }
}