/* Three real moments arranged as a repeating round inside the castle. */
.round-loop {position:relative;z-index:2;isolation:isolate;padding:40px 32px 100px;scroll-margin-top:35px;}
.round-loop::before {content:"";position:absolute;inset:-110px 0 -180px;z-index:-2;background:url('../assets/descent/rooftops.webp') center/cover;opacity:.42;mask-image:linear-gradient(transparent,#000 19%,#000 78%,transparent);pointer-events:none;}
.round-loop::after {content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#080d12aa,transparent 70%);pointer-events:none;}
.round-loop .round-cycle {position:relative;max-width:1140px;margin:auto;}
.round-loop ol {position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15%;row-gap:72px;margin:0;padding:0;list-style:none;}
.round-step {position:relative;min-width:0;--step-color:#d9b47c;}
.round-step:nth-child(2) {--step-color:#e79c6a;}.round-step:nth-child(3) {--step-color:#c7abe9;grid-column:1/-1;width:50%;justify-self:center;}
.round-frame {position:relative;aspect-ratio:16/9;border:1px solid #a68a5e80;padding:4px;background:#272a25;box-shadow:0 0 0 3px #15171bb0,0 16px 45px #0007;transition:border-color .2s,box-shadow .2s;}
.round-step.is-active .round-frame {border-color:var(--step-color);box-shadow:0 0 0 3px #15171bd0,0 0 30px #d5a76722,0 16px 45px #0007;}
.round-frame video {display:block;width:100%;height:100%;object-fit:cover;}
.round-frame::after {content:"";position:absolute;inset:4px;box-shadow:inset 0 0 20px #080d1233;pointer-events:none;}
.round-progress {position:absolute;left:4px;right:4px;bottom:4px;height:3px;background:#0d1114b0;pointer-events:none;}
.round-progress::after {content:"";display:block;width:var(--progress,0%);height:100%;background:var(--step-color);}
.round-control {position:absolute;right:12px;bottom:13px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid #cbb5809c;border-radius:50%;background:#111823e8;color:#f9ebcb;cursor:pointer;}
.round-control svg {width:19px;height:19px;fill:currentColor;}
.round-control:hover {background:#41352ee8;}.round-control:focus-visible {outline:2px solid #fff1ce;outline-offset:4px;}
.round-control:disabled {opacity:.5;cursor:default;}
.round-caption {position:relative;margin:22px 0 0;padding-left:53px;}
.round-number {position:absolute;left:0;top:-2px;font:italic 29px/1.2 Georgia,serif;color:var(--step-color);opacity:.8;}
.round-step h3 {margin:0;color:#f2e4ce;font:27px/1.23 Georgia,serif;letter-spacing:-.4px;}
.round-step h3 span {display:block;}
.round-step p {margin:12px 0 0;max-width:340px;color:#bfb8aa;font:13px/1.6 Arial,sans-serif;}
.round-step:nth-child(3) .round-caption {max-width:485px;margin-inline:auto;}
.round-routes {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.round-routes path {fill:none;stroke:#cda870;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.5;}
.round-routes marker path {fill:#cda870;stroke:none;opacity:1;}
.round-routes .flow-light {stroke:#f1d49c;stroke-dasharray:3 10;opacity:0;animation:round-flow 3s linear infinite;}
.round-loop[data-active="0"] [data-route="0"].flow-light,.round-loop[data-active="1"] [data-route="1"].flow-light,.round-loop[data-active="2"] [data-route="2"].flow-light {opacity:.9;}
.round-return {display:none;}
@keyframes round-flow {to {stroke-dashoffset:-52;}}
@media(max-width:1000px) {
 .round-loop {padding-inline:28px;}.round-loop ol {column-gap:12%;row-gap:64px;}
 .round-caption {padding-left:39px;}.round-number {font-size:24px;}.round-step h3 {font-size:23px;}.round-step p {font-size:12px;}
 .round-step:nth-child(3) {width:57%;}
}
@media(max-width:700px) {
 .round-loop {padding:35px 22px 80px 30px;}.round-loop::before {opacity:.3;}
 .round-loop ol {display:flex;flex-direction:column;gap:69px;padding-left:10px;}
 .round-step:nth-child(3) {width:100%;}.round-caption {margin-top:18px;padding-left:39px;}
 .round-step h3 {font-size:25px;}.round-step p {font-size:13px;max-width:none;}
 .round-step:not(:last-child)::after {content:"↓";position:absolute;bottom:-51px;left:50%;color:#c5a574;font:31px Georgia,serif;}
 .round-routes {display:none;}.round-return {display:block;position:absolute;left:-21px;top:12%;width:19px;height:79%;overflow:visible;pointer-events:none;}
 .round-return path {fill:none;stroke:#c3a47780;stroke-width:1;vector-effect:non-scaling-stroke;}.round-return .return-head {stroke:#d5b785;}
}
@media(prefers-reduced-motion:reduce) {.round-routes .flow-light {animation:none;}.round-frame {transition:none;}}
.motion-paused .round-routes .flow-light {animation:none;}
