.quilia-motion-story {
  position: relative;
  z-index: 2;
  height: 480svh;
  color: #fff;
  background: #070707;
}

.qms-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 50%, rgba(190,220,235,.085), transparent 27%),
    #070707;
}

.qms-stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  background: url('/wp-content/uploads/2025/10/e4e08563-3f35-4b15-bfe7-08a89647ccb8-2-2.png') 92% center / auto 82% no-repeat;
  opacity: .28;
  transition: opacity .7s cubic-bezier(.16,1,.3,1);
}

.qms-stage.is-webgl::before { opacity: .02; }

.qms-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.qms-stage.is-webgl .qms-canvas { opacity: 1; }

.qms-content {
  position: relative;
  z-index: 3;
  width: min(100%, 1440px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px);
  pointer-events: none;
}

.qms-index {
  position: absolute;
  top: clamp(28px, 5vw, 72px);
  right: clamp(28px, 4vw, 64px);
  margin: 0;
  color: #a9a9a9;
  font: 500 14px/1 Barlow, system-ui, sans-serif;
  letter-spacing: .12em;
}

.qms-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.qms-panel:first-of-type {
  opacity: 1;
}

.qms-main {
  position: absolute;
  top: 50%;
  left: 0;
  width: min(48vw, 690px);
  transform: translateY(-50%);
}

.qms-title-wrap {
  position: relative;
  display: flex;
  width: fit-content;
  overflow: visible;
  padding:0 5px 0 0;
}

.qms-title {
  margin: 0;
  font-family: Barlow, system-ui, sans-serif;
  font-size: calc(100px + (120 - 100) * ((100vw - 330px) / 1590));
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.qms-panel--skills .qms-title { color: #a9a9a9; }

.qms-copy {
  max-width: 620px;
  margin: 28px 0 0;
  color: #d9d9d9;
  font: 500 clamp(17px,1.45vw,26px)/1.3 Barlow, system-ui, sans-serif;
}

.qms-aside {
  width: min(100%, 520px);
  margin-top: clamp(26px, 4vh, 44px);
  color: #d9d9d9;
  text-align: left;
}

.qms-aside span {
  display: block;
  margin-bottom: 14px;
  color: #6a6a6a;
  font: 600 12px/1 Barlow, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.qms-aside strong {
  display: block;
  font: italic 700 clamp(20px,1.7vw,30px)/1.15 Barlow, system-ui, sans-serif;
  letter-spacing: 0;
}

.qms-aside p {
  margin: 12px 0 0;
  color: #a9a9a9;
  font: 400 clamp(14px,.95vw,17px)/1.4 Barlow, system-ui, sans-serif;
}

.qms-line {
  position: absolute;
  right: 0;
  bottom: -.08em;
  left: 0;
  height: 4px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 767px) {
  .quilia-motion-story { height: 400svh; }
  .qms-stage::before { background-position: 105% 64%; background-size: auto 68%; opacity: .2; }
  .qms-panel,
  .qms-panel--skills { inset: 0; }
  .qms-main,
  .qms-panel--skills .qms-main { top: 43%; right: 0; left: 0; width: auto; }
  .qms-title { font-size: clamp(62px, 20vw, 96px); }
  .qms-copy { max-width: 88%; font-size: 17px; }
  .qms-aside,
  .qms-panel--skills .qms-aside { width: min(88%, 360px); margin-top: 24px; text-align: left; }
  .qms-aside p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quilia-motion-story { height: auto; min-height: 100svh; }
  .qms-stage { min-height: 100svh; }
  .qms-canvas { display: none; }
  .qms-panel:not(.qms-panel--impact) { display: none; }
  .qms-panel--impact { opacity: 1; transform: translateY(0); }
}