/* V219 — Real Transformations: immersive quantum field */
.nav-results-link{color:#d7ad52!important;border-color:rgba(215,173,82,.38)!important;text-shadow:0 0 18px rgba(215,173,82,.28)}

.transformation-stage{
  --rt-red:#ef3039;
  --rt-red-deep:#8f0d16;
  --rt-blue:#2e9dff;
  --rt-cyan:#35d9ff;
  position:relative;
  height:138vh;
  min-height:980px;
  padding:0;
  overflow:visible;
  isolation:isolate;
  background:#030508;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.transformation-scene-shell{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 51% 54%,rgba(238,44,54,.10),transparent 22%),
    radial-gradient(ellipse at 25% 42%,rgba(37,137,255,.055),transparent 28%),
    radial-gradient(ellipse at 78% 55%,rgba(31,203,255,.045),transparent 26%),
    linear-gradient(180deg,#020407 0%,#05070b 43%,#030508 100%);
}
.transformation-scene-shell::before,
.transformation-scene-shell::after{content:"";position:absolute;inset:0;pointer-events:none}
.transformation-scene-shell::before{
  z-index:-4;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(1100px) rotateX(73deg) scale(1.75) translateY(23%);
  transform-origin:50% 84%;
  mask-image:linear-gradient(to bottom,transparent 4%,rgba(0,0,0,.25) 34%,#000 72%,transparent 100%);
}
.transformation-scene-shell::after{
  z-index:24;
  background:
    linear-gradient(90deg,#020407 0%,rgba(2,4,7,.76) 5%,transparent 15%,transparent 85%,rgba(2,4,7,.76) 95%,#020407 100%),
    linear-gradient(180deg,rgba(2,4,7,.60) 0%,transparent 13%,transparent 84%,rgba(2,4,7,.56) 100%);
}
.transformation-network{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none;opacity:1;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.03)}
.transformation-aurora{position:absolute;z-index:-3;inset:-8%;pointer-events:none;filter:blur(78px);opacity:.78;background:
  radial-gradient(circle at 48% 57%,rgba(239,48,57,.12),transparent 19%),
  radial-gradient(circle at 20% 47%,rgba(46,157,255,.07),transparent 18%),
  radial-gradient(circle at 82% 43%,rgba(53,217,255,.055),transparent 17%),
  radial-gradient(circle at 69% 71%,rgba(239,48,57,.07),transparent 20%);animation:rt219Aurora 15s ease-in-out infinite alternate}
@keyframes rt219Aurora{0%{transform:translate3d(-1.5%,1%,0) scale(.98);opacity:.58}100%{transform:translate3d(1.5%,-1%,0) scale(1.045);opacity:.88}}

.transformation-heading{position:absolute;z-index:28;left:50%;top:clamp(38px,5.6vh,64px);transform:translateX(-50%);width:min(920px,90vw);text-align:center;pointer-events:none;padding:0 20px}
.transformation-heading::after{content:"";display:block;width:min(160px,20vw);height:1px;margin:18px auto 0;background:linear-gradient(90deg,transparent,rgba(239,48,57,.82),rgba(255,255,255,.24),rgba(239,48,57,.82),transparent);box-shadow:0 0 22px rgba(239,48,57,.28)}
.transformation-heading h2{font-size:clamp(36px,4.25vw,68px);margin:8px 0 10px;letter-spacing:-.035em;text-shadow:0 10px 44px rgba(0,0,0,.88),0 0 24px rgba(239,48,57,.15)}
.transformation-heading p{font-size:clamp(14px,1.05vw,17px);color:#b9bbc3;margin:0}

.transformation-carousel{position:absolute;z-index:12;inset:0;direction:ltr;touch-action:pan-y;user-select:none;perspective:2200px;perspective-origin:50% 54%;overflow:hidden}
.transformation-track{position:absolute;inset:0;transform-style:preserve-3d;perspective:2200px;perspective-origin:50% 54%;overflow:visible}
.transformation-track::before{content:"";position:absolute;z-index:-1;left:50%;top:57%;width:min(840px,50vw);height:min(380px,34vh);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(239,48,57,.075),rgba(46,157,255,.025) 42%,transparent 72%);filter:blur(18px);opacity:.92;pointer-events:none}
.transformation-track::after{content:"";position:absolute;z-index:-1;left:50%;bottom:4%;width:min(980px,72vw);height:110px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(239,48,57,.15),rgba(46,157,255,.04) 38%,transparent 72%);filter:blur(26px);opacity:.82;pointer-events:none}

.transformation-slide{
  position:absolute;left:50%;top:50%;width:clamp(170px,16.5vw,330px);aspect-ratio:1/1;
  transform:translate3d(-50%,-50%,0);opacity:0;filter:brightness(.28) blur(2px);
  pointer-events:none;border-radius:24px;overflow:hidden;background:#06080b;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 88px rgba(0,0,0,.62);
  will-change:transform,opacity,filter;backface-visibility:hidden;transform-style:preserve-3d;
  transition:border-color .24s ease,box-shadow .24s ease;
}
.transformation-slide::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;border:1px solid transparent;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 22%,transparent 70%,rgba(239,48,57,.28)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.34}
.transformation-slide::after{content:"";position:absolute;inset:auto 13% -28px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(239,48,57,.34),transparent 72%);filter:blur(14px);opacity:.34;pointer-events:none}
.transformation-slide img{width:100%;height:100%;display:block;object-fit:contain;background:#05070a;pointer-events:none;transition:filter .3s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.transformation-slide.is-interactive{pointer-events:auto;cursor:pointer}
.transformation-slide.is-interactive:hover{border-color:rgba(53,217,255,.35);box-shadow:0 32px 100px rgba(0,0,0,.70),0 0 0 1px rgba(53,217,255,.12),0 0 38px rgba(53,217,255,.09)}
.transformation-slide.is-focused{border-color:rgba(239,48,57,.68);box-shadow:0 42px 138px rgba(0,0,0,.82),0 0 0 1px rgba(239,48,57,.22),0 0 64px rgba(239,48,57,.18)}
.transformation-slide.is-focused::before{opacity:1}
.transformation-slide.is-focused::after{opacity:.92}
.transformation-slide.is-focused img{filter:saturate(1.04) contrast(1.015)}
.transformation-caption{position:absolute;z-index:5;inset:auto 10px 10px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(7,8,10,.94),rgba(20,8,11,.88));backdrop-filter:blur(12px);text-align:right;direction:rtl;border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(8px);transition:opacity .24s ease,transform .24s ease}
.transformation-slide.is-focused .transformation-caption,.transformation-slide:hover .transformation-caption{opacity:1;transform:translateY(0)}
.transformation-caption b,.transformation-caption span{display:block}.transformation-caption b{font-size:12px}.transformation-caption span{font-size:10px;color:#bdbfc5;margin-top:3px}

.transformation-signal-field{position:absolute;z-index:16;inset:0;pointer-events:none;color:#b9c3d2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.transformation-signal{position:absolute;padding:7px 9px;border-left:1px solid rgba(239,48,57,.38);background:linear-gradient(90deg,rgba(239,48,57,.035),transparent);text-shadow:0 0 18px rgba(46,157,255,.18)}
.transformation-signal::after{content:"";display:block;width:34px;height:1px;margin-top:5px;background:linear-gradient(90deg,rgba(53,217,255,.55),transparent)}
.transformation-signal.s1{left:7%;top:24%}.transformation-signal.s2{right:8%;top:31%}.transformation-signal.s3{left:12%;bottom:18%}.transformation-signal.s4{right:12%;bottom:16%}.transformation-signal.s5{left:46%;bottom:8%}

.transformation-arrow{position:absolute;z-index:31;top:52%;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(18,20,24,.70),rgba(5,7,10,.56));color:#fff;font-size:22px;font-weight:800;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.38),0 0 24px rgba(239,48,57,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.transformation-arrow:hover{transform:scale(1.05);border-color:rgba(239,48,57,.50);box-shadow:0 16px 44px rgba(0,0,0,.44),0 0 30px rgba(239,48,57,.13)}
.transformation-arrow.prev{left:clamp(14px,2vw,34px)}.transformation-arrow.next{right:clamp(14px,2vw,34px)}
.transformation-dots{position:absolute;z-index:32;left:50%;bottom:clamp(16px,2.5vh,26px);transform:translateX(-50%);display:flex;gap:7px;max-width:72vw;overflow:auto;padding:8px 10px;border-radius:20px;background:rgba(4,6,9,.36);backdrop-filter:blur(8px)}
.transformation-dots button{width:6px;height:6px;border:0;border-radius:50%;background:#4a4e58;padding:0;flex:none;transition:width .25s ease,background .25s ease,box-shadow .25s ease}
.transformation-dots button.active{width:22px;border-radius:8px;background:#ef3039;box-shadow:0 0 15px rgba(239,48,57,.45)}

.transformation-admin-intro{max-width:920px}.transformation-admin-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.transformation-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.transformation-admin-card{background:linear-gradient(145deg,#17191e,#101115);border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;cursor:grab}.transformation-admin-card:active{cursor:grabbing}.transformation-admin-thumb{aspect-ratio:1/1;background:#08090b}.transformation-admin-thumb img{width:100%;height:100%;object-fit:contain}.transformation-admin-fields{padding:14px}.transformation-admin-fields label{display:block;margin-bottom:9px}.switch-line{display:flex!important;align-items:center;gap:8px}.switch-line input{width:auto!important;margin:0!important}
.results-page-tab{color:#e2bb62!important;border-color:rgba(226,187,98,.48)!important;box-shadow:inset 0 0 0 1px rgba(226,187,98,.12),0 0 18px rgba(226,187,98,.08)!important}
.navbar .nav-results-link.results-page-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border:1px solid rgba(226,187,98,.48);border-radius:14px;background:rgba(226,187,98,.045);color:#e2bb62!important;box-shadow:inset 0 0 0 1px rgba(226,187,98,.1),0 0 18px rgba(226,187,98,.08)!important;text-decoration:none;line-height:1;white-space:nowrap}
.public-menu-drawer nav a.public-menu-results{color:#e2bb62;border-color:rgba(226,187,98,.48);background:linear-gradient(145deg,rgba(8,9,11,.96),rgba(18,16,10,.94));box-shadow:inset 0 0 0 1px rgba(226,187,98,.10),0 0 20px rgba(226,187,98,.07)}

@media (max-width: 980px){
  .transformation-stage{height:118svh;min-height:820px}
  .transformation-scene-shell{height:100svh;min-height:680px}
  .transformation-heading{top:52px}
  .transformation-heading h2{font-size:clamp(32px,7.7vw,48px)}
  .transformation-slide{width:min(43vw,300px)}
  .transformation-signal-field{display:none}
}
@media (max-width: 640px){
  .transformation-stage{height:100svh;min-height:720px;overflow:hidden}
  .transformation-scene-shell{position:relative;top:auto;height:100svh;min-height:720px}
  .transformation-heading{top:68px;width:94vw}.transformation-heading h2{font-size:clamp(30px,9.5vw,42px)}.transformation-heading p{font-size:13px;padding:0 12px}
  .transformation-slide{width:min(58vw,245px);border-radius:20px}
  .transformation-arrow{width:44px;height:44px;font-size:20px;top:54%}.transformation-arrow.prev{left:8px}.transformation-arrow.next{right:8px}
  .transformation-dots{bottom:13px;max-width:84vw}
}
@media (prefers-reduced-motion: reduce){.transformation-aurora{animation:none}.transformation-carousel *{scroll-behavior:auto!important}}
/* V219 review refinement — brighter spatial field, restrained focus */
.transformation-network{filter:saturate(1.28) contrast(1.06)}
.transformation-slide{width:clamp(160px,15.5vw,300px)}
.transformation-heading{top:clamp(32px,4.8vh,56px)}
.transformation-slide.is-depth-node{box-shadow:0 24px 72px rgba(0,0,0,.58),0 0 28px rgba(46,157,255,.025)}

/* V220 refinement — calmer field, darker spacing, sharper red */
.transformation-stage{
  height:calc(var(--app-dvh, 100dvh) + 20vh);
  min-height:900px;
  overflow:clip;
}
.transformation-scene-shell{
  height:var(--app-dvh, 100dvh);
  background:
    radial-gradient(ellipse at 51% 54%,rgba(255,43,57,.12),transparent 20%),
    radial-gradient(ellipse at 24% 42%,rgba(37,137,255,.028),transparent 24%),
    radial-gradient(ellipse at 80% 55%,rgba(31,203,255,.020),transparent 24%),
    linear-gradient(180deg,#010306 0%,#04060a 40%,#020408 100%);
}
.transformation-scene-shell::before{opacity:.24}
.transformation-scene-shell::after{
  background:
    linear-gradient(90deg,#020407 0%,rgba(2,4,7,.82) 5%,transparent 16%,transparent 84%,rgba(2,4,7,.82) 95%,#020407 100%),
    linear-gradient(180deg,rgba(2,4,7,.64) 0%,transparent 12%,transparent 85%,rgba(2,4,7,.60) 100%);
}
.transformation-network{filter:saturate(1.12) contrast(1.1)}
.transformation-aurora{opacity:.62;background:
  radial-gradient(circle at 48% 57%,rgba(255,43,57,.13),transparent 17%),
  radial-gradient(circle at 20% 47%,rgba(46,157,255,.04),transparent 16%),
  radial-gradient(circle at 82% 43%,rgba(53,217,255,.026),transparent 15%),
  radial-gradient(circle at 69% 71%,rgba(255,43,57,.06),transparent 18%);
}
.transformation-slide.is-focused{box-shadow:0 42px 138px rgba(0,0,0,.84),0 0 0 1px rgba(255,58,71,.24),0 0 74px rgba(255,48,64,.24)}
.transformation-dots button.active{background:#ff3a46;box-shadow:0 0 18px rgba(255,58,71,.52)}
@media (max-width: 980px){
  .transformation-stage{height:calc(var(--app-dvh, 100dvh) + 14vh);min-height:780px}
  .transformation-scene-shell{height:var(--app-dvh, 100dvh);min-height:680px}
}
@media (max-width: 640px){
  .transformation-stage{height:var(--app-dvh, 100dvh);min-height:700px}
  .transformation-scene-shell{height:var(--app-dvh, 100dvh);min-height:700px}
}


/* V221 — final visual refinement */
.transformation-stage{
  height:132vh;
  min-height:920px;
  scroll-margin-top:0;
}
.transformation-scene-shell{
  height:100dvh;
  min-height:680px;
  background:
    radial-gradient(ellipse at 51% 55%,rgba(255,37,54,.095),transparent 20%),
    radial-gradient(ellipse at 23% 44%,rgba(34,112,179,.020),transparent 24%),
    radial-gradient(ellipse at 80% 53%,rgba(31,132,177,.014),transparent 23%),
    linear-gradient(180deg,#010205 0%,#030508 42%,#010306 100%);
}
.transformation-scene-shell::before{opacity:.16}
.transformation-network{filter:saturate(1.06) contrast(1.16)}
.transformation-aurora{opacity:.48;background:
  radial-gradient(circle at 49% 58%,rgba(255,40,56,.12),transparent 17%),
  radial-gradient(circle at 19% 47%,rgba(40,128,190,.018),transparent 16%),
  radial-gradient(circle at 82% 43%,rgba(42,146,190,.012),transparent 15%),
  radial-gradient(circle at 70% 70%,rgba(255,35,52,.045),transparent 18%);
}
.transformation-slide.is-focused{
  box-shadow:0 42px 138px rgba(0,0,0,.86),0 0 0 1px rgba(255,62,77,.30),0 0 84px rgba(255,31,49,.27);
}
.transformation-slide.is-depth-node{box-shadow:0 22px 68px rgba(0,0,0,.64),0 0 18px rgba(255,38,54,.02)}
.transformation-slide.is-interactive:hover{border-color:rgba(255,67,82,.42);box-shadow:0 34px 104px rgba(0,0,0,.72),0 0 0 1px rgba(255,45,62,.14),0 0 38px rgba(255,38,55,.10)}
.transformation-dots button.active{background:#ff3341;box-shadow:0 0 20px rgba(255,45,61,.60)}
@media(max-width:980px){
  .transformation-stage{height:118dvh;min-height:800px}
  .transformation-scene-shell{height:100dvh;min-height:680px}
}
@media(max-width:640px){
  .transformation-stage{height:100dvh;min-height:700px}
  .transformation-scene-shell{position:relative;top:auto;height:100dvh;min-height:700px}
}


/* V222 — final quantum transformation field */
.transformation-scene-shell{
  background:
    radial-gradient(ellipse at 50% 57%,rgba(255,30,48,.125),transparent 19%),
    radial-gradient(ellipse at 20% 48%,rgba(24,83,128,.035),transparent 20%),
    radial-gradient(ellipse at 82% 46%,rgba(22,94,142,.028),transparent 19%),
    linear-gradient(180deg,#010205 0%,#030407 42%,#010204 100%);
}
.transformation-scene-shell::before{
  opacity:.10;
  background-size:88px 88px;
}
.transformation-network{
  opacity:1;
  mix-blend-mode:screen;
  filter:saturate(1.10) contrast(1.19);
}
.transformation-aurora{
  opacity:.54;
  filter:blur(90px);
  background:
    radial-gradient(circle at 50% 58%,rgba(255,30,49,.17),transparent 16%),
    radial-gradient(circle at 26% 54%,rgba(27,98,152,.025),transparent 17%),
    radial-gradient(circle at 77% 48%,rgba(31,112,168,.020),transparent 16%),
    radial-gradient(circle at 66% 72%,rgba(255,35,52,.065),transparent 16%);
}
.transformation-heading{
  top:clamp(40px,5.2vh,62px);
  z-index:31;
}
.transformation-heading h2{
  text-shadow:0 14px 48px rgba(0,0,0,.96),0 0 28px rgba(255,32,49,.13);
}
.transformation-heading::after{
  background:linear-gradient(90deg,transparent,rgba(255,40,56,.88),rgba(255,255,255,.20),rgba(255,40,56,.88),transparent);
  box-shadow:0 0 24px rgba(255,32,49,.30);
}
.transformation-slide{
  box-shadow:0 30px 96px rgba(0,0,0,.72);
  border-color:rgba(255,255,255,.065);
}
.transformation-slide.is-focused{
  border-color:rgba(255,54,69,.76);
  box-shadow:0 44px 144px rgba(0,0,0,.90),0 0 0 1px rgba(255,52,67,.30),0 0 96px rgba(255,28,46,.28);
}
.transformation-slide.is-depth-node{
  box-shadow:0 24px 74px rgba(0,0,0,.72),0 0 28px rgba(255,35,52,.025);
}
.transformation-slide.is-interactive:hover{
  border-color:rgba(255,64,79,.52);
  box-shadow:0 36px 110px rgba(0,0,0,.78),0 0 0 1px rgba(255,46,61,.15),0 0 46px rgba(255,37,54,.12);
}
.transformation-signal-field{
  opacity:.72;
  color:#aeb5c0;
}
.transformation-signal{
  border-left-color:rgba(255,45,61,.62);
  background:linear-gradient(90deg,rgba(255,42,58,.045),transparent);
  text-shadow:0 0 18px rgba(255,32,49,.08);
}
.transformation-signal::after{
  background:linear-gradient(90deg,rgba(50,157,214,.52),transparent);
}
.transformation-signal.s1{left:7%;top:16%}
.transformation-signal.s2{right:8%;top:25%}
.transformation-signal.s3{left:13%;bottom:20%}
.transformation-signal.s4{right:13%;bottom:17%}
.transformation-signal.s5{left:43%;bottom:9%}
.transformation-dots{
  background:rgba(1,3,6,.48);
  border:1px solid rgba(255,255,255,.035);
}
.transformation-dots button.active{
  background:#ff3040;
  box-shadow:0 0 22px rgba(255,43,59,.66);
}
.transformation-arrow{
  background:linear-gradient(145deg,rgba(16,18,22,.72),rgba(3,5,8,.62));
  border-color:rgba(255,255,255,.13);
}
.transformation-arrow:hover{
  border-color:rgba(255,54,69,.54);
  box-shadow:0 18px 48px rgba(0,0,0,.52),0 0 34px rgba(255,37,53,.14);
}
@media(max-width:980px){
  .transformation-heading{top:56px}
  .transformation-signal-field{display:none}
}
@media(max-width:640px){
  .transformation-heading{top:66px}
  .transformation-slide{width:min(57vw,242px)}
}

/* V223 — reference-locked luminous floor + cinematic depth */
.transformation-scene-shell{
  background:
    radial-gradient(ellipse at 50% 63%,rgba(255,28,46,.115),transparent 19%),
    radial-gradient(ellipse at 50% 76%,rgba(255,24,42,.085),transparent 24%),
    radial-gradient(ellipse at 18% 52%,rgba(28,104,158,.032),transparent 19%),
    radial-gradient(ellipse at 83% 48%,rgba(34,123,179,.025),transparent 17%),
    linear-gradient(180deg,#010204 0%,#030407 38%,#020306 70%,#010203 100%);
}
.transformation-scene-shell::before{opacity:.075;background-size:104px 104px}
.transformation-scene-shell::after{
  background:
    linear-gradient(90deg,#010204 0%,rgba(1,2,4,.83) 4%,transparent 12%,transparent 88%,rgba(1,2,4,.83) 96%,#010204 100%),
    linear-gradient(180deg,rgba(1,2,4,.52) 0%,transparent 12%,transparent 86%,rgba(1,2,4,.72) 100%);
}
.transformation-network{filter:saturate(1.18) contrast(1.28);opacity:1}
.transformation-aurora{
  opacity:.62;
  filter:blur(72px);
  background:
    radial-gradient(ellipse at 50% 63%,rgba(255,29,48,.22),transparent 17%),
    radial-gradient(ellipse at 50% 75%,rgba(255,25,43,.12),transparent 23%),
    radial-gradient(circle at 24% 50%,rgba(35,123,181,.036),transparent 15%),
    radial-gradient(circle at 78% 49%,rgba(38,133,190,.028),transparent 15%);
}

.transformation-energy-floor{
  position:absolute;
  z-index:8;
  left:50%;
  top:73.5%;
  width:min(1120px,78vw);
  height:min(330px,31vh);
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  isolation:isolate;
  opacity:.96;
  filter:drop-shadow(0 0 18px rgba(255,25,43,.24));
}
.transformation-energy-floor::before{
  content:"";
  position:absolute;
  inset:10% 3%;
  border-radius:50%;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 9%,rgba(255,48,63,.10) 9.4% 9.9%,transparent 10.3% 16%,
      rgba(255,35,52,.17) 16.4% 16.9%,transparent 17.4% 23%),
    radial-gradient(ellipse at center,rgba(255,31,49,.20) 0%,rgba(255,25,44,.085) 27%,rgba(255,25,44,.025) 53%,transparent 72%);
  transform:perspective(820px) rotateX(64deg) scaleY(.72);
  transform-origin:center;
  box-shadow:inset 0 0 40px rgba(255,37,55,.10),0 0 56px rgba(255,20,40,.08);
  animation:rt223FloorBreath 6.8s ease-in-out infinite alternate;
}
.transformation-energy-floor::after{
  content:"";
  position:absolute;
  left:50%;top:52%;
  width:52%;height:36%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,67,78,.28) 0%,rgba(255,30,48,.12) 30%,rgba(255,30,48,.035) 54%,transparent 76%);
  filter:blur(14px);
  mix-blend-mode:screen;
  animation:rt223CorePulse 4.4s ease-in-out infinite alternate;
}
.rt-floor-orbit{
  position:absolute;
  left:50%;top:50%;
  width:88%;height:56%;
  border:1px solid rgba(255,59,72,.34);
  border-radius:50%;
  box-shadow:0 0 8px rgba(255,34,51,.18),inset 0 0 6px rgba(255,34,51,.08);
  transform-origin:center;
  mix-blend-mode:screen;
}
.rt-floor-orbit-1{transform:translate(-50%,-50%) rotate(-4deg) scaleY(.48);animation:rt223OrbitA 10.5s ease-in-out infinite alternate}
.rt-floor-orbit-2{width:72%;height:48%;opacity:.82;transform:translate(-50%,-50%) rotate(7deg) scaleY(.45);animation:rt223OrbitB 12.8s ease-in-out infinite alternate}
.rt-floor-orbit-3{width:58%;height:40%;opacity:.72;transform:translate(-50%,-50%) rotate(-10deg) scaleY(.42);animation:rt223OrbitC 9.6s ease-in-out infinite alternate}
.rt-floor-orbit-4{width:96%;height:68%;opacity:.38;border-color:rgba(255,42,58,.25);transform:translate(-50%,-50%) rotate(2deg) scaleY(.46);animation:rt223OrbitD 15s ease-in-out infinite alternate}
.rt-floor-orbit-blue{width:66%;height:44%;opacity:.26;border-color:rgba(58,165,221,.38);box-shadow:0 0 8px rgba(48,145,203,.10);transform:translate(-50%,-50%) rotate(12deg) scaleY(.44);animation:rt223OrbitBlue 13.5s ease-in-out infinite alternate}
@keyframes rt223FloorBreath{0%{opacity:.78;transform:perspective(820px) rotateX(64deg) scaleY(.70) scale(.985)}100%{opacity:1;transform:perspective(820px) rotateX(64deg) scaleY(.75) scale(1.018)}}
@keyframes rt223CorePulse{0%{opacity:.58;transform:translate(-50%,-50%) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes rt223OrbitA{0%{transform:translate(-50%,-50%) rotate(-7deg) scaleY(.46)}100%{transform:translate(-50%,-50%) rotate(5deg) scaleY(.51)}}
@keyframes rt223OrbitB{0%{transform:translate(-50%,-50%) rotate(10deg) scaleY(.42)}100%{transform:translate(-50%,-50%) rotate(-4deg) scaleY(.49)}}
@keyframes rt223OrbitC{0%{transform:translate(-50%,-50%) rotate(-13deg) scaleY(.39)}100%{transform:translate(-50%,-50%) rotate(1deg) scaleY(.46)}}
@keyframes rt223OrbitD{0%{transform:translate(-50%,-50%) rotate(3deg) scaleY(.44)}100%{transform:translate(-50%,-50%) rotate(-5deg) scaleY(.49)}}
@keyframes rt223OrbitBlue{0%{transform:translate(-50%,-50%) rotate(14deg) scaleY(.42);opacity:.17}100%{transform:translate(-50%,-50%) rotate(4deg) scaleY(.47);opacity:.31}}

.transformation-slide{
  background:#030406;
  box-shadow:0 34px 110px rgba(0,0,0,.82);
  border-color:rgba(255,255,255,.075);
}
.transformation-slide img{filter:saturate(1.08) contrast(1.075) brightness(1.025)}
.transformation-slide.is-focused{
  border-color:rgba(255,63,76,.90);
  box-shadow:0 50px 168px rgba(0,0,0,.94),0 0 0 1px rgba(255,57,72,.34),0 0 110px rgba(255,27,46,.36),0 26px 76px rgba(255,20,40,.18);
}
.transformation-slide.is-focused::after{height:62px;inset:auto 8% -42px;opacity:1;background:radial-gradient(ellipse,rgba(255,45,61,.56),rgba(255,27,45,.20) 36%,transparent 72%);filter:blur(18px)}
.transformation-slide.is-focused img{filter:saturate(1.17) contrast(1.13) brightness(1.055)}
.transformation-slide.is-depth-node img{filter:saturate(.84) contrast(1.02)}
.transformation-slide.is-depth-node{border-color:rgba(255,255,255,.04)}
.transformation-slide.is-interactive:hover{border-color:rgba(255,70,83,.55);box-shadow:0 40px 122px rgba(0,0,0,.84),0 0 0 1px rgba(255,48,64,.17),0 0 54px rgba(255,34,52,.15)}
.transformation-heading h2{color:#fff;text-shadow:0 15px 50px rgba(0,0,0,.98),0 0 22px rgba(255,255,255,.05),0 0 30px rgba(255,35,52,.11)}
.transformation-heading p{color:#c9cbd1;text-shadow:0 4px 18px rgba(0,0,0,.95)}
.transformation-signal-field{opacity:.78}
.transformation-signal{color:#b8bec8}

@media(max-width:980px){
  .transformation-energy-floor{top:74%;width:92vw;height:26vh;opacity:.78}
  .rt-floor-orbit-4{display:none}
}
@media(max-width:640px){
  .transformation-energy-floor{top:73%;width:112vw;height:23vh;opacity:.70}
  .rt-floor-orbit-3,.rt-floor-orbit-blue{display:none}
  .transformation-slide.is-focused{box-shadow:0 38px 118px rgba(0,0,0,.92),0 0 0 1px rgba(255,57,72,.30),0 0 68px rgba(255,27,46,.24)}
}
@media(prefers-reduced-motion:reduce){
  .transformation-energy-floor::before,.transformation-energy-floor::after,.rt-floor-orbit{animation:none!important}
}

/* V223.1 — stronger reference-matched pedestal and depth separation */
.transformation-energy-floor{opacity:1;filter:drop-shadow(0 0 24px rgba(255,25,43,.32))}
.transformation-energy-floor::before{
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 8.5%,rgba(255,60,72,.13) 8.9% 9.5%,transparent 10% 15.5%,
      rgba(255,39,55,.21) 16% 16.6%,transparent 17.1% 22.5%),
    radial-gradient(ellipse at center,rgba(255,48,63,.27) 0%,rgba(255,29,47,.12) 28%,rgba(255,25,44,.04) 54%,transparent 74%);
  box-shadow:inset 0 0 54px rgba(255,38,55,.14),0 0 74px rgba(255,22,40,.12);
}
.transformation-energy-floor::after{background:radial-gradient(ellipse,rgba(255,82,91,.35) 0%,rgba(255,38,55,.18) 30%,rgba(255,29,47,.055) 56%,transparent 78%);filter:blur(12px)}
.rt-floor-orbit{border-color:rgba(255,72,83,.42);box-shadow:0 0 12px rgba(255,37,53,.22),inset 0 0 8px rgba(255,36,53,.10)}
.rt-floor-orbit-blue{border-color:rgba(61,165,218,.42);opacity:.30}
.transformation-slide.is-focused{filter:none!important}

/* V225 — live-only scene: remove baked reference-card layer; keep dynamic floor/field */
.transformation-scene-shell{
  background:
    radial-gradient(ellipse at 50% 63%,rgba(255,28,46,.135),transparent 19%),
    radial-gradient(ellipse at 50% 76%,rgba(255,24,42,.10),transparent 24%),
    radial-gradient(ellipse at 18% 52%,rgba(28,104,158,.028),transparent 19%),
    radial-gradient(ellipse at 83% 48%,rgba(34,123,179,.022),transparent 17%),
    linear-gradient(180deg,#010204 0%,#030407 38%,#020306 70%,#010203 100%);
}


/* V224 — mobile focus compositing hotfix only; desktop intentionally unchanged */
@media(max-width:680px){
  .transformation-track{transform-style:flat;isolation:isolate}
  .transformation-slide{
    background:#020305;
    isolation:isolate;
    contain:paint;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .transformation-slide img{
    opacity:1!important;
    background:#020305;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .transformation-slide.is-focused{
    opacity:1!important;
    background:#010203;
    z-index:500!important;
  }
  .transformation-slide.is-focused img{opacity:1!important}
}


/* V225 — active-card placement + direct dot/drag navigation */
.transformation-dots{pointer-events:auto;scrollbar-width:none}
.transformation-dots::-webkit-scrollbar{display:none}
.transformation-dots button{
  position:relative;
  width:14px;
  height:14px;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}
.transformation-dots button::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#4a4e58;
  transition:width .24s ease,height .24s ease,background .24s ease,box-shadow .24s ease;
}
.transformation-dots button.active{width:28px;background:transparent;box-shadow:none}
.transformation-dots button.active::after{width:22px;height:6px;background:#ff3341;box-shadow:0 0 20px rgba(255,45,61,.60)}
.transformation-slide.is-focused{cursor:grab;touch-action:pan-y}
.transformation-slide.is-focused:active{cursor:grabbing}

/* Floor is now 100% live CSS/canvas, so anchor the focused card directly over its optical center. */
.transformation-energy-floor{top:74.5%;}
@media(min-width:981px){
  .transformation-energy-floor{top:74%;width:min(1120px,77vw);height:min(340px,32vh)}
}
@media(max-width:980px){
  .transformation-energy-floor{top:75%;}
}
@media(max-width:680px){
  .transformation-energy-floor{top:77%;width:118vw;height:25vh;opacity:.78}
  .transformation-dots{bottom:10px;padding:7px 8px;gap:2px;max-width:88vw}
}

/* V228 — transformation navigation polish */
.transformation-dots{
  gap:2px;
  padding:6px 8px;
  touch-action:none;
  cursor:ew-resize;
  overscroll-behavior:contain;
}
.transformation-dots button{
  position:relative;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  background:transparent!important;
  border-radius:50%!important;
  padding:0!important;
  touch-action:manipulation;
}
.transformation-dots button::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#4a4e58;
  transition:width .24s ease,background .24s ease,box-shadow .24s ease,transform .24s ease;
}
.transformation-dots button:hover::before{background:#777d88;transform:translate(-50%,-50%) scale(1.18)}
.transformation-dots button.active::before{
  width:24px;
  border-radius:9px;
  background:#ff3040;
  box-shadow:0 0 22px rgba(255,43,59,.66);
}
.transformation-dots button.active{box-shadow:none!important}

/* V228 final touch target tuning — visual dots stay compact, hit areas are mobile-friendly */
.transformation-dots button{width:30px!important;height:30px!important;flex-basis:30px!important}
.transformation-dots button.active::before{width:26px}
@media(max-width:680px){.transformation-dots button{width:32px!important;height:32px!important;flex-basis:32px!important}.transformation-dots button::before{width:8px;height:8px}.transformation-dots button.active::before{width:28px;height:7px}}
