/* ROCKN.BASE / motion layers and rough industrial atmosphere */

.motion-heading {
  perspective: 1100px;
  transform: translate3d(var(--head-x, 0px), var(--head-y, 0px), 0);
  transform-style: preserve-3d;
}
.motion-line {
  display: block;
  overflow: hidden;
  padding-block: .12em .15em;
  margin-block: -.12em -.15em;
  perspective: 1000px;
}
.motion-line-inner {
  display: block;
  transform-origin: 50% 100%;
  opacity: 1;
  transform: none;
}
.motion-ready .motion-heading:not(.is-visible) .motion-line-inner {
  opacity: 0;
  transform: translate3d(0, 90px, 0) rotateX(8deg);
}
.motion-ready .motion-heading .motion-line-inner {
  transition:
    transform .9s cubic-bezier(.16, .8, .17, 1),
    opacity .65s ease;
  transition-delay: calc(var(--line-index, 0) * 80ms);
  backface-visibility: hidden;
}
.motion-ready .motion-heading.is-visible .motion-line-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg);
}
.scene-shift {
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--sr, 0deg));
  transform-origin: 50% 50%;
}

/* Cards keep a separate motion surface from the photograph inside. */
.format-card,
.format-card:hover,
.format-card:focus-within {
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) translateY(calc(var(--card-lift, 0px) + var(--card-enter, 0px)))
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: 50% 50%;
  transition: transform .25s ease-out, opacity .8s ease, border-color .25s, box-shadow .25s;
  box-shadow: 0 16px 35px #0004;
}
.motion-card { --card-enter: 0px; opacity: 1; }
.motion-ready .motion-card:not(.is-visible) { --card-enter: 60px; opacity: 0; }
.motion-ready .motion-card.is-visible { --card-enter: 0px; opacity: 1; }
.format-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border: 1px solid transparent;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 20%),
    #ff7a201b, transparent 58%);
  opacity: .45;
  transition: opacity .3s, border-color .3s;
}
.format-card:hover::before,
.format-card:focus-within::before {
  border-color: #ff59005c;
  opacity: 1;
}
.format-card:hover,
.format-card:focus-within {
  box-shadow: 0 23px 48px #0008, 0 0 32px #ff59000c;
}
.format-photo { isolation: isolate; }
.format-card .format-photo img,
.format-card:hover .format-photo img {
  height: calc(100% + 80px);
  margin-top: -40px;
  transform: translateY(var(--photo-y, 0px)) scale(var(--photo-scale, 1.18));
  transform-origin: 50% 50%;
  transition: filter .65s ease;
}
.format-card .photo-online img,
.format-card:hover .photo-online img {
  transform: translateX(-33.333%) translateY(var(--photo-y, 0px))
    scale(var(--photo-scale, 1.18));
}

/* Orange tactical marks sit behind the section content. */
.approach,
.formats,
.first,
.coach,
.faq {
  position: relative;
  isolation: isolate;
}
.approach,
.first,
.coach,
.faq { overflow: clip; }
.formats { overflow: visible; }
.scene-decor {
  position: absolute;
  width: min(45vw, 660px);
  height: min(48vw, 700px);
  right: -8%;
  top: 13%;
  z-index: -1;
  opacity: .5;
  color: #ff5900;
  pointer-events: none;
  transform: translate3d(var(--decor-x, 0px), var(--decor-y, 0px), 0)
    rotate(var(--decor-r, 0deg));
  transform-origin: 50% 50%;
  contain: layout style;
}
.scene-orbit {
  position: absolute;
  width: 77%;
  aspect-ratio: 1;
  left: 11%;
  top: 11%;
  border: 1px solid #ff59004d;
  border-radius: 50%;
  transform: rotate(-25deg) scaleY(.7);
}
.scene-orbit::before,
.scene-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.scene-orbit::before {
  inset: 8%;
  border: 1px dashed #ff590053;
}
.scene-orbit::after {
  inset: -12%;
  border-top: 2px solid #ff6c0c85;
  border-right: 1px solid #ff590026;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  transform: rotate(-40deg);
}
.scene-streak {
  position: absolute;
  top: 52%;
  left: -7%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff59008c 38%, #ff7b20aa 67%, transparent);
  transform: rotate(-34deg);
  transform-origin: center;
}
.scene-streak::before,
.scene-streak::after {
  content: "";
  position: absolute;
  background: #ff59006e;
}
.scene-streak::before {
  right: 18%;
  width: 1px;
  height: 31px;
  top: -15px;
}
.scene-streak::after {
  right: 17%;
  width: 23px;
  height: 1px;
  top: -9px;
  transform: rotate(45deg);
}
.scene-code {
  position: absolute;
  bottom: 11%;
  left: 15%;
  font: 9px/1.5 monospace;
  letter-spacing: .25em;
  color: #ff6d1b8f;
  writing-mode: vertical-rl;
}
.approach .scene-decor { right: -14%; top: 3%; }
.formats .scene-decor {
  right: 0;
  top: -10%;
  width: min(34vw, 500px);
  height: 450px;
  overflow: hidden;
  opacity: .33;
}
.first .scene-decor { right: -17%; top: 25%; opacity: .28; }
.coach .scene-decor { right: -10%; top: -9%; opacity: .28; }
.faq .scene-decor { right: -18%; top: 3%; opacity: .23; }
.section-label { position: relative; }
.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 1px;
  background: linear-gradient(90deg, #ff590096, #ff59001e 44%, transparent 90%);
  transform: scaleX(.05);
  transform-origin: left center;
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.16, .8, .17, 1), opacity .6s;
}
.scene-in-view .section-label::after {
  transform: scaleX(1);
  opacity: .7;
}
.coach-ghost {
  position: absolute;
  right: -1%;
  bottom: -17%;
  z-index: -1;
  color: #ff59000c;
  -webkit-text-stroke: 1px #ff590033;
  font-family: Rockn, 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: min(52vw, 810px);
  line-height: 1;
  letter-spacing: -.09em;
  pointer-events: none;
  transform: translate3d(0, var(--ghost-y, 0px), 0);
  user-select: none;
}

/* A measured progression track for the first training session. */
.steps { position: relative; }
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 5px;
  width: 1px;
  pointer-events: none;
}
.steps::before { background: #45453b; }
.steps::after {
  background: #ff5900;
  box-shadow: 0 0 9px #ff590042;
  transform: scaleY(var(--step-progress, 0));
  transform-origin: center top;
}
.steps li { padding-left: 20px; }
.steps li > span {
  position: relative;
  transition: color .3s, text-shadow .3s;
  color: #7b7b70;
}
.steps li > span::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #77776c;
  border-radius: 50%;
  background: #080808;
  left: -22px;
  top: 8px;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.steps li.is-current > span { color: #ff6613; text-shadow: 0 0 20px #ff59004d; }
.steps li.is-current > span::before {
  background: #ff5900;
  border-color: #ff5900;
  box-shadow: 0 0 12px #ff590088;
}
.faq details {
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, .8, .17, 1), border-color .3s;
}
.faq details[open] { border-color: #7c3c19; }

/* Rough dark metal: a narrow hot edge and a hard charcoal terminator. */
.orb {
  border: 1px solid #f27b306b;
  background:
    radial-gradient(ellipse at 25% 13%, #ffd3a077 0%, transparent 15%),
    radial-gradient(circle at 29% 22%, #dc6e2d 0%, #a73e13 23%, #6b240d 46%,
      #2e120a 66%, #080807 88%);
  box-shadow:
    inset 2px 2px 2px #ffb56e99,
    inset -8px -10px 13px #000c,
    inset 0 0 0 2px #5c260e99,
    7px 16px 0 -11px #000,
    0 25px 34px #000d,
    -5px -4px 25px #e45c0626;
}
.orb::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border-top: 1px solid #ffc4886b;
  border-left: 1px solid #fa7e242b;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: rotate(-17deg);
  pointer-events: none;
}
.orb::after {
  opacity: .84;
  mix-blend-mode: overlay;
  background-size: 96px 96px;
  filter: contrast(1.8);
}
.hero-glow::before {
  content: "";
  position: absolute;
  width: 67%;
  height: 5%;
  left: 12%;
  top: 57%;
  background: radial-gradient(ellipse, #ffe2bd8c 0%, #ff6b1e61 14%, #ff590024 36%, transparent 70%);
  transform: rotate(-32deg);
  filter: blur(3px);
  pointer-events: none;
}
.atmosphere-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: .8;
}
.manifesto .atmosphere-canvas { z-index: 3; opacity: .66; }
.final .atmosphere-canvas { z-index: 1; opacity: .6; }

@media (max-width: 1100px) {
  .scene-decor { width: 52vw; height: 62vw; right: -17%; }
  .format-card .format-photo img,
  .format-card:hover .format-photo img { height: calc(100% + 64px); margin-top: -32px; }
  .coach-ghost { font-size: 62vw; right: -5%; bottom: -8%; }
}
@media (max-width: 760px) {
  .motion-line { padding-bottom: .18em; margin-bottom: -.18em; }
  .motion-ready .motion-heading:not(.is-visible) .motion-line-inner {
    transform: translate3d(0, 65px, 0) rotateX(6deg);
  }
  .scene-decor { width: 85vw; height: 105vw; right: -35%; opacity: .29; }
  .approach .scene-decor { right: -42%; top: 7%; }
  .formats .scene-decor { width: 65vw; height: 330px; right: 0; top: -2%; opacity: .23; }
  .first .scene-decor { top: 48%; right: -47%; opacity: .2; }
  .coach .scene-decor { top: 15%; right: -45%; opacity: .22; }
  .faq .scene-decor { top: 5%; right: -40%; opacity: .17; }
  .scene-code { font-size: 7px; letter-spacing: .15em; }
  .section-label::after { bottom: -16px; }
  .format-card,
  .format-card:hover,
  .format-card:focus-within { box-shadow: 0 14px 30px #0005; }
  .format-card .format-photo img,
  .format-card:hover .format-photo img { height: calc(100% + 60px); margin-top: -30px; }
  .steps li { padding-left: 16px; }
  .steps li > span::before { left: -18px; }
  .coach-ghost { font-size: 95vw; bottom: 3%; right: -16%; opacity: .8; }
  .atmosphere-canvas { opacity: .62; }
  .manifesto .atmosphere-canvas { opacity: .52; }
  .final .atmosphere-canvas { opacity: .45; }
  .orb { box-shadow: inset 2px 2px 2px #ffb56e88, inset -7px -8px 12px #000c,
    inset 0 0 0 2px #5c260e88, 0 18px 25px #000c; }
}

/* Pausing returns content to a complete, readable composition. */
.motion-paused .motion-heading,
.motion-paused .motion-line-inner,
.motion-paused .scene-shift,
.motion-paused .scene-decor,
.motion-paused .coach-ghost,
.motion-paused .format-card,
.motion-paused .format-card:hover,
.motion-paused .format-card:focus-within {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.motion-paused .scene-decor { opacity: .3 !important; }
.motion-paused .coach-ghost { opacity: .65 !important; }
.motion-paused .format-card .format-photo img,
.motion-paused .format-card:hover .format-photo img {
  transform: scale(1.18) !important;
  transition: none !important;
}
.motion-paused .format-card .photo-online img,
.motion-paused .format-card:hover .photo-online img {
  transform: translateX(-33.333%) scale(1.18) !important;
}
.motion-paused .section-label::after { transform: scaleX(1); opacity: .7; transition: none; }
.motion-paused .steps li > span,
.motion-paused .steps li > span::before,
.motion-paused .faq details,
.motion-paused .format-card::before { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-heading,
  .motion-line-inner,
  .scene-shift,
  .scene-decor,
  .coach-ghost,
  .format-card,
  .format-card:hover,
  .format-card:focus-within {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .scene-decor { opacity: .3 !important; }
  .coach-ghost { opacity: .65 !important; }
  .format-card .format-photo img,
  .format-card:hover .format-photo img {
    transform: scale(1.18) !important;
    transition: none !important;
  }
  .format-card .photo-online img,
  .format-card:hover .photo-online img {
    transform: translateX(-33.333%) scale(1.18) !important;
  }
  .section-label::after { transform: scaleX(1); opacity: .7; transition: none; }
  .steps li > span,
  .steps li > span::before,
  .faq details,
  .format-card::before { transition: none !important; }
}

/* Keep the background word centred while its depth layer moves. */
.final-mark.scene-shift{transform:translate3d(calc(-50% + var(--sx,0px)),var(--sy,0px),0)}
.team-spark.scene-shift{animation:none}
.motion-ready .reveal{transition-delay:var(--reveal-delay,0ms)}
.motion-paused .final-mark.scene-shift{transform:translateX(-50%)!important}
@media(prefers-reduced-motion:reduce){.final-mark.scene-shift{transform:translateX(-50%)!important}}
/* Decorative trajectories may leave the section, but never widen the page. */
main{overflow-x:clip}
/* Coarse rubber-like grain replaces the polished sphere finish. */
.orb::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.69' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23rough)'/%3E%3C/svg%3E");background-size:116px 116px;mix-blend-mode:soft-light;filter:contrast(2.4);opacity:.78}