:root {
  --red: #c7183e;
  --lime: #b1c455;
  --green: #00713f;
  --cream: #f6f3e8;
  --deep-green: #2b312b;
}

html {
  scroll-behavior: smooth;
}

h2 {
  font-family: 'Bungee', 'Roboto Flex', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -0.01em;
  margin: 0;
}

h2 span {
  color: var(--red);
}

/* #region HERO BANNER */
.hero-banner {
  --logo-width: min(100%, 85ch);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: min(calc(95svh - var(--nav-3)), 162vw);
  background: url("https://s3.theark.cloud/sp-comm-arkfiles/website/landing-pages/occ-shoebox-heroes/shoebox-heroes-collage-banner-FINAL.jpg")
    50% 20% / cover no-repeat;
}

.hero-title img {
  width: var(--logo-width);
  height: auto;
  z-index: 9;
  position: relative;
  margin: 0 auto -10%;
}

.curve-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  z-index: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}

@media only screen and (max-width: 1024px) {
  .hero-banner {
    background: url("https://s3.theark.cloud/sp-comm-arkfiles/website/landing-pages/occ-shoebox-heroes/Shoebox-Heros-sq-banner-tall-FINAL.jpg")
      top/cover no-repeat;
    height: min(150vw, 100vh);
  }
}
/* #endregion HERO BANNER */

/* #region DEFINITION SECTION */

.definition {
  --spacer: 4em;
  background: #fdfcfb url("https://s3.theark.cloud/sp-comm-arkfiles/website/landing-pages/occ-shoebox-heroes/paper-texture-flipped.jpg") top / cover no-repeat;
  padding-bottom: 0;
  padding-top: var(--spacer);
}

.definition-content {
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 0;
}

.definition-spacer {
  height: calc(100px - 6vh);
  max-height: 100px;
}

.definition-copy {
  margin-top: 1em;
  text-wrap: pretty;
}

.definition-emphasis {
  color: var(--red);
}

.definition-tear {
  margin-inline: 0;
  padding-top: 4em;
}

@media only screen and (max-width: 1280px) {
  .definition {
    padding-top: calc(var(--spacer) - 1.5em);
  }
}

@media only screen and (max-width: 564px) {
  .definition {
    padding-top: calc(var(--spacer) - 4em);
  }
}
/* #endregion DEFINITION SECTION */

/* #region OVERVIEW SECTION */
.overview {
  padding-top: 2em;
}

.overview-content {
  padding-bottom: 2em;
}

.overview-heading {
  margin: auto;
}

.overview-graphic {
  width: 100%;
}

.slanted-title {
  font-family: 'Roboto Flex', sans-serif;
  font-size: clamp(2.3rem, 1rem + 4.25vw, 3.8rem);
  font-weight: 750;
  font-style: normal;
  font-variation-settings:
    'slnt' -9,
    'wdth' 65,
    'GRAD' 0;
  line-height: 0.95;
  letter-spacing: 0;
  padding-bottom: 0.25em;
  text-wrap: balance;
}
.overview-heading p {
  font-size: clamp(1.1rem, 0.75rem + 1.3vw, 1.75rem);
}

.flex-text .primary.button {
  margin: 36px 0;
}

.flex-section {
  display: flex;
}

.flex-text {
  align-content: center;
  padding-left: 40px;
  padding-right: 3px;
}

.flex-img {
  align-content: center;
}

@media only screen and (max-width: 853px) {
  .flex-section {
    flex-direction: column;
  }

  .flex-text {
    order: 1;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 560px;
    margin: auto;
  }

  .flex-text .button {
    margin: 2em auto 0 !important;
  }

  .flex-img {
    margin: auto;
    padding-bottom: 2em;
    width: 80%;
    order: 0;
  }
}
/* #endregion OVERVIEW SECTION */

/* #region NUMBERED CARDS */
    .flex-cards {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 0 40px;
    }

    .card {
      box-sizing: border-box;
      min-width: 0;
      background: #a9c737;
      border: 4px solid #00713f;
      border-radius: 15px;
      padding: 20px;
      width: 100%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      min-width: 0;
      container-type: inline-size;
    }

    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #00713f;
      border: 3px solid #fff;
      flex-shrink: 0;
      margin-right: .25em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 130%;
      font-style: italic;
    }

    .description {
      line-height: 1.4;
      color: #111;
      font-size: 85%;
    }

    #overview .card-title {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      font-size: clamp(1.1rem, 9cqi, 2.5rem);
      font-weight: 400;
      font-style: normal;
      font-family: 'Bungee', 'Roboto', system-ui, sans-serif;
      line-height: 1;
      white-space: nowrap;
      text-transform: uppercase;
      color: #ca1f47;
      -webkit-text-stroke: 5px #ffffff;
      paint-order: stroke;
      letter-spacing: -0.02em;
      transform: skewX(-7deg);
      transform-origin: left center;
    }

@media (min-width: 801px) and (max-width: 1100px) {
  .card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .circle {
    margin-right: 0;
  }

  #overview .card-title {
    font-size: clamp(1.5rem, 2.75vw, 2rem);
    white-space: normal;
    transform-origin: center;
  }
}

/* On mobile, stack + resize */
@media (max-width: 800px) {
  .card-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #overview .card-title {
    font-size: clamp(1.75rem, 8vw, 2rem);
    white-space: nowrap;
    transform-origin: left center;
  }

  .flex-cards {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .card {
    max-width: 500px;
  }

  .circle {
    width: 35px;
    height: 35px;
    font-size: 100%;
  }

  .description {
    font-size: 100% !important;
  }
}
/* #endregion NUMBERED CARDS */

/* #region FORM SECTION */
#form {
  background: #f9f8f7;
  border: 1px solid rgba(0,0,0,0.1);
}

#form .gform_heading {
  margin-top: 1em;
}

.form-icon {
  display: block;
  width: 100px;
  height: auto;
  margin: auto;
}

#form .gform_heading h2 {
  text-align: center;
  padding-bottom: 0;
}

#form h3 {
  font-size: 100%;
}

#form .gform_button.button {
  margin-right: auto !important;
  line-height: 2.6em;
}

#form .form-note {
  border-top: 1px dotted #111111 !important;
  padding-top: 1em;
  border-bottom: none !important;
  margin-top: 0;
}

@media (min-width: 1025px) {
  #form .gform_heading {
    display: flex;
    justify-content: center;
  }

  #form .gform_heading h2 {
    width: max-content;
    white-space: nowrap;
    letter-spacing: -0.04em;
  }
}
/* #endregion FORM SECTION */

/* #region 2026 HEROES TEASER */
.heroes-coming-soon {
  background: var(--cream) radial-gradient(rgba(17, 68, 39, 0.08) 1px, transparent 1.4px) 0 0 / 14px 14px;
  border-block: 1px solid rgba(17, 68, 39, 0.12);
}

.heroes-coming-soon__inner {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5em, 5vw, 4em);
  width: min(calc(100% - 48px), 960px);
  margin-inline: auto;
  padding-block: clamp(1.25em, 3vw, 2em);
}

.heroes-coming-soon__card {
  width: 100%;
  margin: 0;
}

.heroes-coming-soon__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 0.618em;
  box-shadow:
    0 0.25em 0.5em rgba(17, 68, 39, 0.12),
    0 1em 2em rgba(17, 68, 39, 0.12);
}

.heroes-coming-soon__copy h2 {
  margin-bottom: 0.3em;
  text-wrap: nowrap;
}

.heroes-coming-soon__copy p {
  margin: 0;
  /* font-size: clamp(1.1rem, 2.5vw, 1.35rem); */
  /* font-weight: 700; */
  line-height: 1.4;
}

@media (max-width: 720px) {
  .heroes-coming-soon__inner {
    grid-template-columns: 1fr;
    gap: 1.25em;
    width: min(calc(100% - 32px), 560px);
    text-align: center;
  }

  .heroes-coming-soon__card {
    width: min(38vw, 140px);
    margin-inline: auto;
  }

  .heroes-coming-soon__copy h2 {
    font-size: 36px;
    text-wrap: balance;
  }
}
/* #endregion 2026 HEROES TEASER */

/* #region FLIP CARD ANIMATION */
    .scroll-x.scroll-snap > .flip-card {
  flex: 0 0 auto;
  width: 320px;
  aspect-ratio: 2/3;
  perspective: 1200px;
}

#scroll-snap .sub {
  opacity: 50%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8em;
}

.hall-of-fame-icon {
  width: 100px;
  height: auto;
}
#scroll-snap header {
  display: flex;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}

@media (max-width: 720px) {
  #hall-of-fame h2,
  #form .gform_heading h2 {
    font-size: 36px;
  }

  #scroll-snap header {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    text-align: center;
  }

  #scroll-snap header > img,
  #form article > img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto;
  }
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition:
    transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1),
    box-shadow 0.25s ease,
    translate 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 0.618em;
  box-shadow:
    0 -0.1ch 0.5ch rgba(0, 0, 0, 0.3),
    0.236ch 0.382ch 0.618ch rgba(0, 0, 0, 0.1);
}

/* Click/tap to flip */
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Desktop-only hover CUE (no flip) */
@media (hover: hover) {
  .flip-card:not(.is-flipped):hover .flip-card-inner,
  .flip-card-inner:focus-visible {
    translate: 0 -0.25em;
    box-shadow:
      -0.65ch 0.5ch 0.5ch rgba(0, 0, 0, 0.16),
      0.3ch 0.5ch 0.9ch rgba(0, 0, 0, 0.12);
    transform: rotateY(5deg);
  }
}

/* Iridescent/holographic shine sweep — sits above the entire front
       face (photo + medallion + nameplate), parked off-canvas until
       triggered by hover */
    .flip-card-front::after{
        content:"";
        position:absolute;
        inset:0;
        left:-75%;
        width:50%;
        background:linear-gradient(115deg,
            rgba(255,255,255,0)    0%,
            rgba(225,225,230,.55)  35%,
            rgba(255,255,255,.85)  50%,
            rgba(225,225,230,.55)  65%,
            rgba(255,255,255,0)    100%);
        transform:skewX(-10deg);
        opacity: 10%;
        mix-blend-mode:overlay;
        pointer-events:none;
        z-index:3;
    }
    @media(hover:hover) and (prefers-reduced-motion:no-preference){
        .flip-card-front::after{transition:left .55s ease}
        .flip-card:not(.is-flipped):hover .flip-card-front::after{left:125%}
    }

/* Champagne-gold foil treatment for the featured first card only. The other
   cards retain the silver/white sweep above. */
.flip-card.foil-card .flip-card-front,
.flip-card.foil-card .flip-card-back {
  isolation: isolate;
}

.flip-card.foil-card .flip-card-front::before,
.flip-card.foil-card .flip-card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 185, 155, 0.22), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(167, 255, 213, 0.14), transparent 32%),
    radial-gradient(circle at 48% 78%, rgba(255, 229, 154, 0.5), transparent 35%),
    linear-gradient(125deg,
      rgba(151, 101, 27, 0.32),
      rgba(217, 171, 77, 0.45) 18%,
      rgba(255, 229, 154, 0.55) 38%,
      rgba(255, 247, 216, 0.58) 52%,
      rgba(239, 198, 111, 0.48) 68%,
      rgba(188, 129, 38, 0.34) 84%,
      rgba(255, 185, 155, 0.22));
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* Replace the first card's silver sweep with a warm, pearlescent gold one. */
.flip-card.foil-card .flip-card-front::after,
.flip-card.foil-card .flip-card-back::after {
  background: linear-gradient(115deg,
    rgba(154, 103, 27, 0) 0%,
    rgba(191, 137, 48, 0.38) 14%,
    rgba(233, 190, 94, 0.52) 30%,
    rgba(255, 229, 154, 0.62) 44%,
    rgba(255, 248, 218, 0.76) 52%,
    rgba(255, 225, 145, 0.6) 61%,
    rgba(222, 169, 68, 0.48) 74%,
    rgba(167, 255, 213, 0.16) 86%,
    rgba(154, 103, 27, 0) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
}

.flip-card.foil-card .flip-card-front::after {
  transition: none;
}

.flip-card.foil-card.is-flipped .flip-card-front::before,
.flip-card.is-flipped .flip-card-front::after {
  animation: none;
  opacity: 0;
  transition: none;
  visibility: hidden;
}

.flip-card.foil-card .flip-card-back::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -75%;
  width: 50%;
  transform: skewX(-10deg);
  pointer-events: none;
  z-index: 3;
}

.flip-card.foil-card .flip-card-back > * {
  position: relative;
  z-index: 4;
}

.flip-card.foil-card.is-flipped .flip-card-back::before {
  opacity: 0.06;
}

@media (hover: hover) {
  .flip-card.foil-card:not(.is-flipped):hover .flip-card-front::before,
  .flip-card.foil-card .flip-card-inner:focus-visible .flip-card-front::before {
    opacity: 0.26;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flip-card.foil-card:not(.is-flipped):hover .flip-card-front::before,
  .flip-card.foil-card .flip-card-inner:focus-visible .flip-card-front::before {
    animation: foil-tint-pulse 0.55s ease-out both;
  }

  .flip-card.foil-card:not(.is-flipped):hover .flip-card-front::after,
  .flip-card.foil-card .flip-card-inner:focus-visible .flip-card-front::after {
    animation: foil-hover-sweep 0.55s ease-out both;
  }

  .flip-card.foil-card.is-flipped .flip-card-back::after {
    animation: foil-flip-sweep 0.55s ease-out both;
  }
}

@keyframes foil-tint-pulse {
  0% { opacity: 0.06; }
  32% { opacity: 0.26; }
  100% { opacity: 0.04; }
}

@keyframes foil-hover-sweep {
  0% { left: -75%; opacity: 0; }
  18% { opacity: 0.88; }
  72% { opacity: 0.4; }
  100% { left: 125%; opacity: 0; }
}

@keyframes foil-flip-sweep {
  0% { left: -75%; opacity: 0; }
  18% { opacity: 0.48; }
  72% { opacity: 0.36; }
  100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .flip-card-inner {
    transition: none;
  }

  .flip-card.foil-card .flip-card-front::after,
  .flip-card.foil-card .flip-card-back::after {
    display: none;
  }
}
.flip-card-inner:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
}

.flip-card-front,
.flip-card-back {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.618em;
  overflow: hidden;
}

/* ---- FRONT: photo + name + state ---- */
.flip-card-front {
  display: flex;
  flex-direction: column;
  transform: rotateY(0deg);
  background: #fff;
}
.flip-card-front picture {
  display: block;
  width: 100%;
  height: 100%;
}
.flip-card-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card-caption h3 {
  position: absolute;
  left: 0.85em;
  bottom: 2em;
  padding: 0.7em 0.75em 0.5em;
  margin: 0;
  font-family: 'Roboto Flex', sans-serif;
  text-transform: uppercase;
  font-size: 1.8rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--deep-green);
  font-variation-settings:
    "slnt" -10,
    "wdth" 65,
    "wght" 600;
}
.flip-card-caption p {
  position: absolute;
  left: 2.35em;
  bottom: 2.35em;
  padding: 0.75em 0.55em 0;
  margin: 0;
  font-size: 1rem;
  opacity: 0.85;
  font-family: 'Roboto Flex', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings:
    "slnt" -10,
    "wdth" 65,
    "wght" 600;
}

/* ---- BACK: bio text ---- */
.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 1em 0.9em;
  background: var(--cream);
  color: var(--deep-green);
}
.flip-card-back h3 {
  margin: 0 0 0.2em;
  font-family: "Roboto Flex", sans-serif;
  font-size: 1em;
  border-bottom: 1.5px solid var(--lime);
  padding-bottom: 0.3em;
  color: var(--green);
  font-variation-settings:
    "slnt" -10,
    "wdth" 65,
    "wght" 700;
}
.flip-card-back h3 span {
  opacity: 0.5;
  color: var(--deep-green);
  font-variation-settings: "slnt" -10, "wdth" 65, "wght" 400;
}
.flip-card-back .flip-card-state {
  margin: 0 0 0.6em;
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.flip-card-back p.bio {
  margin: 0;
  font-size: .98rem;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .flip-card-back p.bio {
    font-size: 1rem;
  }
}

/* Small affordance so touch users know it's tappable */
.flip-card-front .flip-hint {
  position: absolute;
  top: 0.7em;
  right: 0.5em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  pointer-events: none;
}
/* #endregion FLIP CARD ANIMATION */