/* fx.css: tilt and foil, the turning card's light, view transitions, the hero sky and card, dust (docs/MOTION.md §4, §7).
   Loaded after style.css on the pages that use them. Tokens only; derived values sit in this :root block. */
:root{
  --fx-hi:color-mix(in srgb,var(--gold-2) 55%,transparent);
  --fx-band:color-mix(in srgb,var(--cream) 16%,transparent);
  --fx-sweep:color-mix(in srgb,var(--cream) 38%,transparent);
  --fx-edge:color-mix(in srgb,var(--gold-2) 70%,var(--card));
  --fx-glow:color-mix(in srgb,var(--gold) 24%,transparent);
  --fx-glow-soft:color-mix(in srgb,var(--gold) 8%,transparent);
  --fx-shade:rgba(0,0,0,.5);
}

/* view transitions between pages: a short cross-fade; a card tile becomes the card page's plate */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:var(--ease)}
  ::view-transition-group(card-art){animation-duration:460ms;animation-timing-function:cubic-bezier(.2,.7,.15,1)}
}
header.nav{view-transition-name:site-nav}

/* tilt toward the pointer (or the scroll, or the phone's tilt), with a gold foil sheen */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 520ms var(--ease)}
.fx-tilt.is-tilting{transition:transform 90ms linear}
.fx-card{display:block;position:relative;border-radius:var(--r-s)}
.fx-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--r-s);mix-blend-mode:overlay;opacity:var(--foil,0);transition:opacity 420ms var(--ease);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--fx-hi),transparent 48%),repeating-linear-gradient(115deg,transparent 0 9%,var(--fx-band) 11%,transparent 14% 22%);
  background-size:100% 100%,240% 240%;background-position:center,var(--mx,50%) var(--my,50%)}
.tarot-in > .fx-sheen{transform:rotateY(180deg) translateZ(1.6px);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.tarot-still .fx-sheen{z-index:2}

/* the turning card: a gilded edge and a band of light (Today's card and every .tarot) */
.tarot-in > .fx-edge{position:absolute;top:1px;bottom:1px;left:calc(50% - 1.5px);width:3px;background:var(--fx-edge)}
.tarot-in > .fx-edge-r{transform:rotateY(90deg) translateZ(calc(var(--fx-w,140px) / 2 - .5px))}
.tarot-in > .fx-edge-l{transform:rotateY(-90deg) translateZ(calc(var(--fx-w,140px) / 2 - .5px))}
.tarot-in > .fx-sweep{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-s);pointer-events:none;transform:rotateY(180deg) translateZ(1.7px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fx-sweep::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,transparent,var(--fx-sweep),transparent);mix-blend-mode:soft-light;transform:translateX(-140%) skewX(-12deg)}
.fx-sweep.is-on::before{animation:fx-sweep 620ms cubic-bezier(.3,.1,.3,1) both}
@keyframes fx-sweep{to{transform:translateX(420%) skewX(-12deg)}}
.fx-motes{position:absolute;inset:0;pointer-events:none;overflow:visible}
.fx-mote{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:var(--r-full);background:var(--gold-2);box-shadow:0 0 6px 1px var(--fx-glow);opacity:0}

/* the homepage sky: WebGL when it is welcome, this still gradient when it is not */
.hero[data-sky]{position:relative;isolation:isolate}
.hero[data-sky]::before{content:"";position:absolute;inset:0 0 -96px;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 78% 8%,color-mix(in srgb,var(--card) 70%,transparent),transparent 70%),radial-gradient(90% 60% at 10% 30%,color-mix(in srgb,var(--deep) 80%,transparent),transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,var(--night) 55%,transparent);mask-image:linear-gradient(to bottom,var(--night) 55%,transparent)}
.fx-sky{position:absolute;inset:0 0 -96px;z-index:-1;width:100%;height:calc(100% + 96px);pointer-events:none;opacity:0;transition:opacity 1600ms var(--ease);
  -webkit-mask-image:linear-gradient(to bottom,var(--night) 55%,transparent);mask-image:linear-gradient(to bottom,var(--night) 55%,transparent)}
.fx-sky.is-on{opacity:1}

/* the hero card: the deck's back, resting on the portrait's corner, turning with the scroll */
.hero-art{position:relative;margin:0}
.hero-art > .plate{display:block}
.hero-card{position:absolute;right:-2px;bottom:-30px;z-index:2;width:64px;aspect-ratio:300/517;perspective:700px;pointer-events:none;background:url(/assets/cards/back.svg) center/100% 100% no-repeat;border-radius:var(--r-s);transform:rotate(6deg)}
.hero-card.is-3d{background:none;transform:none}
.hc-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateZ(var(--hz,6deg)) rotateY(var(--hy,-24deg)) rotateX(var(--hx,4deg));will-change:transform}
.hc-face{position:absolute;inset:0;border-radius:var(--r-s);background:var(--card) url(/assets/cards/back.svg) center/100% 100% no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(1.5px)}
.hc-face-b{transform:rotateY(180deg) translateZ(1.5px)}
.hc-edge{position:absolute;top:1px;bottom:1px;left:calc(50% - 1.5px);width:3px;background:var(--fx-edge)}
.hc-edge-r{transform:rotateY(90deg) translateZ(calc(var(--hw,64px) / 2 - .5px))}
.hc-edge-l{transform:rotateY(-90deg) translateZ(calc(var(--hw,64px) / 2 - .5px))}
.hc-body .fx-sheen{transform:translateZ(1.6px)}
.hc-shadow{position:absolute;left:4%;right:4%;bottom:-10%;height:12%;border-radius:50%;background:radial-gradient(closest-side,var(--fx-shade),transparent);opacity:.6;transform:translateX(var(--hsx,0px))}
@media (min-width:768px){ .hero-card{width:96px;right:-18px;bottom:-34px} }
@media (min-width:1024px){ .hero-art{order:2} .hero-card{width:112px;right:auto;left:-44px;bottom:48px} }

/* dust: a canvas of slow motes behind a section's content */
[data-dust]{position:relative;isolation:isolate}
.fx-dust{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .fx-tilt,.fx-tilt.is-tilting{transform:none;transition:none}
  .fx-sky,.fx-dust{display:none}
}