html.ftl .ftl-adam-stage {
  width: min(100%, 620px);
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

html.ftl .ftl-adam {
  min-height: 430px;
  justify-items: center;
}

html.ftl .ftl-hero-art {
  display: grid;
  place-items: end center;
  width: min(100%, 620px);
  min-height: 430px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

html.ftl .ftl-hero-art-image {
  display: block;
  width: min(100%, 620px);
  max-width: 620px;
  max-height: min(62vh, 620px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.42));
  opacity: 0;
}

html.ftl .ftl-hero-art-image.is-loaded {
  opacity: 1;
}

html.ftl .ftl-hero-art.is-failed::before {
  content: "GEI HERO";
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  color: #aebbd0;
  font-size: 20px;
  font-weight: 900;
}

html.ftl .ftl-adam-hint {
  right: 50%;
  transform: translateX(50%);
  bottom: 3%;
  white-space: nowrap;
}

html.ftl .ftl-v44-hero[data-v44-fx="fade-rise"] .ftl-hero-art-image.is-loaded {
  animation: ftl44FadeRise .9s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="soft-zoom"] .ftl-hero-art-image.is-loaded {
  animation: ftl44SoftZoom 1.05s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="drift-left"] .ftl-hero-art-image.is-loaded {
  animation: ftl44DriftLeft 1s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="drift-right"] .ftl-hero-art-image.is-loaded {
  animation: ftl44DriftRight 1s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="gentle-tilt"] .ftl-hero-art-image.is-loaded {
  animation: ftl44Tilt 1.1s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="float"] .ftl-hero-art-image.is-loaded {
  animation: ftl44Float 2.8s ease-in-out infinite;
}
html.ftl .ftl-v44-hero[data-v44-fx="breathe"] .ftl-hero-art-image.is-loaded {
  animation: ftl44Breathe 2.6s ease-in-out infinite;
}
html.ftl .ftl-v44-hero[data-v44-fx="glow-pulse"] .ftl-hero-art-image.is-loaded {
  animation: ftl44Glow 2.1s ease-in-out infinite;
}

@keyframes ftl44FadeRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ftl44SoftZoom {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ftl44DriftLeft {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ftl44DriftRight {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ftl44Tilt {
  from { opacity: 0; transform: rotate(-3deg) scale(.96); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes ftl44Float {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-7px); }
}
@keyframes ftl44Breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.025); }
}
@keyframes ftl44Glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)); }
  50% { opacity: 1; filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)) drop-shadow(0 0 24px var(--ftl-accent)); }
}


/* V4.5 extra random effects */
html.ftl .ftl-v44-hero[data-v44-fx="drop-bounce"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Drop 1.1s cubic-bezier(.3,1.6,.5,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="spin-in"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Spin 1s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="flip-x"] .ftl-hero-art-image.is-loaded {
  animation: ftl45FlipX 1s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="flip-y"] .ftl-hero-art-image.is-loaded {
  animation: ftl45FlipY 1s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="swing"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Swing 1.4s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="blur-focus"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Blur 1.1s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="pop"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Pop .7s cubic-bezier(.34,1.8,.64,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="rise-from-water"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Rise 1.3s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="wave-sway"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Wave 3.4s ease-in-out infinite;
}
html.ftl .ftl-v44-hero[data-v44-fx="light-sweep"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Sweep 1.2s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="ripple"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Ripple 1.3s ease-out both;
}
html.ftl .ftl-v44-hero[data-v44-fx="shimmer"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Shimmer 2.4s ease-in-out infinite;
}
html.ftl .ftl-v44-hero[data-v44-fx="rock"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Rock 3s ease-in-out infinite;
}
html.ftl .ftl-v44-hero[data-v44-fx="zoom-out"] .ftl-hero-art-image.is-loaded {
  animation: ftl45ZoomOut 1.1s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="slide-up-spin"] .ftl-hero-art-image.is-loaded {
  animation: ftl45SlideSpin 1.1s cubic-bezier(.22,1,.36,1) both;
}
html.ftl .ftl-v44-hero[data-v44-fx="heartbeat"] .ftl-hero-art-image.is-loaded {
  animation: ftl45Heart 1.8s ease-in-out infinite;
}
@keyframes ftl45Drop { from{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes ftl45Spin { from{opacity:0;transform:rotate(-180deg) scale(.4)}to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes ftl45FlipX { from{opacity:0;transform:perspective(800px) rotateY(90deg)}to{opacity:1;transform:perspective(800px) rotateY(0)} }
@keyframes ftl45FlipY { from{opacity:0;transform:perspective(800px) rotateX(-90deg)}to{opacity:1;transform:perspective(800px) rotateX(0)} }
@keyframes ftl45Swing { 0%{opacity:0;transform:rotate(12deg)}30%{opacity:1;transform:rotate(-8deg)}55%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}100%{opacity:1;transform:rotate(0)} }
@keyframes ftl45Blur { from{opacity:0;filter:blur(18px) drop-shadow(0 18px 34px rgba(0,0,0,.42))}to{opacity:1;filter:blur(0) drop-shadow(0 18px 34px rgba(0,0,0,.42))} }
@keyframes ftl45Pop { from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)} }
@keyframes ftl45Rise { from{opacity:0;transform:translateY(70px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)} }
@keyframes ftl45Wave { 0%,100%{opacity:1;transform:translateX(0) rotate(0)}25%{opacity:1;transform:translateX(-6px) rotate(-1.5deg)}75%{opacity:1;transform:translateX(6px) rotate(1.5deg)} }
@keyframes ftl45Sweep { from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)} }
@keyframes ftl45Ripple { 0%{opacity:0;transform:scale(.85)}40%{opacity:1;transform:scale(1.06)}65%{transform:scale(.97)}85%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)} }
@keyframes ftl45Shimmer { 0%,100%{opacity:1;filter:brightness(1) drop-shadow(0 18px 34px rgba(0,0,0,.42))}50%{opacity:1;filter:brightness(1.25) saturate(1.2) drop-shadow(0 18px 34px rgba(0,0,0,.42))} }
@keyframes ftl45Rock { 0%,100%{opacity:1;transform:rotate(-2deg)}50%{opacity:1;transform:rotate(2deg)} }
@keyframes ftl45ZoomOut { from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)} }
@keyframes ftl45SlideSpin { from{opacity:0;transform:translateY(50px) rotate(-12deg)}to{opacity:1;transform:translateY(0) rotate(0)} }
@keyframes ftl45Heart { 0%,100%{opacity:1;transform:scale(1)}14%{opacity:1;transform:scale(1.05)}28%{opacity:1;transform:scale(1)}42%{opacity:1;transform:scale(1.04)}70%{opacity:1;transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
  html.ftl .ftl-hero-art-image.is-loaded {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  html.ftl .ftl-adam-stage {
    width: min(100%, 560px);
    min-height: 390px;
  }

  html.ftl .ftl-adam {
    min-height: 390px;
  }

  html.ftl .ftl-hero-art {
    width: min(100%, 560px);
    min-height: 390px;
  }

  html.ftl .ftl-hero-art-image {
    width: min(100%, 560px);
    max-width: 560px;
    max-height: 560px;
  }
}

@media (max-width: 430px) {
  html.ftl .ftl-adam-stage {
    width: min(100%, 500px);
    min-height: 360px;
  }

  html.ftl .ftl-adam {
    min-height: 360px;
  }

  html.ftl .ftl-hero-art {
    width: min(100%, 500px);
    min-height: 360px;
  }

  html.ftl .ftl-hero-art-image {
    width: min(100%, 500px);
    max-width: 500px;
    max-height: 500px;
  }
}