/* =========================================================
   Teenteen – comic motion
   Panels land · bubbles pop · stickers slap on · pictures drift
   inside their frames · pictures follow the cursor · comic page wipe.

   Everything hangs on html.fx, which is added by js/motion.js
   (and by a tiny script in <head>). It is not added when the
   visitor prefers reduced motion, so the page stays exactly as designed.
   ========================================================= */

:root { --fx-ease: cubic-bezier(.2, .9, .3, 1.25); }   /* overshoot */

/* Until motion.js is ready, keep the panels hidden so they never flash.
   Failsafe: if the script never arrives, show them after 3 seconds. */
html.fx:not(.fx-ready) main :is(.frame, .box, .bar, .faq__photo) { opacity: 0; animation: fx-failsafe 0s 3s forwards; }
@keyframes fx-failsafe { to { opacity: 1; } }

/* ---------- Panels land in reading order ---------- */
html.fx .fx-panel:not(.fx-in) { opacity: 0; }
html.fx .fx-panel.fx-in {
  animation: fx-land .55s var(--fx-ease) backwards;
  animation-delay: var(--fx-delay, 0s);
}
@keyframes fx-land {
  0%   { opacity: 0; transform: translateY(3.5rem) rotate(var(--fx-tilt, 2deg)) scale(.9); }
  55%  { opacity: 1; transform: translateY(-.6rem) rotate(calc(var(--fx-tilt, 2deg) * -.3)) scale(1.02); }
  80%  { transform: translateY(.2rem) rotate(0) scale(.995); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Speech bubbles pop from the tail, after their panel ---------- */
html.fx main .bubble { transform-origin: 25% 100%; }
html.fx .fx-panel:not(.fx-in) .bubble { opacity: 0; }
html.fx .fx-panel.fx-in .bubble {
  animation: fx-pop .6s var(--fx-ease) backwards;
  animation-delay: calc(var(--fx-delay, 0s) + .35s);
}
@keyframes fx-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-14deg); }
  45%  { opacity: 1; transform: scale(1.18) rotate(5deg); }
  65%  { transform: scale(.94) rotate(-3deg); }
  82%  { transform: scale(1.04) rotate(1.5deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Stickers slap on, wobble on hover ---------- */
html.fx .fx-panel:not(.fx-in) .sticker { opacity: 0; }
html.fx .fx-panel.fx-in .sticker {
  animation: fx-slap .5s cubic-bezier(.3, 0, .4, 1) backwards;
  animation-delay: calc(var(--fx-delay, 0s) + .65s);
}
@keyframes fx-slap {
  0%   { opacity: 0; transform: translateY(-5rem) rotate(-16deg) scale(1.5); }
  50%  { opacity: 1; transform: translateY(0) rotate(2deg) scale(1.12, .86); }
  70%  { transform: rotate(-1deg) scale(.95, 1.06); }
  85%  { transform: scale(1.02, .98); }
  100% { opacity: 1; transform: none; }
}
/* the wobble uses the separate `rotate` property, so it adds to the existing hover transform */
@media (hover: hover) {
  html.fx .sticker:hover { animation: fx-wobble .5s ease-in-out; }
  html.fx .btn:hover { animation: fx-wobble .4s ease-in-out; }
}
@keyframes fx-wobble {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -5deg; }
  45% { rotate: 4deg; }
  70% { rotate: -2deg; }
}

/* ---------- Pictures drift inside their frame while you scroll (JS sets --fx-py) ---------- */
html.fx main .photo img {
  transform: translate3d(0, var(--fx-py, 0), 0) scale(1.12);
  will-change: transform;
}

/* ---------- Cursor look: JS sets `translate` + `scale` on the picture, `translate` on its bubbles ---------- */
html.fx main .photo img {
  transition: translate .45s cubic-bezier(.2, .8, .3, 1), scale .45s cubic-bezier(.2, .8, .3, 1.3);
}
html.fx main .bubble { transition: translate .45s cubic-bezier(.2, .8, .3, 1); }

/* ---------- Comic page wipe (menu + page links) ---------- */
.fx-wipe {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  overflow: hidden;               /* never adds page scroll */
  visibility: hidden;
}
.fx-wipe span {
  display: block;
  margin: 0 -7vw;                 /* overlap so the skew leaves no gaps */
  border-left: 4px solid #000; border-right: 4px solid #000;
  transform: skewX(-12deg) translateX(-140vw);
}
.fx-wipe span:nth-child(1) { background: var(--light-blue); }
.fx-wipe span:nth-child(2) {
  background-color: var(--pink);
  background-image: radial-gradient(circle, rgba(0,0,0,.18) 28%, transparent 30%);
  background-size: 14px 14px;
}
.fx-wipe span:nth-child(3) { background: var(--clickable-green); }
.fx-wipe b {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg) scale(0);
  padding: 14px 22px 8px;
  background: #fff; border: 4px solid #000; border-radius: 3px;
  box-shadow: 6px 8px 0 rgba(0,0,0,.25);
  font: 700 40px/1 var(--font-main); text-transform: uppercase; letter-spacing: 2px;
  white-space: nowrap;
}
.fx-wipe.is-in, .fx-wipe.is-out { visibility: visible; }
.fx-wipe.is-in span { animation: fx-wipe-in .42s cubic-bezier(.6, 0, .3, 1) both; }
.fx-wipe.is-in span:nth-child(2) { animation-delay: .06s; }
.fx-wipe.is-in span:nth-child(3) { animation-delay: .12s; }
.fx-wipe.is-in b { animation: fx-wipe-word .35s var(--fx-ease) .3s both; }
.fx-wipe.is-out span { transform: skewX(-12deg); animation: fx-wipe-out .42s cubic-bezier(.6, 0, .3, 1) both; }
.fx-wipe.is-out span:nth-child(2) { animation-delay: .06s; }
.fx-wipe.is-out span:nth-child(3) { animation-delay: .12s; }
.fx-wipe.is-out b { transform: translate(-50%, -50%) rotate(-4deg) scale(0); }
@keyframes fx-wipe-in  { from { transform: skewX(-12deg) translateX(-140vw); } to { transform: skewX(-12deg) translateX(0); } }
@keyframes fx-wipe-out { from { transform: skewX(-12deg) translateX(0); } to { transform: skewX(-12deg) translateX(140vw); } }
@keyframes fx-wipe-word {
  0%   { transform: translate(-50%, -50%) rotate(-14deg) scale(0); }
  60%  { transform: translate(-50%, -50%) rotate(2deg) scale(1.15); }
  100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
}