/* =========================================================
   34TH INFANTRY DIVISION
   CLEAN CINEMATIC INTRO
   ========================================================= */


/* =========================================================
   INTRO ROOT
   ========================================================= */

body.intro-open {
  overflow: hidden;
}

#intro.motto-intro {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;

  z-index: 99999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(108, 115, 77, .16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #080a07 0%,
      #090c08 48%,
      #020302 100%
    ) !important;

  color: #eee7d0 !important;

  opacity: 1;
  visibility: visible;

  transition:
    opacity .9s ease,
    visibility .9s ease;
}

#intro.motto-intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

#intro .motto-intro-bg {
  position: absolute !important;
  inset: -8% !important;

  z-index: 0 !important;

  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(177, 157, 95, .14),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 18% 70%,
      rgba(99, 111, 78, .18),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 82% 65%,
      rgba(99, 103, 83, .14),
      transparent 42%
    ) !important;

  animation:
    introBackgroundDrift
    16s
    ease-in-out
    infinite
    alternate !important;
}


/* cinematic vignette */

#intro.motto-intro::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 80;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.42) 0%,
      transparent 22%,
      transparent 69%,
      rgba(0,0,0,.67) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 34%,
      rgba(0,0,0,.66) 100%
    );

  box-shadow:
    inset 0 0 160px rgba(0,0,0,.78);
}


/* =========================================================
   SMOKE
   ========================================================= */

#intro .motto-smoke {
  position: absolute !important;

  display: block !important;

  z-index: 2 !important;

  pointer-events: none !important;

  border-radius: 50% !important;

  filter: blur(55px);

  background:
    radial-gradient(
      ellipse at center,
      rgba(184,185,160,.34) 0%,
      rgba(112,119,94,.22) 32%,
      rgba(70,77,62,.10) 54%,
      transparent 73%
    ) !important;

  mix-blend-mode: screen;

  will-change: transform;
}


#intro .motto-smoke-one {
  width: 76vw !important;
  height: 44vw !important;

  left: -28vw !important;
  right: auto !important;

  top: auto !important;
  bottom: -15vw !important;

  opacity: .54;

  animation:
    introSmokeOne
    19s
    ease-in-out
    infinite
    alternate !important;
}


#intro .motto-smoke-two {
  width: 68vw !important;
  height: 39vw !important;

  right: -25vw !important;
  left: auto !important;

  top: -10vw !important;
  bottom: auto !important;

  opacity: .40;

  animation:
    introSmokeTwo
    23s
    ease-in-out
    infinite
    alternate !important;
}


#intro .motto-smoke-three {
  width: 65vw !important;
  height: 35vw !important;

  left: 14vw !important;
  right: auto !important;

  top: 34% !important;
  bottom: auto !important;

  opacity: .30;

  animation:
    introSmokeThree
    26s
    ease-in-out
    infinite
    alternate !important;
}


#intro .motto-smoke-four {
  width: 72vw !important;
  height: 36vw !important;

  right: -20vw !important;
  left: auto !important;

  top: auto !important;
  bottom: -14vw !important;

  opacity: .34;

  animation:
    introSmokeFour
    29s
    ease-in-out
    infinite
    alternate !important;
}


/* =========================================================
   STATIC / RADIO TEXTURE
   ========================================================= */

#intro .intro-radio-static {
  position: absolute !important;
  inset: 0 !important;

  z-index: 9 !important;

  pointer-events: none !important;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.06) 0,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 4px
    ) !important;

  animation:
    introStatic
    .18s
    steps(2)
    infinite !important;
}


/* =========================================================
   RADIO / MORSE STATUS
   ========================================================= */

#intro .intro-transmission {
  position: absolute !important;

  left: 50% !important;
  top: clamp(18px, 4vh, 40px) !important;

  z-index: 35 !important;

  transform: translateX(-50%);

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 11px !important;

  color:
    rgba(176,174,149,.46) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: .5rem !important;
  font-weight: 900 !important;

  letter-spacing: .18em !important;

  text-transform: uppercase !important;
}


#intro .transmission-light {
  width: 7px !important;
  height: 7px !important;

  flex: 0 0 7px !important;

  border-radius: 50% !important;

  background: #646a54 !important;

  box-shadow:
    0 0 6px rgba(143,150,116,.25) !important;
}


#intro .transmission-code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace !important;

  letter-spacing: .1em !important;
}


#intro.morse-active
.transmission-light {
  background: #e2cc70 !important;

  box-shadow:
    0 0 18px rgba(231,211,115,.98) !important;
}


#intro.morse-active
.intro-transmission {
  color:
    rgba(225,211,154,.9) !important;
}


/* =========================================================
   LANDING IDENTITY
   ========================================================= */

#intro .intro-landing {
  position: absolute !important;

  left: 50% !important;
  top: 42% !important;

  z-index: 25 !important;

  width:
    min(760px, 90vw) !important;

  margin: 0 !important;
  padding: 0 !important;

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

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  opacity: 1;
  visibility: visible;

  filter: none;
}


#intro .intro-landing-crest img {
  display: block !important;

  width:
    clamp(140px, 16vw, 220px) !important;

  max-height: 245px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 20px 32px rgba(0,0,0,.92)
    )
    drop-shadow(
      0 0 18px rgba(205,188,123,.1)
    );

  animation:
    introLandingCrest
    6s
    ease-in-out
    infinite;
}


#intro .intro-network-label {
  margin:
    17px 0 10px !important;

  color:
    rgba(188,181,145,.68) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: .55rem !important;
  font-weight: 900 !important;

  letter-spacing: .27em !important;

  text-transform: uppercase !important;
}


#intro .intro-title {
  margin: 0 !important;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif !important;

  font-size:
    clamp(1.8rem, 4vw, 3.4rem) !important;

  line-height: 1 !important;

  letter-spacing: .14em !important;

  color: #eee5ca !important;

  text-shadow:
    0 7px 20px rgba(0,0,0,.95) !important;
}


#intro .intro-command-label {
  margin:
    9px 0 0 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(.56rem, .9vw, .72rem) !important;

  font-weight: 900 !important;

  letter-spacing: .38em !important;

  color: #96917a !important;

  text-transform: uppercase !important;
}


#intro .intro-landing-motto {
  margin:
    18px 0 0 !important;

  color: #bbb397 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(.72rem, 1.15vw, .92rem) !important;

  font-weight: 800 !important;

  letter-spacing: .2em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   ENTRY BUTTONS
   ========================================================= */

#intro .intro-entry-actions {
  position: absolute !important;

  left: 50% !important;

  top: auto !important;
  bottom: clamp(28px, 5vh, 58px) !important;

  z-index: 40 !important;

  transform: translateX(-50%);

  width:
    min(520px, calc(100vw - 40px)) !important;

  display: grid !important;

  grid-template-columns:
    1fr !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 1;
  visibility: visible;
}


/* kill old absolute positioning */

#intro .intro-entry-actions
#enter-headquarters,

#intro .intro-entry-actions
#enter-home {
  position: relative !important;

  left: auto !important;
  right: auto !important;

  top: auto !important;
  bottom: auto !important;

  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  transform: none;

  cursor: pointer !important;
}


/* Headquarters */

#intro #enter-headquarters {
  min-height: 72px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;

  padding:
    13px 22px !important;

  border:
    1px solid rgba(213,201,143,.78) !important;

  border-radius: 0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(71,78,47,.97),
      rgba(34,40,25,.98)
    ) !important;

  color: #f4ecd4 !important;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif !important;

  font-size: 1.05rem !important;

  letter-spacing: .14em !important;

  text-align: center !important;

  text-transform: uppercase !important;

  text-shadow:
    0 2px 4px #000 !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 14px 42px rgba(0,0,0,.55);

  backdrop-filter:
    blur(8px) !important;

  animation:
    introHeadquartersPulse
    3.4s
    ease-in-out
    infinite;

  transition:
    transform .2s ease,
    border-color .2s ease,
    filter .2s ease;
}


#intro #enter-headquarters:hover {
  transform:
    translateY(-2px);

  border-color:
    #e0d498 !important;

  filter:
    brightness(1.12);
}


#intro #enter-headquarters small {
  display: block !important;

  margin: 3px 0 0 !important;

  color: #c0b793 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: .61rem !important;
  font-weight: 800 !important;

  letter-spacing: .18em !important;

  text-transform: uppercase !important;
}


/* Home */

#intro #enter-home {
  min-height: 48px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;

  padding:
    8px 18px !important;

  border:
    1px solid rgba(174,169,134,.3) !important;

  border-radius: 0 !important;

  background:
    rgba(5,7,5,.72) !important;

  color: #aaa58d !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: .66rem !important;
  font-weight: 900 !important;

  letter-spacing: .16em !important;

  text-transform: uppercase !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.32) !important;

  backdrop-filter:
    blur(8px) !important;
}


#intro #enter-home small {
  margin: 0 !important;

  padding-left: 10px !important;

  border-left:
    1px solid rgba(255,255,255,.14) !important;

  color: #747767 !important;

  font-size: .57rem !important;

  letter-spacing: .1em !important;
}


/* =========================================================
   CINEMATIC SEQUENCE
   ========================================================= */

#intro .motto-sequence {
  position: absolute !important;

  inset: 0 !important;

  z-index: 30 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  opacity: 0;
  visibility: hidden;

  pointer-events: none !important;

  transform: none !important;
}


/* IMPORTANT:
   These animated values intentionally DO NOT use !important.
*/

#intro .motto-line {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;

  top: 50% !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding:
    0 5vw !important;

  box-sizing:
    border-box !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif !important;

  font-size:
    clamp(2.4rem, 7vw, 6.4rem) !important;

  line-height: .95 !important;

  letter-spacing: .08em !important;

  text-transform:
    uppercase !important;

  color: #eae1c7 !important;

  text-shadow:
    0 10px 34px rgba(0,0,0,.97),
    0 0 34px rgba(206,186,117,.12) !important;

  display: block !important;

  opacity: 0;

  visibility: visible;

  transform:
    translateY(-50%)
    scale(.92);

  filter:
    blur(10px);

  animation: none;
}


/* =========================================================
   FINAL CREST
   ========================================================= */

#intro .motto-crest-reveal {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  z-index: 35 !important;

  width:
    min(760px, 92vw) !important;

  transform:
    translate(-50%, -50%)
    scale(.7);

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 11px !important;

  text-align: center !important;

  opacity: 0;

  visibility: visible;

  filter:
    blur(12px);

  animation: none;
}


#intro .motto-crest-reveal img {
  display: block !important;

  width:
    clamp(155px, 18vw, 235px) !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 20px 35px rgba(0,0,0,.94)
    )
    drop-shadow(
      0 0 20px rgba(197,178,108,.1)
    );
}


#intro .motto-crest-title {
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif !important;

  font-size:
    clamp(1.45rem, 3.1vw, 2.55rem) !important;

  line-height: 1 !important;

  letter-spacing: .16em !important;

  color: #eee4c8 !important;
}


#intro .motto-crest-subtitle {
  color: #9b967d !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(.58rem, .9vw, .72rem) !important;

  font-weight: 900 !important;

  letter-spacing: .36em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   PLAYING STATE
   ========================================================= */

#intro.is-playing
.intro-landing {
  animation:
    introLandingExit
    .7s
    ease
    both;
}


#intro.is-playing
.intro-entry-actions {
  animation:
    introControlsExit
    .7s
    ease
    both;

  pointer-events:
    none !important;
}


#intro.is-playing
.motto-sequence {
  opacity: 1;
  visibility: visible;
}


/* VICTORY */

#intro.is-playing
.motto-line.motto-one {
  animation:
    introMottoPhrase
    2.05s
    ease
    1.5s
    both;
}


/* IS EARNED */

#intro.is-playing
.motto-line.motto-two {
  animation:
    introMottoPhrase
    2.05s
    ease
    3.7s
    both;
}


/* NEVER GIVEN */

#intro.is-playing
.motto-line.motto-three {
  animation:
    introMottoFinal
    2.2s
    ease
    5.9s
    both;
}


/* FINAL CREST */

#intro.is-playing
.motto-crest-reveal {
  animation:
    introCrestReveal
    2.5s
    cubic-bezier(.16,.84,.3,1)
    8.25s
    both;
}


/* =========================================================
   BLACKOUT
   ========================================================= */

#intro .intro-blackout {
  position: absolute !important;

  inset: 0 !important;

  z-index: 200 !important;

  pointer-events: none !important;

  background:
    #010201 !important;

  opacity: 0;

  transition:
    opacity 1s ease;
}


#intro.is-finishing
.intro-blackout {
  opacity: 1;
}


/* HOME */

#intro.home-selected {
  opacity: 0;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes introBackgroundDrift {
  from {
    transform: scale(1.04);
  }

  to {
    transform:
      translate3d(1.5%, -1%, 0)
      scale(1.09);
  }
}


@keyframes introLandingCrest {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-5px);
  }
}


@keyframes introHeadquartersPulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px rgba(255,255,255,.07),
      0 15px 42px rgba(0,0,0,.55),
      0 0 0 rgba(200,183,110,0);
  }

  50% {
    box-shadow:
      inset 0 1px rgba(255,255,255,.08),
      0 18px 48px rgba(0,0,0,.6),
      0 0 28px rgba(200,183,110,.12);
  }
}


@keyframes introStatic {
  0% {
    opacity: .025;
  }

  50% {
    opacity: .065;
  }

  100% {
    opacity: .04;
  }
}


@keyframes introLandingExit {
  0% {
    opacity: 1;

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

    filter: blur(0);
  }

  100% {
    opacity: 0;

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

    filter: blur(8px);
  }
}


@keyframes introControlsExit {
  0% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1);

    filter: blur(0);
  }

  100% {
    opacity: 0;

    transform:
      translateX(-50%)
      scale(1.05);

    filter: blur(8px);
  }
}


@keyframes introMottoPhrase {
  0% {
    opacity: 0;

    transform:
      translateY(-50%)
      scale(.90);

    filter: blur(13px);
  }

  18% {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);

    filter: blur(0);
  }

  72% {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);

    filter: blur(0);
  }

  100% {
    opacity: 0;

    transform:
      translateY(-50%)
      scale(1.055);

    filter: blur(8px);
  }
}


@keyframes introMottoFinal {
  0% {
    opacity: 0;

    transform:
      translateY(-50%)
      scale(.88);

    filter: blur(14px);
  }

  20% {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);

    filter: blur(0);
  }

  70% {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);

    filter: blur(0);
  }

  100% {
    opacity: 0;

    transform:
      translateY(-50%)
      scale(1.075);

    filter: blur(9px);
  }
}


@keyframes introCrestReveal {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.65);

    filter: blur(14px);
  }

  38% {
    opacity: 1;

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

    filter: blur(0);
  }

  55% {
    opacity: 1;

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

    filter: blur(0);
  }

  100% {
    opacity: 1;

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

    filter: blur(0);
  }
}


@keyframes introSmokeOne {
  from {
    transform:
      translate3d(-7vw,5vw,0)
      scale(1);
  }

  to {
    transform:
      translate3d(54vw,-10vw,0)
      scale(1.27);
  }
}


@keyframes introSmokeTwo {
  from {
    transform:
      translate3d(6vw,-4vw,0)
      scale(.96);
  }

  to {
    transform:
      translate3d(-50vw,13vw,0)
      scale(1.22);
  }
}


@keyframes introSmokeThree {
  from {
    transform:
      translate3d(-21vw,4vw,0)
      scale(.92);
  }

  to {
    transform:
      translate3d(28vw,-6vw,0)
      scale(1.2);
  }
}


@keyframes introSmokeFour {
  from {
    transform:
      translate3d(16vw,5vw,0)
      scale(1);
  }

  to {
    transform:
      translate3d(-39vw,-9vw,0)
      scale(1.23);
  }
}


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

@media (max-width: 650px) {

  #intro .intro-landing {
    top: 40% !important;
  }

  #intro
  .intro-landing-crest img {
    width:
      clamp(115px,34vw,165px) !important;
  }

  #intro .intro-title {
    font-size:
      clamp(1.35rem,7vw,2rem) !important;

    letter-spacing:
      .1em !important;
  }

  #intro
  .intro-command-label {
    letter-spacing:
      .25em !important;
  }

  #intro
  .intro-landing-motto {
    width: 90vw !important;

    font-size:
      .68rem !important;

    letter-spacing:
      .12em !important;
  }

  #intro
  .intro-entry-actions {
    bottom:
      22px !important;

    width:
      calc(100vw - 28px) !important;
  }

  #intro
  #enter-headquarters {
    min-height:
      64px !important;
  }

  #intro
  .intro-transmission {
    width:
      calc(100vw - 30px) !important;

    font-size:
      .43rem !important;
  }

  #intro
  .transmission-code {
    display:
      none !important;
  }

  #intro .motto-line {
    white-space:
      normal !important;

    padding:
      0 7vw !important;

    font-size:
      clamp(2.1rem,12vw,4rem) !important;
  }

  #intro
  .motto-crest-title {
    font-size:
      clamp(1.2rem,6vw,1.7rem) !important;

    letter-spacing:
      .1em !important;
  }

  #intro
  .motto-crest-subtitle {
    letter-spacing:
      .25em !important;
  }
}