/* Frontend R3-3R2 — Academy Story Tech Stage Redesign
   Upgrades the homepage Academy Story section into a dark technology-stage presentation.
   The About Dussie page's original company-story video remains untouched. */

#page-home .r3-academy-story-motion {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(112px,10vw,154px) 0;
  border-top:1px solid rgba(121,164,224,.12);
  border-bottom:1px solid rgba(121,164,224,.10);
  background:
    radial-gradient(circle at 16% 18%,rgba(61,130,235,.18),transparent 32%),
    radial-gradient(circle at 84% 22%,rgba(49,225,210,.11),transparent 24%),
    radial-gradient(circle at 50% 72%,rgba(68,115,255,.10),transparent 30%),
    linear-gradient(180deg,#040813 0%,#050914 48%,#030711 100%);
}

#page-home .r3-academy-story-motion::before,
#page-home .r3-academy-story-motion::after,
#page-home .r3-story-stage-background span,
#page-home .r3-story-stage-shell::before,
#page-home .r3-story-stage-shell::after,
#page-home .r3-story-copy-panel::before,
#page-home .r3-story-motion-frame::before,
#page-home .r3-story-motion-frame::after {
  content:"";
  position:absolute;
  pointer-events:none;
}

#page-home .r3-academy-story-motion::before {
  inset:0;
  z-index:-3;
  opacity:.34;
  background-image:
    linear-gradient(rgba(96,140,218,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,140,218,.045) 1px,transparent 1px);
  background-size:92px 92px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}

#page-home .r3-academy-story-motion::after {
  left:50%;
  top:0;
  width:min(1240px,88vw);
  height:100%;
  transform:translateX(-50%);
  z-index:-2;
  background:
    radial-gradient(ellipse at center,rgba(58,124,226,.10) 0 16%,transparent 58%),
    linear-gradient(180deg,transparent,rgba(3,8,18,.22) 40%,transparent 100%);
}

#page-home .r3-story-stage-background {
  position:absolute;
  inset:0;
  z-index:-1;
}

#page-home .r3-story-stage-grid {
  inset:10% 5% 8%;
  border-radius:34px;
  opacity:.22;
  background:
    linear-gradient(rgba(86,129,214,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(86,129,214,.08) 1px,transparent 1px);
  background-size:130px 130px;
  -webkit-mask-image:radial-gradient(circle at center,#000 54%,transparent 100%);
  mask-image:radial-gradient(circle at center,#000 54%,transparent 100%);
}

#page-home .r3-story-stage-beam {
  top:14%;
  bottom:16%;
  width:18%;
  filter:blur(42px);
  opacity:.24;
}

#page-home .r3-story-stage-beam-a {
  left:-4%;
  background:linear-gradient(180deg,rgba(73,146,255,.34),rgba(73,146,255,0));
  transform:rotate(3deg);
}

#page-home .r3-story-stage-beam-b {
  right:-3%;
  background:linear-gradient(180deg,rgba(52,227,209,.26),rgba(52,227,209,0));
  transform:rotate(-4deg);
}

#page-home .r3-story-stage-orbit {
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(97,144,218,.10);
}

#page-home .r3-story-stage-orbit-a {
  width:min(980px,86vw);
  height:min(980px,86vw);
  box-shadow:0 0 90px rgba(58,124,226,.05);
}

#page-home .r3-story-stage-orbit-b {
  width:min(740px,68vw);
  height:min(740px,68vw);
  border-color:rgba(52,227,209,.10);
}

#page-home .r3-story-heading {
  max-width:980px;
  margin-bottom:clamp(46px,5vw,70px);
}

#page-home .r3-story-heading .kicker {
  margin-bottom:14px;
}

#page-home .r3-story-heading h2 {
  max-width:880px;
}

#page-home .r3-story-heading-copy {
  max-width:760px;
  margin-top:18px;
  color:rgba(204,216,237,.72);
  font-size:16px;
  line-height:1.78;
}

#page-home .r3-story-grid {
  align-items:stretch;
  grid-template-columns:minmax(0,1.16fr) minmax(310px,.84fr);
  gap:clamp(34px,4vw,54px);
}

#page-home .r3-story-motion-card,
#page-home .r3-story-stage-shell,
#page-home .r3-story-copy-panel {
  position:relative;
  border:0;
  background:transparent;
  box-shadow:none;
}

#page-home .r3-story-stage-shell {
  padding:18px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(8,14,28,.90),rgba(4,9,18,.92));
  border:1px solid rgba(125,167,232,.14);
  box-shadow:
    0 46px 120px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.015) inset,
    0 0 88px rgba(45,117,227,.10);
}

#page-home .r3-story-stage-shell::before {
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(122,189,255,.20),transparent 26%,transparent 72%,rgba(52,227,209,.18));
  opacity:.36;
  z-index:-1;
}

#page-home .r3-story-stage-shell::after {
  left:8%;
  right:8%;
  bottom:-26px;
  height:56px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(52,118,227,.26),rgba(52,227,209,.08) 52%,transparent 72%);
  filter:blur(24px);
  z-index:-2;
}

#page-home .r3-story-stage-topline,
#page-home .r3-story-stage-bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

#page-home .r3-story-stage-topline {
  justify-content:flex-start;
  margin-bottom:14px;
}

#page-home .r3-story-stage-topline span,
#page-home .r3-story-stage-bottom span {
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(129,167,226,.14);
  background:rgba(9,16,31,.72);
  color:rgba(193,208,234,.72);
  font-size:10px;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#page-home .r3-story-stage-topline span:first-child,
#page-home .r3-story-stage-bottom span:nth-child(2),
#page-home .r3-story-stage-bottom span:nth-child(4) {
  color:rgba(52,227,209,.86);
}

#page-home .r3-story-motion-frame {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:24px;
  border:1px solid rgba(125,167,232,.18);
  background:#030813;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 60px rgba(0,0,0,.26),
    0 0 72px rgba(50,121,224,.10);
}

#page-home .r3-story-motion-frame::before {
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(5,10,21,.10),transparent 24%,transparent 72%,rgba(4,8,18,.30) 100%),
    radial-gradient(circle at 50% 50%,transparent 0 56%,rgba(3,7,16,.18) 100%);
}

#page-home .r3-story-motion-frame::after {
  z-index:3;
  top:-12%;
  bottom:-12%;
  left:-24%;
  width:22%;
  transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(122,195,255,.12),rgba(52,227,209,.14),transparent);
  filter:blur(11px);
  animation:r3StoryFrameSweep 8.8s ease-in-out infinite;
}

#page-home .r3-story-motion-video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#030813;
}

#page-home .r3-story-frame-corner {
  width:46px;
  height:46px;
  z-index:4;
  border:1px solid rgba(93,147,234,.30);
  opacity:.68;
}

#page-home .r3-story-frame-corner-a {
  top:14px;
  left:14px;
  border-right:0;
  border-bottom:0;
  border-top-left-radius:16px;
}

#page-home .r3-story-frame-corner-b {
  right:14px;
  bottom:14px;
  border-left:0;
  border-top:0;
  border-bottom-right-radius:16px;
}

#page-home .r3-story-motion-status {
  position:absolute;
  z-index:5;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(133,170,226,.16);
  border-radius:999px;
  background:rgba(6,12,24,.64);
  color:rgba(201,214,236,.70);
  font-size:10px;
  font-weight:760;
  letter-spacing:.14em;
  backdrop-filter:blur(12px);
}

#page-home .r3-story-motion-status span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#34e3d1;
  box-shadow:0 0 0 5px rgba(52,227,209,.08),0 0 14px rgba(52,227,209,.35);
  animation:r3StoryStatusPulse 2.2s ease-in-out infinite;
}

#page-home .r3-story-stage-bottom {
  margin-top:14px;
}

#page-home .r3-story-copy-panel {
  align-self:stretch;
  padding:26px 24px 24px;
  border-radius:26px;
  border:1px solid rgba(121,164,224,.13);
  background:linear-gradient(180deg,rgba(7,13,25,.86),rgba(5,9,18,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 24px 64px rgba(0,0,0,.28);
}

#page-home .r3-story-copy-panel::before {
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 82% 14%,rgba(52,227,209,.09),transparent 26%),
    radial-gradient(circle at 14% 88%,rgba(82,129,255,.10),transparent 32%);
  opacity:1;
}

#page-home .r3-story-copy {
  position:relative;
  z-index:1;
}

#page-home .r3-story-copy h3 {
  max-width:540px;
  font-size:clamp(34px,3vw,50px);
  line-height:1.04;
  letter-spacing:-.04em;
}

#page-home .r3-story-copy p {
  max-width:540px;
  color:rgba(203,216,238,.74);
  font-size:15px;
  line-height:1.82;
}

#page-home .r3-story-microstats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:28px 0 26px;
}

#page-home .r3-story-microstats article {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:88px;
  padding:16px 14px;
  border-radius:18px;
  border:1px solid rgba(121,164,224,.12);
  background:linear-gradient(180deg,rgba(10,17,33,.78),rgba(7,12,24,.92));
}

#page-home .r3-story-microstats strong {
  color:#f5f8ff;
  font-size:26px;
  letter-spacing:-.04em;
}

#page-home .r3-story-microstats span {
  color:rgba(188,203,228,.62);
  font-size:11px;
  font-weight:720;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#page-home .r3-story-feature-list {
  margin:0 0 28px;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

#page-home .r3-story-feature-list li {
  position:relative;
  padding-left:18px;
  color:rgba(200,213,235,.72);
  font-size:14px;
  line-height:1.68;
}

#page-home .r3-story-feature-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,#65b1ff,#34e3d1);
  box-shadow:0 0 12px rgba(52,227,209,.34);
}

#page-home .r3-story-principles {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:0 0 28px;
  color:rgba(190,205,229,.58);
  font-size:9px;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#page-home .r3-story-principles span:nth-of-type(1),
#page-home .r3-story-principles span:nth-of-type(3),
#page-home .r3-story-principles span:nth-of-type(5) {
  color:rgba(101,177,255,.84);
}

#page-home .r3-story-principles span:nth-of-type(2),
#page-home .r3-story-principles span:nth-of-type(4) {
  color:rgba(52,227,209,.84);
}

#page-home .r3-story-principles i {
  width:16px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,156,226,.30),transparent);
}

@keyframes r3StoryFrameSweep {
  0%,14% { left:-26%;opacity:0; }
  24% { opacity:.72; }
  64% { left:110%;opacity:.34; }
  74%,100% { left:110%;opacity:0; }
}

@keyframes r3StoryStatusPulse {
  0%,100% { opacity:.55;transform:scale(.92); }
  50% { opacity:1;transform:scale(1.08); }
}

@media (max-width:1024px) {
  #page-home .r3-story-grid {
    grid-template-columns:1fr;
  }
  #page-home .r3-story-copy-panel {
    padding:24px 20px 22px;
  }
}

@media (max-width:680px) {
  #page-home .r3-academy-story-motion {
    padding:84px 0;
  }
  #page-home .r3-story-stage-shell {
    padding:12px;
    border-radius:22px;
  }
  #page-home .r3-story-motion-frame {
    border-radius:18px;
  }
  #page-home .r3-story-motion-status {
    left:12px;
    bottom:12px;
    font-size:8px;
  }
  #page-home .r3-story-copy h3 {
    font-size:clamp(30px,9vw,40px);
  }
  #page-home .r3-story-microstats {
    grid-template-columns:1fr;
  }
  #page-home .r3-story-stage-topline span,
  #page-home .r3-story-stage-bottom span {
    font-size:9px;
    padding:7px 10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #page-home .r3-story-motion-frame::after,
  #page-home .r3-story-motion-status span {
    animation:none!important;
  }
}