/* Potatchi's room and the character, for the homepage (the hero and the closing moment). Mirrored from the companion
   app's stylesheet (worktree companion/app/app.css → room, character, particles, words); the state machine that drives
   it is js/companion/character.js, the same file as the app's. Keep the two in step with scripts/sync-companion.sh.
   Motion is transform/opacity only and switches off under prefers-reduced-motion. Tokens are the site's
   (docs/design-system.md); the few the room needs that the site doesn't define are set on .room itself. */

@property --lid { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --gx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --gy { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------------ room -- */
.room {
  --radius-md: 14px; --pill: 999px;
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3;
  background: var(--wall, #F6E9D3); isolation: isolate; container-type: size;
  border-radius: var(--radius-lg); box-shadow: var(--elev-2);
  touch-action: manipulation;
  --seat: calc(19cqh * 400 / 150); --wall-tint: transparent; --sky-tint: transparent; --cush-ar: 1000 / 403; --rug-ar: 1200 / 500; --pane-l: 18.59%; --pane-t: 12.26%; --pane-w: 62.82%; --pane-h: 72.26%;
}
.room--wide { aspect-ratio: 16 / 10; }
/* the room is rendered in her finish (tools/room-specs.json → art/room → assets/room): the wall and the floor are textures under the room's own
   light, the window, the shelf, the cushions and the rugs are keyed pieces placed in % of the room; --wall-tint (multiplied, so the plaster keeps
   its grain) is how the wall choices and the themes colour the wall; the pane box (--pane-*) is where the sky and the effects show through the frame */
.room[data-wall="cream"] { --wall: #F6E9D3; --wall-2: #EBD9BD; --wall-tint: transparent; }
.room[data-wall="sand"]  { --wall: #ECD8B6; --wall-2: #DEC49A; --wall-tint: rgba(214, 178, 120, .42); }
.room[data-wall="dusk"]  { --wall: #E6D6CE; --wall-2: #D5BFB3; --wall-tint: rgba(205, 172, 178, .42); }
.room[data-cushion="sky"]   { --cush: #9DBDD8; --cush-2: #7FA3C2; --cush-3: #B9D2E6; }
.room[data-cushion="blush"] { --cush: #E2A9A9; --cush-2: #C98A8A; --cush-3: #EEC4C4; }
.room[data-cushion="sage"]  { --cush: #A9BFA4; --cush-2: #8CA387; --cush-3: #C2D3BE; }
.room[data-time="day"]     { --sun: 1; --lamp: .15; --dim: 0; }
.room[data-time="evening"] { --sun: .9; --lamp: .7; --dim: .08; }
.room[data-time="night"]   { --sun: 0; --lamp: 1; --dim: .22; }
.room[data-asleep="1"]     { --dim: .26; --lamp: .9; }
.room__wall { position: absolute; inset: 0 0 34%; background: url(assets/room/wall.webp?v=20261029o) 50% 100% / cover no-repeat, var(--wall); }
.room__wall::before { content: ""; position: absolute; inset: 0; background: var(--wall-tint); mix-blend-mode: multiply; transition: background 1.2s; pointer-events: none; }
.room__wall::after { content: ""; position: absolute; inset: 0; background: rgba(28, 20, 40, var(--dim)); transition: background 1.2s; pointer-events: none; }
.room__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: url(assets/room/floor.webp?v=20261029o) 50% 0 / cover no-repeat, #C39157; }
.room__floor::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 30, calc(var(--dim) * .9)); transition: background 1.2s; }
.room__floor::before { content: ""; position: absolute; left: 4%; top: 8%; width: 34%; height: 70%; background: linear-gradient(180deg, rgba(255, 240, 200, .5), rgba(255, 240, 200, 0)); transform: skewX(-24deg); opacity: var(--sun); filter: blur(6px); transition: opacity 1.2s; pointer-events: none; }
.room__skirt { position: absolute; left: 0; right: 0; bottom: 34%; height: 1.5%; background: linear-gradient(180deg, #F8EEDC, #E4D3B6); box-shadow: 0 2px 4px rgba(0,0,0,.14); }
.room__rug { position: absolute; left: 50%; bottom: 2.5%; width: min(96%, calc(var(--seat) * 1.3)); aspect-ratio: var(--rug-ar, 1200 / 500); transform: translateX(-50%); pointer-events: none; }   /* 1.3 seats wide, never a share of the room's width: she and her seat follow the room's height, so a wide room must not get a wider rug */
.room[data-rug="stripes"] .room__rug { width: min(96%, calc(var(--seat) * 1.42)); bottom: 2%; --rug-ar: 1200 / 462; }
.rug__img { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; transform: translateX(-50%); display: block; opacity: 0; transition: opacity .6s; }
.room[data-rug="round"] .rug__img--round, .room[data-rug="stripes"] .rug__img--stripes { opacity: 1; }

.room__window { position: absolute; left: 5%; top: 9%; width: 25%; max-width: 170px; aspect-ratio: 749 / 900; filter: drop-shadow(0 6px 14px rgba(0,0,0,.10)); }
.win__view { position: absolute; inset: 0; -webkit-mask: url(assets/room/window-panes.webp?v=20261029o) 50% 50% / 100% 100% no-repeat; mask: url(assets/room/window-panes.webp?v=20261029o) 50% 50% / 100% 100% no-repeat; }
.win__sky { position: absolute; left: var(--pane-l); top: var(--pane-t); width: var(--pane-w); height: var(--pane-h); object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.room[data-time="day"] .win__sky--day, .room[data-time="evening"] .win__sky--evening, .room[data-time="night"] .win__sky--night { opacity: 1; }
.win__tint { position: absolute; inset: 0; background: var(--sky-tint); mix-blend-mode: multiply; transition: background 1.2s; }
.win__fx { position: absolute; left: var(--pane-l); top: var(--pane-t); width: var(--pane-w); height: var(--pane-h); }
.win__frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.room__shelf { position: absolute; right: 6%; top: 19%; width: 22%; max-width: 150px; aspect-ratio: 900 / 498; }
.shelf__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(60,40,10,.18)); }
.lamp__glow { position: absolute; left: 50%; top: 30%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .8), rgba(255, 214, 140, 0) 66%); opacity: var(--lamp); transition: opacity 1.2s; pointer-events: none; mix-blend-mode: screen; }

.room__cushion { position: absolute; left: 50%; bottom: 7%; width: min(96%, var(--seat)); aspect-ratio: var(--cush-ar, 400 / 150); transform: translateX(-50%); pointer-events: none; }
.cush__img { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; transform: translateX(-50%); display: block; opacity: 0; transition: opacity .6s; }
.room[data-cushion="sky"] .cush__img--sky, .room[data-cushion="blush"] .cush__img--blush, .room[data-cushion="sage"] .cush__img--sage { opacity: 1; }
.room__shadow { position: absolute; left: 50%; bottom: 12.5%; width: 40%; width: min(68%, 38cqh); aspect-ratio: 7 / 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(50,30,10,.28), rgba(50,30,10,0) 70%); }
/* nothing in the room moves but her (body, tail, eyes): no parallax, no drifting pieces (owner, 2026-10-28) */

/* her costume (seasonal; html[data-costume] is set by the head script in index.html): the companion shop's Little Witch set as the
   site shows it. The patch is a photoreal cut from a render of her own artwork (companion/tools/wear-cut.mjs; the file and its place
   on her come from the app's wear.json: x 96, y -31, w 975, h 1005 in her 1112 x 1005 box), drawn above every rig layer and inside
   .ch__body so it breathes and leans with her; the pumpkin is a keyed render on the shelf. Backgrounds, not <img>: nothing is
   downloaded while the costume is off. */
.costume__wear, .costume__prop { display: none; position: absolute; pointer-events: none; background: 50% 50% / 100% 100% no-repeat; }
.costume__wear--little-witch { left: 10.07%; top: -22.59%; width: 88.67%; aspect-ratio: 986 / 1201; }
.costume__prop--jack-o-lantern { right: 2%; bottom: 42%; width: 27%; aspect-ratio: 477 / 480; filter: drop-shadow(0 3px 5px rgba(60, 40, 10, .25)) drop-shadow(0 0 10px rgba(255, 150, 40, .5)); }   /* on the board's top edge, like the app's shelf items */
.costume__sr { display: none; }
html[data-costume="halloween"] .costume__wear, html[data-costume="halloween"] .costume__prop { display: block; }
html[data-costume="halloween"] .costume__wear--little-witch { background-image: url(assets/wear/little-witch.webp?v=20261029o); }
html[data-costume="halloween"] .costume__prop--jack-o-lantern { background-image: url(assets/wear/jack-o-lantern.webp?v=20261029o); }
html[data-costume="halloween"] .costume__sr { display: inline; }
html[data-costume="halloween"] .hero__room .ch__base, html[data-costume="halloween"] .cta__room .ch__base, html[data-costume="halloween"] .hero__still { -webkit-mask: url(assets/wear/little-witch-mask.webp?v=20261029o) 0 0 / 100% 100% no-repeat; mask: url(assets/wear/little-witch-mask.webp?v=20261029o) 0 0 / 100% 100% no-repeat; }   /* the costume hides her ear's top above the brim (wear.json mask; sync-room-markup.mjs) */
@media (min-width: 700px) {   /* on a wide screen her bubble starts right of the window (left 5 % + width 25 % of the room), so the arch and its sky are never behind her words; the tail still points at her head; on a phone the bubble is as wide as the room, as in the app */
  .hero__room .bubble, .cta__room .bubble { left: 32%; transform: none; width: min(46%, 27ch); }   /* 46 % ends before the shelf lamp on the widest rooms */
  .hero__room .bubble::after, .cta__room .bubble::after { left: 39%; }
}

/* --------------------------------------------------------------- character -- */
.ch { position: absolute; left: 50%; bottom: 13.5%; width: 52%; width: min(94%, calc(48cqh * 1112 / 1005)); aspect-ratio: 1112 / 1005; transform: translateX(-50%); transition: --lid .21s cubic-bezier(.25,.1,.3,1), opacity .4s ease-out; opacity: 0; }
.ch.is-ready { opacity: 1; }
.ch.is-instant { transition: none; }   /* her picture was already loaded (the still used it): no fade-in */
.ch__body { position: absolute; inset: 0; transform-origin: 50% 94%; animation: breathe 4.6s ease-in-out infinite; }
.ch__base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ch__tail { position: absolute; left: -1.709%; top: 29.055%; width: 21.403%; height: auto; transform-origin: 72% 96%; animation: sway 4.2s ease-in-out infinite alternate; }
.ch__eye { position: absolute; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, rgba(0,0,0,0) 100%);
  transform: translate(calc(var(--gx) * 4.4%), calc(var(--gy) * 3.2%)); transition: transform .45s var(--ease-out); }
.ch__eye--l { left: 42.716%; top: 25.174%; width: 16.727%; aspect-ratio: 186 / 166; }
.ch__eye--r { left: 65.558%; top: 34.826%; width: 16.277%; aspect-ratio: 181 / 166; }
.ch__iris { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ch__lid { position: absolute; display: block; height: auto; }
.ch__lid--l { left: 39.119%; top: 18.806%; width: 23.921%; aspect-ratio: 266 / 254; transform-origin: 48.68% 42.32%; transform: rotate(22.6deg); clip-path: ellipse(51.13% calc(var(--lid) * 98.88%) at 48.68% 1.12%); }
.ch__lid--r { left: 61.96%; top: 28.458%; width: 23.471%; aspect-ratio: 261 / 254; transform-origin: 55.36% 48.23%; transform: rotate(22.6deg); clip-path: ellipse(58.11% calc(var(--lid) * 89.54%) at 55.36% 10.92%); }
.ch.is-autogaze .ch__eye { animation: gaze 11s ease-in-out infinite; }
.ch.is-blink { --lid: 1; transition: --lid .13s cubic-bezier(.4,0,.8,.6); }
.ch.is-paused .ch__body, .ch.is-paused .ch__tail { animation-play-state: paused; }
.ch[data-state="look"] .ch__body { animation: breathe 4.6s ease-in-out infinite, tilt 1.4s var(--ease-out) 1; }
.ch[data-state="happy"] .ch__body { animation: bounce .95s var(--ease-out) 1; }
.ch[data-state="happy"] { --lid: .35; transition: --lid .25s; }
.ch[data-state="happy"] .ch__tail, .ch[data-state="playwait"] .ch__tail { animation-duration: 1.1s; }
.ch[data-state="pet"] .ch__body { animation: lean .82s var(--ease-out) 1; }
.ch[data-state="pet"] { --lid: .55; transition: --lid .3s ease-out; }
.ch[data-state="eat"] .ch__body { animation: nibble 1.7s ease-in-out 1; }
.ch[data-state="eat"] { --lid: .2; transition: --lid .4s; }
.ch[data-state="playwait"] .ch__body { animation: crouch .5s ease-in-out infinite alternate; }
.ch[data-state="pounce"] .ch__body { animation: pounce .95s cubic-bezier(.3,.6,.3,1) 1; }
.ch[data-state="sleep"] .ch__body { animation: doze 6s ease-in-out infinite; }
.ch[data-state="sleep"] { --lid: 1; transition: --lid .9s ease-in-out; }
.ch[data-state="sleep"] .ch__tail { animation-duration: 9s; }
.ch[data-state="wake"] .ch__body { animation: stretch 1.3s var(--ease-out) 1; }
.ch[data-state="wake"] { transition: --lid .5s ease-out; }
.ch.is-stirring .ch__tail { animation: twitch .6s ease-in-out 1; }
.ch.is-stirring .ch__body { animation: shiver .6s ease-in-out 1; }
/* mild side-eye: the gaze goes to one side and the lids come a little down, then it releases */
.ch.is-sideeye { --lid: .3; transition: --lid .3s ease-out; }
.ch.is-sideeye .ch__eye { transition: transform .35s var(--ease-out); }

@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.016); } }
@keyframes sway { from { transform: rotate(4deg); } to { transform: rotate(-6deg); } }
@keyframes gaze { 0%, 16% { translate: 0 0; } 26%, 44% { translate: 3.4% 1.8%; } 54%, 72% { translate: -3.2% -1.2%; } 82%, 100% { translate: 0 0; } }
@keyframes tilt { 0% { rotate: 0deg; } 30% { rotate: 1.6deg; } 100% { rotate: 0deg; } }
@keyframes bounce { 0% { transform: translateY(0) scale(1, 1); } 22% { transform: translateY(-7%) scale(.97, 1.04); } 50% { transform: translateY(0) scale(1.05, .95); } 72% { transform: translateY(-3%) scale(.99, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes lean { 0% { transform: rotate(0) scale(1); } 35% { transform: rotate(calc(var(--lean) * 4deg)) scale(1.025, .985); } 100% { transform: rotate(0) scale(1); } }
@keyframes nibble { 0%, 100% { transform: translateY(0) rotate(0); } 15%, 45%, 75% { transform: translateY(1.8%) rotate(1.5deg) scale(1.01, .99); } 30%, 60%, 90% { transform: translateY(0) rotate(0) scale(1, 1); } }
@keyframes crouch { from { transform: translateY(1.5%) scale(1.02, .95); } to { transform: translateY(2.5%) scale(1.03, .935) rotate(-1deg); } }
@keyframes pounce { 0% { transform: translate(0, 0) scale(1.03, .94); } 45% { transform: translate(calc(var(--px) * .7%), calc(var(--py) * .7% - 16%)) scale(.97, 1.06); } 62% { transform: translate(calc(var(--px) * 1%), calc(var(--py) * 1%)) scale(1.07, .93); } 80% { transform: translate(calc(var(--px) * .5%), calc(var(--py) * .5% - 4%)) scale(.99, 1.02); } 100% { transform: translate(0, 0) scale(1, 1); } }
@keyframes doze { 0%, 100% { transform: translateY(2%) scale(1.01, .99); } 50% { transform: translateY(2.4%) scale(1.02, 1.005); } }
@keyframes stretch { 0% { transform: translateY(2%) scale(1.01, .99); } 40% { transform: translateY(-2%) scale(.96, 1.07); } 70% { transform: translateY(.5%) scale(1.02, .98); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes twitch { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(9deg); } 60% { transform: rotate(-5deg); } }
@keyframes shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.6%); } 75% { transform: translateX(.6%); } }

/* the tap target over her: a real button, so keyboards and screen readers can pet her */
.hit { position: absolute; left: 50%; bottom: 13%; width: 52%; width: min(94%, calc(48cqh * 1112 / 1005)); aspect-ratio: 1112 / 1005; transform: translateX(-50%); border: 0; background: transparent; border-radius: 45%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; padding: 0; }
.hit:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.room.is-playing .hit { pointer-events: none; }

/* particles */
.fx { position: absolute; left: 50%; bottom: 13.5%; width: 52%; width: min(94%, calc(48cqh * 1112 / 1005)); aspect-ratio: 1112 / 1005; transform: translateX(-50%); pointer-events: none; }
.fx__p { position: absolute; width: 14px; height: 14px; opacity: 0; animation: rise var(--d, 1.1s) ease-out forwards; transform: scale(var(--s, 1)); }
.fx__p--heart { background: var(--blush); clip-path: path('M7 13 C 2 9, 0 6.5, 0 4 A 3.5 3.5 0 0 1 7 3 A 3.5 3.5 0 0 1 14 4 C 14 6.5, 12 9, 7 13 Z'); }
.fx__p--spark { background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx__p--crumb { width: 7px; height: 7px; border-radius: 50%; background: #9A6B3B; }
.fx__p--zzz { width: auto; height: auto; font: 600 var(--text-lg)/1 var(--font-display); color: var(--ink-2); }
.fx__p--zzz::before { content: "z"; }
@keyframes rise { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--dx, 0) -56px; } }

/* food */
.food { position: absolute; left: 50%; bottom: 4%; width: 18%; max-width: 110px; aspect-ratio: 2 / 1; transform: translateX(-190%); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(40,25,10,.25)); }
.food::before { content: ""; position: absolute; inset: 30% 0 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #EFE6D4, #D9CAB0); box-shadow: inset 0 -4px 6px rgba(0,0,0,.08); animation: bowl 1.9s ease-out forwards; }
.food__k { position: absolute; left: calc(30% + var(--i, 0) * 18%); top: 22%; width: 12%; aspect-ratio: 1; border-radius: 40%; background: #B4803F; animation: kibble 1.2s ease-in forwards; }
.food__k:nth-child(2) { --i: 1; animation-delay: .25s; } .food__k:nth-child(3) { --i: 2; animation-delay: .5s; }
@keyframes bowl { 0% { opacity: 0; translate: 0 10px; } 15%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes kibble { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 260% -260%; scale: .4; } }

/* the red dot (a short round on the homepage: find her, she pounces) */
.dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FF7A6B, #E0362A 65%); box-shadow: 0 0 14px 4px rgba(255, 70, 50, .55), 0 0 2px rgba(0,0,0,.2); pointer-events: none; will-change: transform; transition: opacity .25s; }
.dot.is-caught { animation: caught .5s ease-out forwards; }
@keyframes caught { 0% { scale: 1; opacity: 1; } 100% { scale: .1; opacity: 0; } }
.room.is-playing { cursor: crosshair; }

/* her words: a bubble at the top of the room; a polite live region */
.bubble { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: min(88%, 34ch); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--elev-2); opacity: 0; translate: 0 6px; pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: var(--surface); transform: translateX(-50%) rotate(45deg); border-radius: var(--radius-xs); }
.bubble p { margin: 0; font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; }
.bubble.is-in { animation: bubble-in .25s var(--ease-out) forwards; }
@keyframes bubble-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* the focus timer, on the shelf side of the room */
.focus { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); display: none; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--pill); background: var(--surface); box-shadow: var(--elev-2); font: 600 1rem/1 var(--font-display); color: var(--ink); }
.room.is-focusing .focus { display: inline-flex; }
.room.is-focusing .bubble { top: 20%; }
/* while the costume is on, her words sit at the floor of the room with the tail pointing up at her, on every screen: the hat's crown
   starts a fifth of her box above her head, so there is no band above her for a bubble (a top bubble cut the crown off and left the
   brim as a black band for the nine seconds a line shows), and the shelf side is the hat's bent tip. Two lines at most, the width
   of the room on a phone; on a wide screen it never covers more than the rug and the bottom of the potato. */
html[data-costume] .hero__room .bubble, html[data-costume] .cta__room .bubble, html[data-costume] .hero__room .room.is-focusing .bubble { top: auto; bottom: 3%; left: 50%; transform: translateX(-50%); width: min(90%, 48ch); padding: 10px 14px; }
html[data-costume] .hero__room .bubble p, html[data-costume] .cta__room .bubble p { font-size: var(--text-md); line-height: 1.35; }
html[data-costume] .hero__room .bubble::after, html[data-costume] .cta__room .bubble::after { left: 50%; top: -8px; bottom: auto; }
}
.focus__ring { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p, 0) * 1turn), var(--surface-3) 0); box-shadow: inset 0 0 0 3px var(--surface); flex: none; }
.focus__time { font-variant-numeric: tabular-nums; min-width: 4ch; }

/* ------------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .ch__body, .ch__tail, .ch.is-autogaze .ch__eye { animation: none !important; }
  .ch[data-state] .ch__body { animation: none !important; }
  .ch { transition: --lid .2s; }
  .bubble.is-in { animation: none; opacity: 1; translate: 0 0; }
  .fx__p { animation-duration: .5s; }
  .dot { transition: none; }
}