/* =========================================================
   THE LITTLE SORCERER · ANIMATION LAYER v0.1
   Atmospheric movement: intentionally slow and subtle.
   ========================================================= */

:root{
  --tls-pointer-x: 50vw;
  --tls-pointer-y: 50vh;
}

/* Entire decorative layer stays behind real content and never captures clicks. */
.tls-atmosphere{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
}

/* Very soft moving violet/amber fog. */
.tls-ambient-mist{
  position:absolute;
  border-radius:50%;
  filter:blur(58px);
  will-change:transform,opacity;
  mix-blend-mode:screen;
}

.tls-mist-a{
  width:46vw;
  height:26vw;
  min-width:440px;
  min-height:240px;
  left:-20vw;
  top:16vh;
  background:radial-gradient(circle,rgba(126,82,166,.34) 0%,rgba(108,72,139,.18) 38%,rgba(90,58,119,.07) 58%,transparent 76%);
  animation:tlsMistA 24s ease-in-out infinite alternate;
}

.tls-mist-b{
  width:48vw;
  height:28vw;
  min-width:460px;
  min-height:260px;
  right:-22vw;
  top:48vh;
  background:radial-gradient(circle,rgba(142,91,174,.30) 0%,rgba(108,70,137,.16) 42%,rgba(82,54,105,.06) 60%,transparent 77%);
  animation:tlsMistB 31s ease-in-out infinite alternate;
}

.tls-mist-c{
  width:36vw;
  height:20vw;
  min-width:340px;
  min-height:190px;
  left:30vw;
  bottom:-12vw;
  background:radial-gradient(circle,rgba(198,168,120,.15) 0%,rgba(160,119,151,.08) 42%,transparent 76%);
  animation:tlsMistC 28s ease-in-out infinite alternate;
}

@keyframes tlsMistA{
  0%{transform:translate3d(-3vw,-2vh,0) scale(.92);opacity:.78}
  50%{opacity:1}
  100%{transform:translate3d(24vw,8vh,0) scale(1.16);opacity:.84}
}
@keyframes tlsMistB{
  0%{transform:translate3d(3vw,4vh,0) scale(1.08);opacity:.72}
  100%{transform:translate3d(-26vw,-10vh,0) scale(.88);opacity:.96}
}
@keyframes tlsMistC{
  0%{transform:translate3d(-8vw,2vh,0) scale(.9);opacity:.58}
  100%{transform:translate3d(10vw,-12vh,0) scale(1.18);opacity:.82}
}

/* Floating dust/magick particles. */
.tls-particle{
  position:absolute;
  width:var(--size);
  height:var(--size);
  left:var(--x);
  top:110%;
  border-radius:50%;
  background:rgba(230,213,183,var(--alpha));
  box-shadow:0 0 10px rgba(198,168,120,.28);
  animation:tlsParticleRise var(--duration) linear var(--delay) infinite;
  opacity:0;
}

.tls-particle.violet{
  background:rgba(166,126,194,var(--alpha));
  box-shadow:0 0 12px rgba(139,98,168,.32);
}

@keyframes tlsParticleRise{
  0%{transform:translate3d(0,0,0) scale(.65);opacity:0}
  12%{opacity:.8}
  70%{opacity:.46}
  100%{transform:translate3d(var(--drift),-132vh,0) scale(1.25);opacity:0}
}

/* Barely perceptible pointer glow on desktop. */
.tls-pointer-glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(360px circle at var(--tls-pointer-x) var(--tls-pointer-y),
      rgba(116,76,145,.055),
      rgba(116,76,145,.018) 35%,
      transparent 72%);
  transition:opacity .35s ease;
}

/* Existing reveal feels more organic. */
.reveal{
  filter:blur(3px);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.16,.72,.18,1),
    filter .9s ease !important;
}
.reveal.visible{
  filter:blur(0);
}

/* Small magical line that briefly wakes up under headings when revealed. */
.section-heading.reveal::after,
.custom-intro-copy.reveal::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),var(--purple-bright),transparent);
  opacity:.72;
  transition:width 1.35s cubic-bezier(.2,.7,.2,1) .2s;
}
.section-heading.reveal.visible::after{width:min(320px,62vw)}
.custom-intro-copy.reveal::after{margin-left:0}
.custom-intro-copy.reveal.visible::after{width:min(260px,58vw)}

/* Animated sheen on primary calls to action. */
.btn-primary{
  isolation:isolate;
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-80% -55%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 61%);
  transform:translateX(-55%) rotate(3deg);
  animation:tlsButtonSheen 7.5s ease-in-out infinite;
}
.btn-primary span,
.btn-primary:not(:has(span)){
  position:relative;
}
@keyframes tlsButtonSheen{
  0%,72%{transform:translateX(-58%) rotate(3deg);opacity:0}
  78%{opacity:.7}
  92%{transform:translateX(58%) rotate(3deg);opacity:.15}
  100%{transform:translateX(58%) rotate(3deg);opacity:0}
}

/* Cards feel subtly alive rather than static. */
.path-card,
.article-card,
.custom-note,
.custom-step,
.possibility{
  --tls-tilt-x:0deg;
  --tls-tilt-y:0deg;
}
@media (hover:hover) and (pointer:fine){
  .path-card[data-tls-tilt="on"],
  .article-card[data-tls-tilt="on"],
  .custom-note[data-tls-tilt="on"],
  .possibility[data-tls-tilt="on"]{
    transform:
      perspective(900px)
      rotateX(var(--tls-tilt-x))
      rotateY(var(--tls-tilt-y))
      translateY(var(--tls-lift,0px));
    transform-style:preserve-3d;
    transition:transform .28s ease, border-color .35s ease, box-shadow .4s ease;
  }
  .path-card[data-tls-tilt="on"]:hover{--tls-lift:-8px}
  .article-card[data-tls-tilt="on"]:hover{--tls-lift:-5px}
}

/* A huge ghost sigil/parallax element on pages that already have one. */
.custom-sigil{
  will-change:transform,opacity;
  animation:tlsSigilPulse 8s ease-in-out infinite;
}
@keyframes tlsSigilPulse{
  0%,100%{opacity:.68}
  50%{opacity:1}
}

/* Custom Creation: line progresses through the four steps while scrolling. */
.custom-steps{
  position:relative;
  --tls-process:0%;
}
.custom-steps::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:var(--tls-process);
  height:1px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--purple-bright));
  box-shadow:0 0 15px rgba(139,98,168,.38);
  transition:width .16s linear;
}
.custom-step{
  position:relative;
}
.custom-step::after{
  content:"";
  position:absolute;
  left:29px;
  top:-5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#0c0c10;
  border:1px solid rgba(198,168,120,.45);
  box-shadow:0 0 0 4px #0c0c10;
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.custom-step.tls-awake::after{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(198,168,120,.6),0 0 0 4px #0c0c10;
}

/* Decorative star gets gentle parallax. */
[data-tls-parallax]{
  will-change:transform;
}

/* Header gets a faint living border once scrolling. */
.site-header.scrolled{
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.site-header.scrolled::after{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,168,120,.28),rgba(139,98,168,.24),transparent);
  animation:tlsHeaderPulse 5s ease-in-out infinite;
}
@keyframes tlsHeaderPulse{
  0%,100%{opacity:.25}
  50%{opacity:.9}
}

/* Protect reading-heavy areas from excessive visual noise. */
.product-page .tls-atmosphere,
.shop-page .tls-atmosphere{
  opacity:.66;
}

/* Motion accessibility + mobile battery friendliness. */
@media (max-width:700px){
  .tls-mist-a,.tls-mist-b,.tls-mist-c{filter:blur(85px);opacity:.62}
  .tls-pointer-glow{display:none}
  .tls-particle:nth-child(3n){display:none}
}

@media (prefers-reduced-motion:reduce){
  .tls-atmosphere,.tls-pointer-glow{display:none!important}
  .reveal{filter:none!important}
  .btn-primary::after,
  .custom-sigil,
  .site-header.scrolled::after{animation:none!important}
  [data-tls-parallax]{transform:none!important}
}