/*
  ITERACJA 102
  Rozproszone tło sekcji 02, rozwijany program, korekta mobilnej belki kadry.
*/

/* Sekcja 02: mechanizm jest warstwą całej sceny, nie osobnym blokiem. */
.principle-paper-stage{isolation:isolate}
.principle-paper-stage>.principle-machine{
  position:absolute!important;
  z-index:0;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden;
  pointer-events:none;
  perspective:1100px;
  transform-style:preserve-3d
}
.principle-paper-stage>.principle-layout{
  position:relative;
  z-index:3;
  display:block;
  min-height:680px
}
.principle-paper-stage .principle-copy{
  width:min(650px,46vw);
  margin-left:auto;
  padding-top:65px
}

/* Pełne moduły pozostają poza polem tekstowym. */
#gds-living-machine .principle .approved-reaction-stage .rm-a{right:-7%;top:4%;width:38vw}
#gds-living-machine .principle .approved-reaction-stage .rm-b{left:-9%;bottom:-24%;width:46vw}
#gds-living-machine .principle .approved-reaction-stage .rm-c{left:31%;right:auto;top:35%;width:18vw}
#gds-living-machine .principle .approved-reaction-stage .rs-black{left:5%;top:20%;width:clamp(142px,13vw,214px)}
#gds-living-machine .principle .approved-reaction-stage .ee-window-square{left:21%;right:auto;bottom:9%;width:clamp(134px,11vw,178px)}
#gds-living-machine .principle .approved-reaction-stage .rs-brown{left:39%;bottom:4%;width:clamp(92px,8vw,138px)}
#gds-living-machine .principle .approved-reaction-stage .reaction-trigger{left:7%;top:43%}
#gds-living-machine .principle .approved-reaction-stage .impact-glow{left:calc(7% + 241px);top:calc(43% - 9px)}
#gds-living-machine .principle .approved-reaction-stage .reciprocator-bank{left:4%;right:auto;top:58%;width:min(300px,25vw)}
#gds-living-machine .principle .approved-reaction-stage .mechanical-wave{left:34%;right:auto;top:auto;bottom:15%}
#gds-living-machine .principle .approved-reaction-stage .edge-morph{left:52%;top:69%}
#gds-living-machine .principle .approved-reaction-stage .mass-path-square{left:15%;bottom:6%}
#gds-living-machine .principle .approved-reaction-stage .maintenance-bay{left:46%;bottom:3%}
#gds-living-machine .principle .approved-reaction-stage .foreground-gate{right:0;top:7%;height:86%}

/* Delikatne elementy mogą przechodzić pod tekstem. */
.principle-drift{position:absolute;display:block;pointer-events:none;will-change:transform,opacity}
.pd-a{left:2%;top:8%;width:31%;height:8%;background:rgba(50,36,28,.055);animation:principle-drift-x 31s ease-in-out -7s infinite alternate}
.pd-b{left:43%;top:15%;width:19%;aspect-ratio:1;background:rgba(175,145,117,.075);animation:principle-drift-y 37s ease-in-out -21s infinite alternate}
.pd-c{right:-5%;top:24%;width:29%;height:11%;background:rgba(50,36,28,.045);animation:principle-drift-x 43s ease-in-out -13s infinite alternate}
.pd-d{left:19%;top:47%;width:44%;height:5%;background:rgba(190,173,156,.11);animation:principle-drift-x 29s ease-in-out -19s infinite alternate}
.pd-e{right:9%;top:48%;width:17%;aspect-ratio:1;background:rgba(0,0,0,.035);animation:principle-drift-y 39s ease-in-out -4s infinite alternate}
.pd-f{left:-4%;top:72%;width:27%;aspect-ratio:1;background:rgba(50,36,28,.045);animation:principle-drift-y 45s ease-in-out -26s infinite alternate}
.pd-g{left:54%;bottom:8%;width:33%;height:7%;background:rgba(175,145,117,.07);animation:principle-drift-x 35s ease-in-out -12s infinite alternate}
.pd-h{right:1%;bottom:-8%;width:25%;aspect-ratio:1;background:rgba(241,90,41,.028);animation:principle-drift-y 47s ease-in-out -31s infinite alternate}
@keyframes principle-drift-x{to{transform:translate3d(5vw,-1.5vh,0);opacity:.72}}
@keyframes principle-drift-y{to{transform:translate3d(-1.5vw,4vh,0);opacity:.76}}

/* Program: każde pole rozwija opis w dół. */
.program-index{align-items:start}
.program-topic{
  display:block;
  min-height:98px;
  padding:0;
  transition:background .28s ease,border-color .28s ease
}
.program-topic-toggle{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:28px 11px minmax(0,1fr);
  gap:13px;
  align-items:start;
  width:100%;
  min-height:97px;
  padding:20px 17px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer
}
.program-topic-toggle b{color:rgba(247,236,222,.42);font:600 10px/1.25 var(--display);letter-spacing:.08em}
.program-topic-toggle i{width:9px;aspect-ratio:1;margin-top:2px;background:var(--orange)}
.program-topic-toggle span{font:600 14px/1.24 var(--display);letter-spacing:.015em;text-transform:uppercase}
.program-topic-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
.program-topic-detail{
  position:relative;
  z-index:2;
  max-height:0;
  margin:0;
  padding:0 18px 0 69px;
  overflow:hidden;
  color:rgba(247,236,222,.72);
  font:400 14px/1.5 var(--text);
  opacity:0;
  transform:translateY(-8px);
  transition:max-height .48s cubic-bezier(.22,.72,.18,1),padding .38s ease,opacity .25s ease,transform .38s ease
}
.program-topic.is-open{background:rgba(0,0,0,.19);border-color:rgba(241,90,41,.32)}
.program-topic.is-open .program-topic-detail{
  max-height:240px!important;
  padding-bottom:24px!important;
  opacity:1!important;
  transform:none!important
}
@media(hover:hover) and (pointer:fine){
  .program-topic:hover{background:rgba(0,0,0,.19);border-color:rgba(241,90,41,.32)}
  .program-topic:hover .program-topic-detail{max-height:240px;padding-bottom:24px;opacity:1;transform:none}
}

/* Belka wykładowców: prawa komórka pozostaje kwadratem i nie zostawia ogona. */
.faculty-gateway-link{padding-right:0}
.faculty-gateway-arrow{background:var(--orange);color:#000}
.faculty-gateway-arrow svg{display:block;width:48%;height:auto}
.faculty-gateway-link:hover .faculty-gateway-arrow,
.faculty-gateway-link:focus-visible .faculty-gateway-arrow{background:#e45125;color:#000}

@media(max-width:680px){
  .principle-paper-stage{min-height:0;padding:52px 22px 62px}
  .principle-paper-stage .section-rail{top:20px}
  .principle-paper-stage>.principle-layout{min-height:0;padding:58px 0 330px}
  .principle-paper-stage .principle-copy{width:100%;margin:0;padding:0}
  #gds-living-machine .principle .approved-reaction-stage .rm-a{left:-12%;right:auto;top:4%;width:68%}
  #gds-living-machine .principle .approved-reaction-stage .rm-b{left:24%;bottom:-8%;width:92%}
  #gds-living-machine .principle .approved-reaction-stage .rm-c{left:52%;top:38%;width:48%}
  #gds-living-machine .principle .approved-reaction-stage .rs-black{left:5%;top:auto;bottom:174px;width:31%}
  #gds-living-machine .principle .approved-reaction-stage .ee-window-square{left:auto;right:3%;bottom:22px;width:31%}
  #gds-living-machine .principle .approved-reaction-stage .rs-brown{left:42%;bottom:38px;width:22%}
  #gds-living-machine .principle .approved-reaction-stage .reaction-trigger{left:7%;top:auto;bottom:222px}
  #gds-living-machine .principle .approved-reaction-stage .impact-glow{left:calc(7% + 130px);top:auto;bottom:214px}
  #gds-living-machine .principle .approved-reaction-stage .reciprocator-bank{left:4%;right:auto;top:auto;bottom:65px;width:58%}
  #gds-living-machine .principle .approved-reaction-stage .mechanical-wave{left:auto;right:-2%;top:auto;bottom:114px}
  #gds-living-machine .principle .approved-reaction-stage .edge-morph{left:8%;top:auto;bottom:285px}
  #gds-living-machine .principle .approved-reaction-stage .mass-path-square{left:17%;bottom:26px}
  #gds-living-machine .principle .approved-reaction-stage .maintenance-bay{left:43%;bottom:8px}
  #gds-living-machine .principle .approved-reaction-stage .foreground-gate{right:-1%;top:auto;bottom:0;height:305px}
  .pd-a{top:3%;width:62%}.pd-b{left:47%;top:15%;width:48%}.pd-c{top:31%;width:55%}.pd-d{left:-6%;top:48%;width:78%}.pd-e{right:3%;top:56%;width:36%}.pd-f{top:67%;width:49%}.pd-g{left:16%;bottom:12%;width:71%}.pd-h{right:-11%;bottom:2%;width:54%}

  .program-topic-toggle{grid-template-columns:27px 10px minmax(0,1fr);min-height:76px;padding:17px 14px}
  .program-topic-toggle span{font-size:13px}
  .program-topic-detail{padding-left:65px;padding-right:16px;font-size:14px}
  .program-topic.is-open .program-topic-detail{max-height:300px!important;padding-bottom:21px!important}

  .faculty-gateway{--gateway-height:92px}
  .faculty-gateway-link{grid-template-columns:92px minmax(0,1fr) 92px;width:100%;height:92px;min-height:92px;padding:0}
  .faculty-gateway-copy{padding:14px 13px}
  .faculty-gateway-copy strong{font-size:clamp(22px,6.2vw,29px)}
  .faculty-gateway-arrow{align-self:stretch;width:92px;height:92px}
}

@media(prefers-reduced-motion:reduce){
  .principle-drift{animation:none!important}
  .program-topic-detail{transition:none}
}