/* =========================================================
   SONOFPOLLUX V7.5 — MOTION SYSTEM
   Shared kinetic interface layer for public/editorial pages.
   Loaded after page-specific styles. Motion is progressive:
   content stays fully visible if JavaScript is unavailable.
   ========================================================= */

:root{
  --v75-pink:#e59ac4;
  --v75-blue:#94b9ec;
  --v75-ink:rgba(255,255,255,.96);
  --v75-dim:rgba(255,255,255,.68);
  --v75-line:rgba(255,255,255,.12);
  --v75-ease:cubic-bezier(.2,.72,.2,1);
  --v75-ease-out:cubic-bezier(.16,1,.3,1);
}

body.v75Motion{
  --v75-scroll:0;
  position:relative;
}

/* A quieter background layer: light contamination rather than neon wallpaper. */
body.v75Motion::before,
body.v75Motion::after{
  content:"";
  position:fixed;
  z-index:-1;
  width:min(42vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(78px);
  opacity:.075;
  pointer-events:none;
  will-change:transform;
}
body.v75Motion::before{
  top:12vh;
  left:-18vw;
  background:var(--v75-pink);
  animation:v75AmbientA 22s ease-in-out infinite alternate;
}
body.v75Motion::after{
  right:-20vw;
  bottom:-8vh;
  background:var(--v75-blue);
  animation:v75AmbientB 27s ease-in-out infinite alternate;
}
@keyframes v75AmbientA{
  from{transform:translate3d(0,0,0) scale(.92)}
  to{transform:translate3d(11vw,8vh,0) scale(1.13)}
}
@keyframes v75AmbientB{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-9vw,-10vh,0) scale(.9)}
}

/* Scroll position becomes a thin piece of interface chrome. */
.v75Progress{
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:2px;
  transform:scaleX(var(--v75-scroll));
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--v75-pink),rgba(255,255,255,.86),var(--v75-blue));
  box-shadow:0 0 18px rgba(229,154,196,.28);
  pointer-events:none;
}

/* Scroll reveal. JS adds body.v75-motion-enabled, so no-JS never hides content. */
.v75-motion-enabled .v75-reveal{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.988);
  filter:blur(3px);
  transition:
    opacity .78s var(--v75-ease-out),
    transform .88s var(--v75-ease-out),
    filter .72s var(--v75-ease-out);
  transition-delay:var(--v75-delay,0ms);
  will-change:opacity,transform,filter;
}
.v75-motion-enabled .v75-reveal.v75-from-left{
  transform:translate3d(-24px,10px,0) scale(.992);
}
.v75-motion-enabled .v75-reveal.v75-from-right{
  transform:translate3d(24px,10px,0) scale(.992);
}
.v75-motion-enabled .v75-reveal[data-v75-state="in"]{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none;
}

/* Hero copy receives a slower motion curve than cards. */
.v75-motion-enabled .v75-hero{
  --v75-hero-shift:0px;
}
.v75-motion-enabled .v75-hero .v75-hero-copy{
  transform:translate3d(0,var(--v75-hero-shift),0);
  will-change:transform;
}
.v75-motion-enabled .v75-hero h1,
.v75-motion-enabled .v75-hero .h1{
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* Surface treatment: no giant glow cards, just a moving edge and local light. */
.v75-surface{
  --v75-x:50%;
  --v75-y:50%;
  position:relative;
  isolation:isolate;
  transition:
    transform .28s var(--v75-ease),
    border-color .28s ease,
    box-shadow .34s ease,
    background-color .28s ease;
}
.v75-surface::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(340px circle at var(--v75-x) var(--v75-y),
      rgba(255,255,255,.105),
      rgba(148,185,236,.035) 38%,
      transparent 70%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .v75-surface:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.2)!important;
    box-shadow:0 22px 60px rgba(0,0,0,.22);
  }
  .v75-surface:hover::after{opacity:1}
}

/* Images feel more like plates being inspected than thumbnails. */
.v75-image{
  overflow:hidden;
  position:relative;
}
.v75-image img{
  transition:transform 1s var(--v75-ease-out),filter .65s ease;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .v75-image:hover img{
    transform:scale(1.025);
    filter:saturate(1.05) contrast(1.025);
  }
}

/* Section rhythm / "chapter cut" */
.v75-section{
  position:relative;
}
.v75-section::before{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin:0 0 clamp(22px,3vw,36px);
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.045) 42%,transparent);
  transform-origin:left center;
  transform:scaleX(.22);
  opacity:.7;
  transition:transform 1.2s var(--v75-ease-out),opacity .8s ease;
}
.v75-section[data-v75-state="in"]::before,
.v75-section:has(.v75-reveal[data-v75-state="in"])::before{
  transform:scaleX(1);
  opacity:1;
}

/* Buttons / strong links: a restrained sweep, not a neon pulse. */
.v75Motion :is(.btn,.button,.shellDoor,.v37Path,a[class*="Button"],a[class*="button"]){
  position:relative;
}
.v75Motion :is(.btn,.button)[href],
.v75Motion a.shellDoor,
.v75Motion a.v37Path{
  overflow:hidden;
}
.v75Motion :is(.btn,.button)[href]::after,
.v75Motion a.shellDoor::after,
.v75Motion a.v37Path::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-60%;
  bottom:-60%;
  left:-42%;
  width:24%;
  transform:skewX(-18deg) translateX(-360%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transition:transform .7s var(--v75-ease-out);
  pointer-events:none;
}
@media (hover:hover){
  .v75Motion :is(.btn,.button)[href]:hover::after,
  .v75Motion a.shellDoor:hover::after,
  .v75Motion a.v37Path:hover::after{
    transform:skewX(-18deg) translateX(760%);
  }
}

/* Navigation feels live without bouncing. */
.v75Motion .topbar .nav__link,
.v75Motion .v72Nav .nav__link{
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .22s var(--v75-ease);
}
@media (hover:hover){
  .v75Motion .topbar .nav__link:hover,
  .v75Motion .v72Nav .nav__link:hover{
    transform:translateY(-1px);
  }
}

/* HOME — doors / current transmission */
.v75Motion .v72Transmission__shell{
  transition:box-shadow .5s ease,border-color .4s ease;
}
.v75Motion .v72Transmission__shell.v75-surface:hover{
  box-shadow:0 34px 100px rgba(0,0,0,.34);
}
.v75Motion .shellDoors{
  perspective:1200px;
}
.v75Motion .shellDoor{
  transform-origin:50% 100%;
}
.v75Motion .shellDoor strong{
  transition:letter-spacing .32s var(--v75-ease);
}
@media (hover:hover){
  .v75Motion .shellDoor:hover strong{letter-spacing:.015em}
}

/* EXPLORE / LORE / ROADMAP — older panels get cleaner motion and flatter depth. */
.v75Motion :is(.panel,.creatorEvidence,.memoryRulebook article,.nowMetrics article){
  backface-visibility:hidden;
}
.v75Motion .panel.v75-surface{
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.v75Motion .panel.v75-surface:hover{
  background-color:rgba(255,255,255,.055);
}

/* ROADMAP — animate the path itself when present. */
.v75Motion #roadmap :is(.timeline,.roadmapLine,.roadmap__line){
  transform-origin:top center;
  animation:v75Road 1.3s var(--v75-ease-out) both;
}
@keyframes v75Road{
  from{opacity:.25;transform:scaleY(.25)}
  to{opacity:1;transform:scaleY(1)}
}

/* START — paths become doors rather than static cards. */
.v75Motion .v37Path{
  transition:
    transform .3s var(--v75-ease),
    border-color .28s ease,
    background-color .28s ease;
}
@media (hover:hover){
  .v75Motion .v37Path:hover{
    transform:translate3d(0,-5px,0);
  }
}

/* CREATOR — chapters read as an editorial sequence. */
.v75Motion .creatorChapter{
  scroll-margin-top:110px;
}
.v75Motion .creatorChapter > :is(h2,.creatorChapter__head,.creatorChapterTitle){
  text-wrap:balance;
}
.v75Motion .creatorEvidence{
  transition:transform .32s var(--v75-ease),border-color .25s ease;
}

/* VISUAL ARCHIVE — plates are the interaction. */
.v75Motion .visualHero{
  min-height:min(78vh,760px);
  display:grid;
  align-content:center;
}
.v75Motion #plates :is(figure,.visualPlate,.plate,article){
  transform-origin:center center;
}

/* MEMORY / MUSEUM — archive drawers reveal in a more physical cadence. */
.v75Motion :is(.memoryRecords,.museumSection){
  scroll-margin-top:100px;
}
.v75Motion .museumPlatform{
  transition:transform .34s var(--v75-ease),border-color .28s ease,box-shadow .34s ease;
}
.v75Motion .museumSection :is(article,a[class*="artifact"],a[class*="Artifact"]){
  backface-visibility:hidden;
}

/* NOW — metrics feel monitored, not dashboardy. */
.v75Motion .nowMetrics article{
  position:relative;
  overflow:hidden;
}
.v75Motion .nowMetrics article::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background:linear-gradient(180deg,var(--v75-pink),transparent 45%,var(--v75-blue));
  opacity:.42;
}
.v75Motion .nowMetrics :is(strong,b){
  font-variant-numeric:tabular-nums;
}

/* ROOM ATLAS — room cards get a soft contamination edge. */
.v75Motion :is(.roomCard,.room-card,.roomTile,.room-tile){
  transition:transform .32s var(--v75-ease),filter .32s ease,border-color .32s ease;
}
@media (hover:hover){
  .v75Motion :is(.roomCard,.room-card,.roomTile,.room-tile):hover{
    filter:saturate(1.06);
  }
}


/* Desktop chapter rail — an index, not a second navigation bar. */
.v75ChapterRail{
  position:fixed;
  z-index:80;
  right:clamp(14px,2vw,30px);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:7px;
  padding:10px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(7,8,13,.54);
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.v75ChapterRail button{
  position:relative;
  appearance:none;
  width:8px;
  height:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  transition:transform .22s var(--v75-ease),background .22s ease,border-color .22s ease;
}
.v75ChapterRail button::before{
  content:attr(data-v75-label);
  position:absolute;
  right:24px;
  top:50%;
  width:max-content;
  max-width:230px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(8,9,14,.9);
  color:rgba(255,255,255,.72);
  font-size:.64rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:0;
  transform:translate(7px,-50%);
  pointer-events:none;
  transition:opacity .18s ease,transform .22s var(--v75-ease);
}
.v75ChapterRail button:hover::before,
.v75ChapterRail button:focus-visible::before{
  opacity:1;
  transform:translate(0,-50%);
}
.v75ChapterRail button[aria-current="true"]{
  transform:scale(1.5);
  background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 0 12px rgba(229,154,196,.24);
}
.v75ChapterRail button:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:4px;
}
@media (max-width:1180px){
  .v75ChapterRail{display:none}
}

/* Focus stays stronger than hover. */
.v75Motion :focus-visible{
  outline:2px solid rgba(255,255,255,.78);
  outline-offset:4px;
}

/* Touch: never require hover for information. */
@media (hover:none),(pointer:coarse){
  .v75-surface::after{display:none}
  .v75Motion :is(.btn,.button)[href]::after,
  .v75Motion a.shellDoor::after,
  .v75Motion a.v37Path::after{display:none}
}

/* Reduced motion is a first-class mode. */
@media (prefers-reduced-motion:reduce){
  body.v75Motion::before,
  body.v75Motion::after{animation:none!important}
  .v75-motion-enabled .v75-reveal,
  .v75-motion-enabled .v75-reveal.v75-from-left,
  .v75-motion-enabled .v75-reveal.v75-from-right{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .v75Progress{display:none}
  .v75Motion *,
  .v75Motion *::before,
  .v75Motion *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media (max-width:760px){
  body.v75Motion::before,
  body.v75Motion::after{
    width:78vw;
    opacity:.055;
    filter:blur(64px);
  }
  .v75-motion-enabled .v75-reveal{
    transform:translate3d(0,18px,0) scale(.994);
  }
  .v75Motion .visualHero{min-height:auto}
}