:root {
  --dark:   #393B41;
  --blue:   #408092;
  --gray:   #b2c4ce;
  --orange: #FF816B;
  --light:  #FFFFFF;
}


/* reset */

*,
*::before,w
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
video {
  display: block;
  max-width: 100%;
}

video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}


/* logo */

.oesp {
  display: inline-block;
  position: relative;
  top: 0.19em;
  font-family: OESP;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.oesp-capital {
  font-size: 1.2em;
}

.oesp-estadao:before {
  content: '\f000';
}

.oesp-estadao-symbol:before {
  content: '\f001';
}

.oesp-estadao-logotype:before {
  content: '\f002';
}


/* structure */

html,
body,
.story,
.story-wrapper {
  position: relative;
  height: 100%;
  background: var(--dark);
}

body {
  background: #eee;
  font-family: Lato, sans-serif;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.5;
  color: var(--light);
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* text-rendering: auto; */
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */
}

.story-container,
.swiper-container,
.story-slide,
.story-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story-slide,
.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.story-slide {
  opacity: 0;
  background: #eee;
  transition: all .4s;
}

.story-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: all .4s, object-position .4s;
}

.story-background.cover {
  object-fit: cover;
}

.story-background.contain {
  object-fit: contain;
}

.story-background.center {
  object-position: 50% 50%;
}

.story-background.top {
  object-position: 50% 0%;
}

.story-background.right {
  object-position: 100% 50%;
}

.story-background.bottom {
  object-position: 50% 100%;
}

.story-background.left {
  object-position: 0% 50%;
}

.media-container {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
}


/* story block */

.story-block {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: calc( 100% - 48px);
  max-width: 480px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateY( -25% );
}

.story-block video {
  transform: scale(1.01);
}


/* swiper blocks */

.swiper-blocks {
  position: absolute;
  top: 96px;
  right: 32px;
  bottom: 64px;
  left: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  opacity: 0;
  transition: all .6s;
}

.swiper-slide-active .swiper-blocks {
  opacity: 1;
}

.story[data-touchmove="true"] .swiper-slide-active .swiper-blocks {
  opacity: .33;
}

.swiper-blocks.top {
  justify-content: flex-start;
}

.swiper-blocks.center {
  justify-content: center;
}

.swiper-blocks.center .swiper-block,
.swiper-block:not(:first-child):not(:last-child) {
  min-height: initial;
}

.swiper-blocks.bottom {
  justify-content: flex-end;
}

.swiper-block {
  min-height: 126px; /* 21px (font-size) × 1.5 (line-height) × 4 lines */
  max-width: 311px;
}

/* heading */

.heading span {
  display: block;
}

.heading .kicker {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .2em;
  color: var(--blue);
  text-transform: uppercase;
}

.heading .title {
  font-family: 'Estado Headline', serif;
  font-weight: bold;
  font-size: 64px;
  line-height: 1.2;
  color: var(--dark);
  transition: font-size .4s;
}


/* quote */

.quote {
  position: relative;
}

.quote::before {
  content: '“';
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translate( -50%, -100% );
  font-family: 'Estado Headline', serif;
  font-weight: bold;
  font-size: 64px;
  line-height: .666;
  color: var(--orange);
}

.quote .author::before {
  content: '—';
  display: block;
  opacity: .25;
  margin-top: 1em;
}

.quote .author,
.quote .role {
  font-size: 16px;
  /* line-height: 1.5; */
  letter-spacing: .2em;
  text-transform: uppercase;
}

.quote .role {
  color: var(--orange);
}


/* buttons */

a.button {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .2em;
  color: var(--blue);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid currentColor;
  padding: 8px 16px;
  user-select: none;
  cursor: pointer;
}


/* audible */

.audible {
  background: rgba( 0, 0, 0, .25 );
  position: fixed;
  bottom: 16px;
  left: 16px;
  height: 56px;
  width: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .4s;
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
}

.audible.hidden {
  opacity: 0;
  pointer-events: none;
}

.audible i {
  font-size: 32px;
  display: block;
}

.audible i:last-child {
  display: none;
}

.audible[data-muted="false"] i:last-child {
  display: block;
}

.audible[data-muted="false"] i:first-child {
  display: none;
}

/* credits */

.credits p:first-child {
  font-size: 12px;
  font-weight: 400;
  opacity: .75;
  line-height: 2;
}

.credits .disclaimer {
  margin-top: 32px;
  font-size: 12px;
  font-weight: 400;
  opacity: .333;
  line-height: 1.5;
  max-width: 200px;
  margin: 32px auto 0;
}

/* animations */

@keyframes grow {
  0%   { transform: scale( 1   ); }
  100% { transform: scale( 1.1 ); }
}

.story-slide-active .story-background.grow,
.story-slide-near   .story-background.grow {
  animation-name: grow;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}

@keyframes translate-right {
  0%   { object-position:   0% 50%; }
  100% { object-position: 100% 50%; }
}

.story-slide-active .story-background.translate-right,
.story-slide-near   .story-background.translate-right {
  animation-name: translate-right;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}

@keyframes translate-left {
  0%   { object-position: 100% 50%; }
  100% { object-position:   0% 50%; }
}

.story-slide-active .story-background.translate-left,
.story-slide-near   .story-background.translate-left {
  animation-name: translate-left;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}


/* header */

.header-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-height: 144px;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 24px;
  z-index: 1;
  transition: max-height 1s;
  user-select: none;
}

.header-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .33;
  transition: opacity .4s;

  /* Gradient easing https://larsenwork.com/easing-gradients/ */
  /* background: linear-gradient(
    to bottom,
    hsl(200, 49.79%, 46.08%) 0%,
    hsla(200, 49.79%, 46.08%, 0.987) 8.1%,
    hsla(200, 49.79%, 46.08%, 0.951) 15.5%,
    hsla(200, 49.79%, 46.08%, 0.896) 22.5%,
    hsla(200, 49.79%, 46.08%, 0.825) 29%,
    hsla(200, 49.79%, 46.08%, 0.741) 35.3%,
    hsla(200, 49.79%, 46.08%, 0.648) 41.2%,
    hsla(200, 49.79%, 46.08%, 0.55) 47.1%,
    hsla(200, 49.79%, 46.08%, 0.45) 52.9%,
    hsla(200, 49.79%, 46.08%, 0.352) 58.8%,
    hsla(200, 49.79%, 46.08%, 0.259) 64.7%,
    hsla(200, 49.79%, 46.08%, 0.175) 71%,
    hsla(200, 49.79%, 46.08%, 0.104) 77.5%,
    hsla(200, 49.79%, 46.08%, 0.049) 84.5%,
    hsla(200, 49.79%, 46.08%, 0.013) 91.9%,
    hsla(200, 49.79%, 46.08%, 0) 100%
  ); */


  background: linear-gradient(
    to bottom,
    hsl(192.59, 38.76%, 40.98%) 0%,
    hsla(192.59, 38.76%, 40.98%, 0.987) 8.1%,
    hsla(192.59, 38.76%, 40.98%, 0.951) 15.5%,
    hsla(192.59, 38.76%, 40.98%, 0.896) 22.5%,
    hsla(192.59, 38.76%, 40.98%, 0.825) 29%,
    hsla(192.59, 38.76%, 40.98%, 0.741) 35.3%,
    hsla(192.59, 38.76%, 40.98%, 0.648) 41.2%,
    hsla(192.59, 38.76%, 40.98%, 0.55) 47.1%,
    hsla(192.59, 38.76%, 40.98%, 0.45) 52.9%,
    hsla(192.59, 38.76%, 40.98%, 0.352) 58.8%,
    hsla(192.59, 38.76%, 40.98%, 0.259) 64.7%,
    hsla(192.59, 38.76%, 40.98%, 0.175) 71%,
    hsla(192.59, 38.76%, 40.98%, 0.104) 77.5%,
    hsla(192.59, 38.76%, 40.98%, 0.049) 84.5%,
    hsla(192.59, 38.76%, 40.98%, 0.013) 91.9%,
    hsla(192.59, 38.76%, 40.98%, 0) 100%
  );


}

.header-container.transparent::before,
.header-container.dark::before {
  opacity: 0;
}

.header-container.dark .brand {
  color: var(--dark);
}

.header-container.dark .header-divider {
  background: var(--dark);
}

.header-container.dark .sponsor img.dark {
  opacity: 1;
}

.header-container.dark .sponsor img:not(.dark) {
  opacity: 0;
}

.header-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  height: 55px;
  z-index: 2;
}

.header-brand {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.brand {
  font-size: 32px;
  color: var(--light);
  transition: all .4s;
}

.brand img {
  height: 24px;
  transform: translateY( -2px );
}

.header-divider {
  width: 2px;
  height: 24px;
  opacity: .25;
  margin: 0 14px;
  background: var(--light);
  transition: all .4s;
}

.sponsor {
  position: relative;
}

.sponsor img {
  height: 32px;
  transition: all .4s;
}

.sponsor img.dark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

/* footer */

.story-slide footer {
  display: flex;
  position: absolute;
  bottom: 24px;
  width: 100%;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 0s;
}

.story-slide-active footer {
  opacity: 1;
  transition-delay: 1s;
}

.story-slide footer p {
  width: 100%;
  font-weight: 400;
  opacity: .5;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}





/* custom story styles */

.light {
  color: var(--light)
}

.dark {
  color: var(--dark)
}

.orange {
  color: var(--orange)
}

.blue {
  color: var(--blue)
}

.render {
  max-width: 100%;
  transform: translateY( -10% );
  transition: all .4s;
  margin: 0 auto;
}

.render + .swiper-block {
  position: relative;
}

@media (min-width: 480px) {
  .render {
    max-width: 75%;
  }
}

.oculos {
  width: calc( 66.66% - 48px);
  max-width: 240px;
}

.crew {
  max-width: 540px;
  width: 80%;
  margin: 0 auto;
  transform: translateY(-20%);
}

.authors-photo {
  width: 80%;
  margin: 0 auto;
  max-width: 360px;
}

.captain-photo {
  width: 50%;
  margin: 0 auto;
  max-width: 240px;
}

.map {
  width: 133.333%;
  max-width: 640px;
  left: 50%;
  transform: translateX( -50% );
}


@media (max-width: 540px) {

  .house {
    object-fit: contain;
    object-position: 50% 100%;
  }

}

@media (min-width: 540px) {

  .fur-seal .swiper-blocks.top {
    justify-content: flex-end;
  }

  .fur-seal .swiper-blocks .dark {
    color: var(--light);
  }

  .story-slide.fur-seal .story-background {
    object-fit: cover;
    object-position: center;
  }

}

.separator {
  transform: translateY( -32px );
}

.station-line {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 144px;
  width: 8px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  z-index: 1;
  transform: translate( -50%, -50% );
  transition: max-height .4s, opacity .3s;
}

[data-transition="false"] .story-slide-active .station-line {
  max-height: 144px;
  opacity: 1;
}

@media (max-height: 540px) {

  .station-line {
    height: 96px;
  }

  [data-transition="false"] .story-slide-active .station-line {
    max-height: 96px;
  }

}

.story[data-touchmove="true"] .station-line,
.story[data-transition="true"] .station-line {
  max-height: 0px;
  opacity: 0;
}

.station-line::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--dark);
}

.station-line::after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 2px;
  height: calc( 100% - 8px );
  border-radius: 4px;
  background: var(--dark);
}

.swiper-slide:nth-child(2) .swiper-blocks {
  top: 64px;
}

.story-slide:first-child .media-container {
  transition: all .6s;
}

[data-current="2"] .story-slide:first-child .media-container {
  transform: translate(0, -50%);
  opacity: .5;
}

[data-current="2"] .story-slide:nth-child(3) .story-background {
  transform: translate(0, 50%);
  opacity: .5;
}

[data-current="3"] .story-slide:first-child .media-container {
  transform: translate(0, -100%);
  opacity: .5;
}

[data-current="3"] .story-slide:nth-child(3) .story-background {
  transform: translate(0, 0);
}


/* responsive */

@media (min-height: 668px) {

  .swiper-blocks {
    padding: 5vh 0;
  }

}

@media (max-width: 340px) {

  .heading .title {
    font-size: 52px;
  }

}


/* restrain to iPhone (temporary) */

/*
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.story {
  width: 100%;
  height: 100%;
  max-width: 375px;
  max-height: 667px;
  overflow: hidden;
}
*/