/* =========================================================
   INTERACTIVE EXPERIMENTS
   ========================================================= */

:root {
  --ix-black: #101010;
  --ix-white: #f6f6f3;
  --ix-grey: #8c8c88;
  --ix-line: rgba(255,255,255,.17);
  --ix-blue: #a7ddff;
  --ix-green: #72e6b1;
  --ix-red: #ff6578;
}


.interactive-case {
  background: var(--ix-black);
  color: var(--ix-white);
}


.interactive-header {
  color: var(--ix-white);
}


.interactive-header.scrolled {
  background: rgba(16,16,16,.9);
  backdrop-filter: blur(12px);
}


/* =========================================================
   SHARED
   ========================================================= */

.interactive-case .case-breadcrumb,
.interactive-case .case-section-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;

  border-top:
          1px solid var(--ix-line);

  color: var(--ix-grey);

  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}


.interactive-case .meta-label {
  display: block;

  margin-bottom: 8px;

  color: var(--ix-grey);

  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* =========================================================
   HERO
   ========================================================= */

.interactive-hero {
  min-height: 94svh;

  padding-top:
          clamp(125px, 16vh, 190px);

  padding-bottom:
          clamp(55px, 6vw, 90px);

  display: flex;
  flex-direction: column;
}


.interactive-title {
  margin: auto 0;

  padding:
          clamp(65px, 8vw, 110px) 0;

  font-size:
          clamp(72px, 11vw, 170px);

  line-height: .79;

  letter-spacing: -.075em;

  font-weight: 500;
}


.interactive-intro-grid {
  display: grid;

  grid-template-columns:
    repeat(12, 1fr);

  gap: 20px;

  align-items: start;
}


.interactive-lead {
  grid-column:
          1 / 6;

  margin: 0;

  font-size:
          clamp(27px, 3vw, 48px);

  line-height: 1.03;

  letter-spacing: -.04em;
}


.interactive-summary {
  grid-column:
          8 / 12;
}


.interactive-summary p {
  margin:
          0 0 16px;

  font-size:
          clamp(15px, 1.05vw, 18px);

  line-height: 1.55;

  color: #c9c9c5;
}


.interactive-meta {
  display: grid;

  grid-template-columns:
    3fr 4fr 4fr;

  gap: 24px;

  margin-top:
          clamp(62px, 8vw, 110px);

  padding-top: 14px;

  border-top:
          1px solid var(--ix-line);
}


.interactive-meta p {
  margin: 0;

  font-size: 13px;

  line-height: 1.45;
}


/* =========================================================
   LIGHT SECTION
   ========================================================= */

.interactive-section {
  padding-top:
          clamp(80px, 10vw, 145px);

  padding-bottom:
          clamp(38px, 4vw, 62px);
}


.interactive-section-light {
  background: var(--ix-white);
  color: var(--ix-black);
}


.interactive-section-light .case-section-label {
  border-color:
          rgba(16,16,16,.2);

  color: #777773;
}


.approach-grid {
  display: grid;

  grid-template-columns:
    7fr 4fr 1fr;

  gap: 24px;

  align-items: end;

  margin-top:
          clamp(45px, 6vw, 82px);
}


.interactive-statement {
  margin: 0;

  max-width: 1050px;

  font-size:
          clamp(42px, 6vw, 92px);

  line-height: .93;

  letter-spacing: -.06em;

  font-weight: 500;
}


.approach-copy {
  grid-column:
          2 / 3;
}


.approach-copy p {
  margin:
          0 0 18px;

  font-size:
          clamp(15px, 1.1vw, 18px);

  line-height: 1.55;
}


.process-strip {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 11px;

  margin-top:
          clamp(70px, 9vw, 120px);

  padding-top: 15px;

  border-top:
          1px solid rgba(16,16,16,.2);
}


.process-strip span {
  font-size:
          clamp(16px, 1.7vw, 25px);

  letter-spacing: -.025em;
}


.process-strip span:nth-child(even) {
  color: #9b9b96;
}


/* =========================================================
   EXPERIMENTS
   ========================================================= */

.experiment-section {
  padding-top:
          clamp(95px, 12vw, 180px);

  padding-bottom:
          clamp(46px, 5vw, 75px);

  overflow: hidden;
}


.experiment-light {
  background: #0a101c;
  color: var(--ix-white);
}


.experiment-maze {
  background: #050505;
  color: var(--ix-white);
}


.experiment-tanks {
  background: #111812;
  color: var(--ix-white);
}


.experiment-head {
  display: grid;

  grid-template-columns:
    1fr 7fr 4fr;

  gap: 24px;

  align-items: start;

  margin-bottom:
          clamp(50px, 7vw, 95px);
}


.experiment-number {
  color:
          rgba(255,255,255,.45);

  font-size: 12px;

  padding-top: 8px;
}


.experiment-copy {
  grid-column:
          2 / 3;
}


.experiment-kicker {
  display: block;

  margin-bottom: 17px;

  color:
          rgba(255,255,255,.55);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .1em;
}


.experiment-copy h2 {
  margin:
          0 0 24px;

  font-size:
          clamp(55px, 8vw, 125px);

  line-height: .84;

  letter-spacing: -.07em;

  font-weight: 500;
}


.experiment-copy p {
  max-width: 680px;

  margin: 0;

  color:
          rgba(255,255,255,.75);

  font-size:
          clamp(15px, 1.05vw, 18px);

  line-height: 1.55;
}


/* =========================================================
   INTERACTIVE VIDEO
   ========================================================= */

.experiment-video {
  position: relative;

  margin: 0;

  overflow: hidden;

  border:
          1px solid rgba(255,255,255,.15);

  background: #000;
}


.experiment-media-toggle {
  position: relative;

  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--ix-white);

  cursor: pointer;

  text-align: left;
}


.experiment-media-toggle video {
  display: block;

  width: 100%;

  height: auto;

  background: #000;
}


/* Slight dark veil when paused */

.experiment-media-toggle::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
          rgba(0,0,0,.12);

  pointer-events: none;

  transition:
          opacity .25s ease;
}


.experiment-video.is-playing
.experiment-media-toggle::after {
  opacity: 0;
}


/* Play / pause circle */

.experiment-play-icon {
  position: absolute;

  z-index: 3;

  top: 50%;
  left: 50%;

  width: 66px;
  height: 66px;

  display: grid;

  place-items: center;

  transform:
          translate(-50%, -50%);

  border:
          1px solid rgba(255,255,255,.72);

  border-radius: 50%;

  background:
          rgba(0,0,0,.28);

  backdrop-filter:
          blur(10px);

  color: var(--ix-white);

  font-size: 16px;

  line-height: 1;

  transition:
          opacity .25s ease,
          transform .25s ease,
          background .25s ease;
}


.experiment-media-toggle:hover
.experiment-play-icon {
  transform:
          translate(-50%, -50%)
          scale(1.06);

  background:
          rgba(0,0,0,.48);
}


/* Text label */

.experiment-media-label {
  position: absolute;

  z-index: 3;

  left: 18px;
  bottom: 18px;

  padding:
          8px 11px;

  background:
          rgba(0,0,0,.46);

  backdrop-filter:
          blur(10px);

  color: var(--ix-white);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .08em;

  transition:
          opacity .25s ease;
}


/* Hide controls while the video is running */

.experiment-video.is-playing
.experiment-play-icon,
.experiment-video.is-playing
.experiment-media-label {
  opacity: 0;
}


/* Reveal them again on hover */

.experiment-video.is-playing:hover
.experiment-play-icon,
.experiment-video.is-playing:hover
.experiment-media-label {
  opacity: 1;
}


/* Pause symbol while playing */

.experiment-video.is-playing
.experiment-play-icon {
  font-size: 0;
}


.experiment-video.is-playing
.experiment-play-icon::before {
  content: "Ⅱ";

  font-size: 17px;
}


/* Keyboard focus */

.experiment-media-toggle:focus-visible {
  outline:
          2px solid var(--ix-white);

  outline-offset:
          -4px;
}


/* =========================================================
   NOTES
   ========================================================= */

.experiment-notes {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 24px;

  margin-top: 18px;
}


.experiment-notes > div {
  padding-top: 12px;

  border-top:
          1px solid rgba(255,255,255,.16);
}


.experiment-notes p {
  margin: 0;

  max-width: 560px;

  font-size: 13px;

  line-height: 1.5;

  color:
          rgba(255,255,255,.7);
}


/* =========================================================
   MAZE
   ========================================================= */

.maze-layout {
  display: grid;

  grid-template-columns:
    minmax(0,1.6fr)
    minmax(280px,.6fr);

  gap:
          clamp(30px, 5vw, 80px);

  align-items: start;
}


.maze-side {
  min-height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}


.maze-quote {
  margin: 0;

  font-size:
          clamp(27px, 3.2vw, 49px);

  line-height: 1;

  letter-spacing: -.04em;
}


.experiment-notes-vertical {
  grid-template-columns:
    1fr;

  margin-top: 70px;
}


/* =========================================================
   TANKS
   ========================================================= */

.experiment-video-tanks {
  width:
          min(100%, 1050px);

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   SYSTEM
   ========================================================= */

.interactive-system {
  padding-top:
          clamp(90px, 11vw, 165px);

  padding-bottom:
          clamp(55px, 6vw, 90px);

  background:
          var(--ix-black);

  color:
          var(--ix-white);
}


.interactive-system .case-section-label {
  margin-bottom:
          clamp(55px, 7vw, 100px);
}


.system-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.5fr)
    minmax(300px,.6fr);

  gap:
          clamp(50px, 8vw, 125px);

  align-items: end;
}


.system-statement {
  margin: 0;

  max-width: 1000px;

  font-size:
          clamp(46px, 6.5vw, 100px);

  line-height: .91;

  letter-spacing: -.065em;
}


.system-list {
  display: grid;
}


.system-list > div {
  display: grid;

  grid-template-columns:
    45px 1fr;

  gap: 12px;

  padding:
          16px 0;

  border-top:
          1px solid var(--ix-line);
}


.system-list > div:last-child {
  border-bottom:
          1px solid var(--ix-line);
}


.system-list span {
  color:
          var(--ix-grey);

  font-size: 10px;
}


.system-list strong {
  font-size: 17px;

  font-weight: 400;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.capability-grid {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top:
          clamp(50px, 6vw, 90px);
}


.capability-grid span {
  padding:
          12px 18px;

  border:
          1px solid rgba(16,16,16,.25);

  border-radius: 999px;

  font-size: 12px;
}


.interactive-closing {
  margin-top:
          clamp(90px, 12vw, 170px);
}


.interactive-closing p {
  margin: 0;

  max-width: 1050px;

  font-size:
          clamp(46px, 7vw, 105px);

  line-height: .91;

  letter-spacing: -.065em;
}


.interactive-case .case-live-link {
  display: flex;

  justify-content: flex-end;

  margin-top: 34px;
}


.interactive-case .case-live-link a {
  padding-bottom: 4px;

  border-bottom:
          1px solid currentColor;

  font-size: 13px;
}


/* =========================================================
   NEXT
   ========================================================= */

.interactive-case .case-next {
  min-height: 46svh;

  padding-top:
          clamp(70px, 9vw, 130px);

  padding-bottom: 34px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: end;

  gap: 40px;
}


.interactive-case .back-work,
.interactive-case .next-live {
  display: flex;

  gap: 20px;

  align-items: center;
}


.interactive-case .back-work > span {
  font-size: 32px;
}


.interactive-case .back-work strong,
.interactive-case .next-live strong {
  display: block;

  font-size:
          clamp(25px, 3vw, 44px);

  letter-spacing: -.04em;

  font-weight: 500;
}


.interactive-case .next-live {
  justify-self: end;

  text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .interactive-title {
    font-size:
            clamp(72px, 15vw, 135px);
  }


  .interactive-intro-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .interactive-lead,
  .interactive-summary {
    grid-column:
            auto;
  }


  .interactive-summary {
    max-width: 650px;
  }


  .interactive-meta {
    grid-template-columns:
      1fr;
  }


  .approach-grid,
  .experiment-head,
  .system-grid {
    grid-template-columns:
      1fr;
  }


  .approach-copy,
  .experiment-copy {
    grid-column:
            auto;
  }


  .experiment-number {
    margin-bottom:
            -8px;
  }


  .maze-layout {
    grid-template-columns:
      1fr;
  }


  .maze-side {
    gap: 60px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .interactive-hero {
    min-height: auto;

    padding-top:
            115px;
  }


  .interactive-title {
    padding:
            60px 0;

    font-size:
            17vw;
  }


  .interactive-section {
    padding-top:
            78px;

    padding-bottom:
            28px;
  }


  .experiment-section {
    padding-top:
            88px;

    padding-bottom:
            34px;
  }


  .experiment-copy h2 {
    font-size:
            18vw;
  }


  .experiment-notes {
    grid-template-columns:
      1fr;
  }


  .process-strip {
    gap: 8px;
  }


  .process-strip span {
    font-size:
            15px;
  }


  .experiment-play-icon {
    width: 54px;
    height: 54px;
  }


  .experiment-media-label {
    left: 12px;
    bottom: 12px;
  }


  .interactive-case .case-next {
    grid-template-columns:
      1fr;

    min-height:
            40svh;
  }


  .interactive-case .next-live {
    justify-self:
            start;

    text-align:
            left;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .experiment-play-icon,
  .experiment-media-label,
  .experiment-media-toggle::after {
    transition: none;
  }

}