/* =========================================================
   HNFL
   COMPLETE STYLE.CSS
   HTML + CSS ONLY

   STYLE:
   NIKE EDITORIAL
   ×
   SWISS INTERNATIONAL TYPOGRAPHY

   IMPORTANT:
   - NO JAVASCRIPT
   - NO STICKY SECTION
   - NORMAL DOCUMENT FLOW
   - SCROLL REVEAL
========================================================= */


/* =========================================================
   01. RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --red: #E60012;
  --black: #080808;
  --dark: #141414;
  --paper: #F2EFE7;
  --white: #FFFFFF;
  --gray: #85827A;
  --line: #B6B0A5;

  --green: #164C32;
  --blue: #3157A6;
  --pink: #F3A6C6;

  --max-width: 1200px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  overflow-x: hidden;

  background: #181818;

  color: #111111;

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

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;

  width: 100%;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

button,
select,
label {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

main,
footer {
  width: min(var(--max-width), 92%);

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

.section-index {
  margin: 0;

  color: var(--red);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================================
   02. HEADER
========================================================= */

.site-header {
  width: min(var(--max-width), 92%);
  min-height: 72px;

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

  padding:
    0 24px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  background:
    var(--paper);

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.12);
}

.brand {
  font-size: 15px;
  font-weight: 900;

  letter-spacing:
    -0.035em;

  white-space: nowrap;
}

.site-header nav {
  display: flex;

  align-items: center;

  gap: 27px;
}

.site-header nav a {
  position: relative;

  font-size: 9px;
  font-weight: 900;

  letter-spacing:
    0.02em;

  white-space: nowrap;
}

.site-header nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 100%;
  height: 2px;

  background:
    var(--red);

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform
    0.3s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header nav a:hover::after,
.site-header nav a.nav-active::after {
  transform:
    scaleX(1);

  transform-origin:
    left center;
}

.site-header nav a.nav-active {
  color: var(--red);
}


/* =========================================================
   03. HERO
========================================================= */

.hero {
  position: relative;

  min-height: 760px;

  display: grid;

  grid-template-columns:
    1.08fr 0.92fr;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 26% 42%,
      #171717 0%,
      #080808 70%
    );

  color: #FFFFFF;
}


/* ---------------------------------------------------------
   HERO GRID
--------------------------------------------------------- */

.hero-grid {
  position: absolute;

  inset: 0;

  opacity: 0.09;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  pointer-events: none;

  animation:
    heroGridMove
    18s linear infinite;
}

@keyframes heroGridMove {
  to {
    background-position:
      72px 72px;
  }
}


/* ---------------------------------------------------------
   GIANT HNFL
--------------------------------------------------------- */

.hero-outline-text {
  position: absolute;

  left: -4%;
  bottom: 5%;

  color: transparent;

  font-size:
    clamp(
      170px,
      22vw,
      420px
    );

  line-height: 0.7;

  font-weight: 900;

  letter-spacing:
    -0.1em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.055);

  pointer-events: none;

  animation:
    heroOutlineFloat
    10s
    ease-in-out
    infinite alternate;
}

@keyframes heroOutlineFloat {
  from {
    transform:
      translateX(-2%);
  }

  to {
    transform:
      translateX(4%);
  }
}


/* ---------------------------------------------------------
   HERO LEFT
--------------------------------------------------------- */

.hero-content {
  position: relative;

  z-index: 5;

  padding:
    110px 5%
    105px 6%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.hero-top-line {
  margin-bottom: 34px;

  display: flex;

  justify-content: space-between;

  gap: 20px;
}

.hero-top-line > span {
  color: #5E5E5E;

  font-size: 8px;
  font-weight: 900;

  letter-spacing:
    0.18em;
}

.hero-title {
  margin: 0;

  font-size:
    clamp(
      75px,
      8vw,
      150px
    );

  line-height: 0.75;

  font-weight: 900;

  letter-spacing:
    -0.075em;
}

.hero-title span {
  display: block;

  opacity: 0;

  transform:
    translateY(65px);

  animation:
    heroTitleReveal
    0.95s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.hero-title span:nth-child(1) {
  animation-delay: 0.04s;
}

.hero-title span:nth-child(2) {
  animation-delay: 0.12s;
}

.hero-title span:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes heroTitleReveal {
  from {
    opacity: 0;

    transform:
      translateY(65px);

    clip-path:
      inset(
        100% 0 0 0
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(0);

    clip-path:
      inset(
        0 0 0 0
      );
  }
}

.hero-title-red {
  position: relative;

  color: var(--red);
}

.hero-title-red::after {
  content: "";

  position: absolute;

  left: 2%;
  bottom: -14px;

  width: 38%;
  height: 8px;

  background:
    var(--red);

  transform-origin:
    left center;

  animation:
    heroRedBar
    2.4s
    ease-in-out
    infinite alternate;
}

@keyframes heroRedBar {
  from {
    transform:
      scaleX(0.2);
  }

  to {
    transform:
      scaleX(1);
  }
}

.hero-bottom-content {
  margin-top: 65px;
}

.hero-description {
  margin-bottom: 32px;

  color: #929292;

  font-size: 14px;

  line-height: 1.55;
}

.main-button {
  padding:
    15px 20px;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  background:
    var(--red);

  color: #FFFFFF;

  font-size: 10px;
  font-weight: 900;
}

.hero-button {
  min-width: 235px;
}


/* ---------------------------------------------------------
   HERO ART
--------------------------------------------------------- */

.hero-art {
  position: relative;

  z-index: 3;

  min-height: 620px;

  margin:
    60px 5%
    60px 0;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(110, 0, 0, 0.18),
      rgba(110, 0, 0, 0.18)
    ),
    #570e12;
}

.hero-number {
  position: absolute;

  right: -3%;
  bottom: -5%;

  color:
    rgba(255, 255, 255, 0.075);

  font-size:
    clamp(
      260px,
      28vw,
      510px
    );

  line-height: 0.72;

  font-weight: 900;

  animation:
    heroNumberFloat
    7s
    ease-in-out
    infinite alternate;
}

@keyframes heroNumberFloat {
  from {
    transform:
      translate(-10px, 4px);
  }

  to {
    transform:
      translate(18px, -8px);
  }
}

.hero-number-small {
  position: absolute;

  top: 7%;
  right: 6%;

  color: transparent;

  font-size: 75px;
  font-weight: 900;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.6);
}

.hero-art-label {
  position: absolute;

  top: 9%;
  left: 7%;

  display: flex;

  flex-direction: column;

  font-size: 10px;
  font-weight: 900;
}

.hero-block {
  position: absolute;

  background:
    rgba(0, 0, 0, 0.16);
}

.hero-block--1 {
  top: 34%;
  left: -25px;

  width: 170px;
  height: 32px;

  transform:
    rotate(-8deg);
}

.hero-block--2 {
  top: 20%;
  right: 10%;

  width: 90px;
  height: 210px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  background: transparent;
}

.hero-diagonal {
  position: absolute;

  left: -10%;
  bottom: 19%;

  width: 120%;
  height: 2px;

  background:
    rgba(255, 255, 255, 0.45);

  transform:
    rotate(-15deg);
}

.hero-corner-info {
  position: absolute;

  left: 7%;
  bottom: 7%;

  display: flex;

  gap: 24px;

  font-size: 8px;
  font-weight: 900;
}


/* ---------------------------------------------------------
   HERO MOTION
--------------------------------------------------------- */

.hero-speed-line {
  position: absolute;

  z-index: 8;

  height: 2px;

  background:
    var(--red);
}

.hero-speed-line--1 {
  top: 23%;

  width: 17%;

  animation:
    heroSpeedLeft
    5s linear infinite;
}

.hero-speed-line--2 {
  top: 72%;

  width: 9%;

  animation:
    heroSpeedRight
    7s linear infinite;
}

.hero-speed-line--3 {
  top: 48%;

  width: 4%;

  background:
    #FFFFFF;

  animation:
    heroSpeedLeft
    9s linear infinite;
}

@keyframes heroSpeedLeft {
  from {
    left: -20%;
  }

  to {
    left: 105%;
  }
}

@keyframes heroSpeedRight {
  from {
    right: -20%;
  }

  to {
    right: 105%;
  }
}

.hero-cross {
  position: absolute;

  z-index: 9;

  font-size: 23px;

  animation:
    rotateCross
    9s linear infinite;
}

.hero-cross--1 {
  left: 2.5%;
  top: 55%;
}

.hero-cross--2 {
  right: 2%;
  top: 15%;

  animation-direction: reverse;
}

@keyframes rotateCross {
  to {
    transform:
      rotate(360deg);
  }
}


/* ---------------------------------------------------------
   HERO MARQUEE
--------------------------------------------------------- */

.hero-marquee {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  overflow: hidden;

  background:
    var(--red);
}

.hero-marquee__track {
  width: max-content;

  padding:
    10px 0;

  white-space: nowrap;

  font-size: 8px;
  font-weight: 900;

  letter-spacing:
    0.16em;

  animation:
    heroMarquee
    18s linear infinite;
}

@keyframes heroMarquee {
  to {
    transform:
      translateX(-50%);
  }
}


/* =========================================================
   04. NORMAL SECTION FLOW
========================================================= */

/*
   重点：
   不 sticky
   不固定
   不互相覆盖

   Section 始终存在正常网页文档流中。
*/

#cities,
#official,
#supporter,
#goods,
#custom-lab,
#news {
  position: relative;

  top: auto;

  z-index: auto;

  min-height: auto;
}

.stack-section {
  position: relative;

  width: 100%;

  margin: 0;

  border-radius: 0;

  transform-origin:
    center bottom;

  backface-visibility: hidden;
}

.stack-section::before {
  content: "";

  position: absolute;

  z-index: 50;

  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(0, 0, 0, 0.18);

  pointer-events: none;
}

#supporter::before,
#news::before {
  background:
    rgba(255, 255, 255, 0.18);
}


/* =========================================================
   05. SECTION SCROLL REVEAL
========================================================= */

/*
   用户向下滚动：

   0%
   ↓
   section 在视口下方
   opacity 低
   向下偏移
   微缩小

   持续滚动
   ↓

   section 逐渐浮上来

   完全进入
   ↓

   opacity 1
   translate 0
   scale 1
*/


@supports (animation-timeline: view()) {

  .stack-section {
    animation-name:
      sectionFloatIn;

    animation-duration:
      1ms;

    animation-fill-mode:
      both;

    animation-timing-function:
      linear;

    animation-timeline:
      view();

    animation-range:
      entry 0%
      cover 32%;
  }

}

@keyframes sectionFloatIn {
  0% {
    opacity: 0.12;

    transform:
      translateY(140px)
      scale(0.97);

    filter:
      brightness(0.88);

    clip-path:
      inset(
        10% 0 0 0
      );
  }

  20% {
    opacity: 0.32;

    transform:
      translateY(110px)
      scale(0.975);

    filter:
      brightness(0.91);

    clip-path:
      inset(
        8% 0 0 0
      );
  }

  45% {
    opacity: 0.62;

    transform:
      translateY(68px)
      scale(0.985);

    filter:
      brightness(0.95);

    clip-path:
      inset(
        4% 0 0 0
      );
  }

  70% {
    opacity: 0.88;

    transform:
      translateY(27px)
      scale(0.995);

    filter:
      brightness(0.98);

    clip-path:
      inset(
        1% 0 0 0
      );
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      brightness(1);

    clip-path:
      inset(
        0 0 0 0
      );
  }
}


/* =========================================================
   06. SECTION TYPOGRAPHY REVEAL
========================================================= */

@supports (animation-timeline: view()) {

  .stack-section > .section-index,
  .stack-section > h2 {
    animation-name:
      headingFloatIn;

    animation-duration:
      1ms;

    animation-fill-mode:
      both;

    animation-timing-function:
      linear;

    animation-timeline:
      view();

    animation-range:
      entry 5%
      cover 27%;
  }

}

@keyframes headingFloatIn {
  0% {
    opacity: 0;

    transform:
      translateY(65px);
  }

  45% {
    opacity: 0.55;

    transform:
      translateY(30px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   07. SECTION MAIN CONTENT REVEAL
========================================================= */

@supports (animation-timeline: view()) {

  .city-grid,
  .city-live-preview,
  .placeholder-grid,
  .support-grid,
  .goods-grid,
  .custom-lab__grid,
  .news-box {
    animation-name:
      contentFloatIn;

    animation-duration:
      1ms;

    animation-fill-mode:
      both;

    animation-timing-function:
      linear;

    animation-timeline:
      view();

    animation-range:
      entry 7%
      cover 34%;
  }

}

@keyframes contentFloatIn {
  0% {
    opacity: 0;

    transform:
      translateY(95px);
  }

  55% {
    opacity: 0.62;

    transform:
      translateY(38px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   08. SECTION INDEX STYLE
========================================================= */

.stack-section .section-index {
  position: relative;

  display: inline-block;

  padding-left: 27px;
}

.stack-section .section-index::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 17px;
  height: 2px;

  background:
    var(--red);

  transform:
    translateY(-50%);
}


/* =========================================================
   09. CITY SECTION
========================================================= */

.city-section {
  padding:
    60px 5%
    90px;

  background:
    var(--paper);
}

.city-section h2 {
  margin:
    15px 0
    45px;

  font-size:
    clamp(
      46px,
      5.8vw,
      78px
    );

  line-height: 0.86;

  letter-spacing:
    -0.065em;
}


/* =========================================================
   10. CITY GRID
========================================================= */

.city-grid {
  display: grid;

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

  gap: 5px;
}

.city-card {
  --card-color: #E60012;

  position: relative;

  min-height: 78px;

  padding:
    0 16px;

  display: flex;

  align-items: center;

  gap: 7px;

  overflow: hidden;

  border: 0;

  background:
    #080808;

  color:
    #FFFFFF;

  cursor: pointer;

  transition:
    transform
    0.35s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.city-card::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 5px;

  background:
    var(--card-color);

  transition:
    height
    0.35s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.city-card:hover::before,
.city-card:focus-visible::before {
  height: 100%;
}

.city-card:hover,
.city-card:focus-visible {
  z-index: 3;

  transform:
    translateY(-3px);

  outline: none;
}

.city-card-code,
.city-card-name,
.city-card-arrow {
  position: relative;

  z-index: 2;
}

.city-card-code {
  font-size: 9px;
  font-weight: 900;
}

.city-card-name {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 8px;
  font-weight: 900;
}

.city-card-arrow {
  margin-left: auto;

  opacity: 0;

  font-size: 18px;

  transition:
    opacity
    0.25s ease;
}

.city-card:hover .city-card-arrow,
.city-card:focus-visible .city-card-arrow {
  opacity: 1;
}


/* =========================================================
   11. CITY CARD COLORS
========================================================= */

.city-card--changsha {
  --card-color: #E60012;
}

.city-card--zhuzhou {
  --card-color: #3157A6;
}

.city-card--xiangtan {
  --card-color: #B83E58;
}

.city-card--hengyang {
  --card-color: #7257A5;
}

.city-card--shaoyang {
  --card-color: #A33A36;
}

.city-card--yueyang {
  --card-color: #17758A;
}

.city-card--zhangjiajie {
  --card-color: #3C8A75;
}

.city-card--yiyang {
  --card-color: #12899A;
}

.city-card--changde {
  --card-color: #F3A6C6;
}

.city-card--loudi {
  --card-color: #B52E67;
}

.city-card--chenzhou {
  --card-color: #39895B;
}

.city-card--yongzhou {
  --card-color: #765078;
}

.city-card--huaihua {
  --card-color: #4D7397;
}

.city-card--xiangxi {
  --card-color: #A73568;
}


/* =========================================================
   12. CITY THEME DATA
========================================================= */

.city-theme-changsha,
.city-preview-panel--changsha {
  --city-color: #E60012;

  --city-totem:
    url("../images/cities/changsha/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/changsha/city-pip-landmark.png");

  --line-a: -8deg;
  --line-b: 12deg;
  --line-c: 0deg;
}


.city-theme-zhuzhou,
.city-preview-panel--zhuzhou {
  --city-color: #3157A6;

  --city-totem:
    url("../images/cities/zhuzhou/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/zhuzhou/city-pip-landmark.png");

  --line-a: 0deg;
  --line-b: 90deg;
  --line-c: -12deg;
}


.city-theme-xiangtan,
.city-preview-panel--xiangtan {
  --city-color: #B83E58;

  --city-totem:
    url("../images/cities/xiangtan/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/xiangtan/city-pip-landmark.png");

  --line-a: -18deg;
  --line-b: 8deg;
  --line-c: -4deg;
}


.city-theme-hengyang,
.city-preview-panel--hengyang {
  --city-color: #7257A5;

  --city-totem:
    url("../images/cities/hengyang/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/hengyang/city-pip-landmark.png");

  --line-a: -30deg;
  --line-b: 30deg;
  --line-c: 5deg;
}


.city-theme-shaoyang,
.city-preview-panel--shaoyang {
  --city-color: #A33A36;

  --city-totem:
    url("../images/cities/shaoyang/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/shaoyang/city-pip-landmark.png");

  --line-a: -12deg;
  --line-b: -2deg;
  --line-c: 18deg;
}


.city-theme-yueyang,
.city-preview-panel--yueyang {
  --city-color: #17758A;

  --city-totem:
    url("../images/cities/yueyang/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/yueyang/city-pip-landmark.png");

  --line-a: 6deg;
  --line-b: -6deg;
  --line-c: 0deg;
}


.city-theme-zhangjiajie,
.city-preview-panel--zhangjiajie {
  --city-color: #3C8A75;

  --city-totem:
    url("../images/cities/zhangjiajie/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/zhangjiajie/city-pip-landmark.png");

  --line-a: 76deg;
  --line-b: -18deg;
  --line-c: 82deg;
}


.city-theme-yiyang,
.city-preview-panel--yiyang {
  --city-color: #12899A;

  --city-totem:
    url("../images/cities/yiyang/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/yiyang/city-pip-landmark.png");

  --line-a: 22deg;
  --line-b: -22deg;
  --line-c: 4deg;
}


.city-theme-changde,
.city-preview-panel--changde {
  --city-color: #F3A6C6;

  --city-totem:
    url("../images/cities/changde/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/changde/city-pip-landmark.png");

  --line-a: 0deg;
  --line-b: -10deg;
  --line-c: 12deg;
}


.city-theme-loudi,
.city-preview-panel--loudi {
  --city-color: #B52E67;

  --city-totem:
    url("../images/cities/loudi/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/loudi/city-pip-landmark.png");

  --line-a: 35deg;
  --line-b: -35deg;
  --line-c: 0deg;
}


.city-theme-chenzhou,
.city-preview-panel--chenzhou {
  --city-color: #39895B;

  --city-totem:
    url("../images/cities/chenzhou/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/chenzhou/city-pip-landmark.png");

  --line-a: -24deg;
  --line-b: 8deg;
  --line-c: -6deg;
}


.city-theme-yongzhou,
.city-preview-panel--yongzhou {
  --city-color: #765078;

  --city-totem:
    url("../images/cities/yongzhou/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/yongzhou/city-pip-landmark.png");

  --line-a: 14deg;
  --line-b: 90deg;
  --line-c: -12deg;
}


.city-theme-huaihua,
.city-preview-panel--huaihua {
  --city-color: #4D7397;

  --city-totem:
    url("../images/cities/huaihua/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/huaihua/city-pip-landmark.png");

  --line-a: -6deg;
  --line-b: 28deg;
  --line-c: 3deg;
}


.city-theme-xiangxi,
.city-preview-panel--xiangxi {
  --city-color: #A73568;

  --city-totem:
    url("../images/cities/xiangxi/city-pip-totem.png");

  --city-landmark:
    url("../images/cities/xiangxi/city-pip-landmark.png");

  --line-a: -28deg;
  --line-b: 28deg;
  --line-c: 0deg;
}


/* =========================================================
   13. CITY LIVE PREVIEW
========================================================= */

.city-live-preview {
  position: relative;

  height: 410px;

  margin-top: 8px;

  overflow: hidden;

  background:
    #080808;
}

.city-preview-panel {
  position: absolute;

  inset: 0;

  opacity: 0;

  overflow: hidden;

  pointer-events: none;

  background:
    linear-gradient(
      108deg,
      #080808 0%,
      #080808 42%,
      var(--city-color) 42%,
      var(--city-color) 100%
    );

  color:
    #FFFFFF;

  transition:
    opacity
    0.28s
    ease;
}

.city-preview-panel--changsha {
  opacity: 1;

  pointer-events: auto;
}


/* =========================================================
   14. CITY HOVER SWITCH
========================================================= */

.city-section:has(.city-card--changsha:hover) .city-preview-panel,
.city-section:has(.city-card--changsha:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--changsha:hover) .city-preview-panel--changsha,
.city-section:has(.city-card--changsha:focus-visible) .city-preview-panel--changsha {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--zhuzhou:hover) .city-preview-panel,
.city-section:has(.city-card--zhuzhou:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--zhuzhou:hover) .city-preview-panel--zhuzhou,
.city-section:has(.city-card--zhuzhou:focus-visible) .city-preview-panel--zhuzhou {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--xiangtan:hover) .city-preview-panel,
.city-section:has(.city-card--xiangtan:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--xiangtan:hover) .city-preview-panel--xiangtan,
.city-section:has(.city-card--xiangtan:focus-visible) .city-preview-panel--xiangtan {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--hengyang:hover) .city-preview-panel,
.city-section:has(.city-card--hengyang:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--hengyang:hover) .city-preview-panel--hengyang,
.city-section:has(.city-card--hengyang:focus-visible) .city-preview-panel--hengyang {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--shaoyang:hover) .city-preview-panel,
.city-section:has(.city-card--shaoyang:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--shaoyang:hover) .city-preview-panel--shaoyang,
.city-section:has(.city-card--shaoyang:focus-visible) .city-preview-panel--shaoyang {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--yueyang:hover) .city-preview-panel,
.city-section:has(.city-card--yueyang:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--yueyang:hover) .city-preview-panel--yueyang,
.city-section:has(.city-card--yueyang:focus-visible) .city-preview-panel--yueyang {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--zhangjiajie:hover) .city-preview-panel,
.city-section:has(.city-card--zhangjiajie:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--zhangjiajie:hover) .city-preview-panel--zhangjiajie,
.city-section:has(.city-card--zhangjiajie:focus-visible) .city-preview-panel--zhangjiajie {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--yiyang:hover) .city-preview-panel,
.city-section:has(.city-card--yiyang:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--yiyang:hover) .city-preview-panel--yiyang,
.city-section:has(.city-card--yiyang:focus-visible) .city-preview-panel--yiyang {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--changde:hover) .city-preview-panel,
.city-section:has(.city-card--changde:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--changde:hover) .city-preview-panel--changde,
.city-section:has(.city-card--changde:focus-visible) .city-preview-panel--changde {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--loudi:hover) .city-preview-panel,
.city-section:has(.city-card--loudi:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--loudi:hover) .city-preview-panel--loudi,
.city-section:has(.city-card--loudi:focus-visible) .city-preview-panel--loudi {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--chenzhou:hover) .city-preview-panel,
.city-section:has(.city-card--chenzhou:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--chenzhou:hover) .city-preview-panel--chenzhou,
.city-section:has(.city-card--chenzhou:focus-visible) .city-preview-panel--chenzhou {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--yongzhou:hover) .city-preview-panel,
.city-section:has(.city-card--yongzhou:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--yongzhou:hover) .city-preview-panel--yongzhou,
.city-section:has(.city-card--yongzhou:focus-visible) .city-preview-panel--yongzhou {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--huaihua:hover) .city-preview-panel,
.city-section:has(.city-card--huaihua:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--huaihua:hover) .city-preview-panel--huaihua,
.city-section:has(.city-card--huaihua:focus-visible) .city-preview-panel--huaihua {
  opacity: 1;

  pointer-events: auto;
}


.city-section:has(.city-card--xiangxi:hover) .city-preview-panel,
.city-section:has(.city-card--xiangxi:focus-visible) .city-preview-panel {
  opacity: 0;

  pointer-events: none;
}

.city-section:has(.city-card--xiangxi:hover) .city-preview-panel--xiangxi,
.city-section:has(.city-card--xiangxi:focus-visible) .city-preview-panel--xiangxi {
  opacity: 1;

  pointer-events: auto;
}


/* =========================================================
   15. CITY VISUAL
========================================================= */

.city-preview-visual,
.city-popup-visual {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.city-preview-grid,
.city-popup-grid {
  position: absolute;

  inset: 0;

  opacity: 0.12;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.22) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  animation:
    cityGridMove
    14s linear infinite;
}

@keyframes cityGridMove {
  to {
    background-position:
      58px 58px;
  }
}


/* ---------------------------------------------------------
   TOTEM
--------------------------------------------------------- */

.city-preview-totem,
.city-popup-totem {
  position: absolute;

  top: 4%;
  right: -2%;

  width: 54%;
  height: 88%;

  background:
    rgba(255, 255, 255, 0.17);

  -webkit-mask-image:
    var(--city-totem);

  mask-image:
    var(--city-totem);

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  animation:
    cityTotemMove
    7s
    ease-in-out
    infinite alternate;
}

@keyframes cityTotemMove {
  from {
    opacity: 0.3;

    transform:
      scale(1)
      rotate(-4deg);
  }

  to {
    opacity: 0.5;

    transform:
      scale(1.07)
      rotate(-1deg);
  }
}


/* ---------------------------------------------------------
   LANDMARK
--------------------------------------------------------- */

.city-preview-landmark,
.city-popup-landmark {
  position: absolute;

  right: 0;
  bottom: -1%;

  width: 67%;
  height: 46%;

  background:
    rgba(255, 255, 255, 0.30);

  -webkit-mask-image:
    var(--city-landmark);

  mask-image:
    var(--city-landmark);

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;

  -webkit-mask-position:
    right bottom;

  mask-position:
    right bottom;

  animation:
    cityLandscapeMove
    8s
    ease-in-out
    infinite alternate;
}

@keyframes cityLandscapeMove {
  from {
    transform:
      translateX(8px);
  }

  to {
    transform:
      translateX(-12px);
  }
}


/* ---------------------------------------------------------
   BIG CODE
--------------------------------------------------------- */

.city-preview-big-code,
.city-popup-big-code {
  position: absolute;

  right: 2%;
  bottom: -12%;

  color:
    rgba(255, 255, 255, 0.07);

  font-size:
    clamp(
      180px,
      20vw,
      330px
    );

  line-height: 0.75;

  font-weight: 900;

  white-space: nowrap;
}

.city-preview-index,
.city-popup-index {
  position: absolute;

  top: 7%;
  right: 3%;

  color:
    rgba(255, 255, 255, 0.56);

  font-size: 64px;
  font-weight: 900;
}

.city-preview-cross,
.city-popup-cross {
  position: absolute;

  top: 8%;
  right: 29%;

  color:
    #FFFFFF;

  font-size: 26px;

  animation:
    rotateCross
    8s linear infinite;
}


/* =========================================================
   16. CITY MOTION LINES
========================================================= */

.city-line,
.city-popup-line {
  position: absolute;

  height: 2px;

  pointer-events: none;
}

.city-line-a,
.city-popup-line-a {
  top: 30%;
  left: -55%;

  width: 48%;

  background:
    rgba(255, 255, 255, 0.78);

  animation:
    cityLineA
    5.5s linear infinite;
}

.city-line-b,
.city-popup-line-b {
  top: 58%;
  right: -45%;

  width: 38%;

  background:
    rgba(0, 0, 0, 0.42);

  animation:
    cityLineB
    8s linear infinite;
}

.city-line-c,
.city-popup-line-c {
  top: 76%;
  left: -35%;

  width: 23%;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.45);

  animation:
    cityLineC
    11s linear infinite;
}

@keyframes cityLineA {
  from {
    left: -55%;

    transform:
      rotate(
        var(--line-a)
      );
  }

  to {
    left: 115%;

    transform:
      rotate(
        var(--line-a)
      );
  }
}

@keyframes cityLineB {
  from {
    right: -45%;

    transform:
      rotate(
        var(--line-b)
      );
  }

  to {
    right: 115%;

    transform:
      rotate(
        var(--line-b)
      );
  }
}

@keyframes cityLineC {
  from {
    left: -35%;

    transform:
      rotate(
        var(--line-c)
      );
  }

  to {
    left: 115%;

    transform:
      rotate(
        var(--line-c)
      );
  }
}


/* =========================================================
   17. CITY PREVIEW TEXT
========================================================= */

.city-preview-content {
  position: relative;

  z-index: 20;

  width: 44%;
  height: 100%;

  padding:
    50px 32px
    30px;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8, 8, 8, 0.97) 78%,
      rgba(8, 8, 8, 0.12) 100%
    );
}

.city-preview-content > span {
  color:
    var(--city-color);

  font-size: 10px;
  font-weight: 900;
}

.city-preview-content h3 {
  margin:
    12px 0 20px;

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

  line-height: 0.78;

  letter-spacing:
    -0.075em;
}

.city-preview-content p {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 10px;

  line-height: 1.55;
}

.city-preview-content > a {
  margin-top: auto;

  padding:
    16px 18px;

  background:
    var(--city-color);

  color:
    #FFFFFF;

  font-size: 9px;
  font-weight: 900;
}


/* =========================================================
   18. CITY POPUP
========================================================= */

.city-popup {
  width:
    min(
      1120px,
      92vw
    );

  height:
    min(
      720px,
      88vh
    );

  padding: 0;

  border: 0;

  overflow: hidden;

  background:
    linear-gradient(
      108deg,
      #080808 0%,
      #080808 42%,
      var(--city-color) 42%,
      var(--city-color) 100%
    );

  color:
    #FFFFFF;

  box-shadow:
    0 45px 130px
    rgba(0, 0, 0, 0.58);
}

.city-popup::backdrop {
  background:
    rgba(0, 0, 0, 0.72);

  backdrop-filter:
    blur(8px);
}

.city-popup:popover-open {
  animation:
    cityPopupOpen
    0.5s
    cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cityPopupOpen {
  from {
    opacity: 0;

    transform:
      scale(0.965)
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      translateY(0);
  }
}

.city-popup-close {
  position: absolute;

  z-index: 100;

  top: 18px;
  right: 18px;

  width: 40px;
  height: 40px;

  display: flex;

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

  border:
    1px solid
    rgba(255, 255, 255, 0.4);

  background:
    rgba(0, 0, 0, 0.26);

  color:
    #FFFFFF;

  font-size: 23px;

  cursor: pointer;
}

.city-popup-content {
  position: relative;

  z-index: 30;

  width: 44%;
  height: 100%;

  padding:
    50px 32px
    30px;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 8, 1),
      rgba(8, 8, 8, 0.96) 80%,
      rgba(8, 8, 8, 0.14)
    );
}

.city-popup-code {
  color:
    var(--city-color);

  font-size: 10px;
  font-weight: 900;
}

.city-popup-content h3 {
  margin:
    12px 0 20px;

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

  line-height: 0.78;

  letter-spacing:
    -0.075em;
}

.city-popup-content p {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 10px;

  line-height: 1.55;
}

.city-popup-menu {
  margin-top: 26px;

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

.city-popup-menu a {
  padding:
    12px 3px;

  display: grid;

  grid-template-columns:
    42px 1fr auto;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.14);

  color:
    #FFFFFF;

  font-size: 9px;
  font-weight: 900;

  opacity: 0;

  transform:
    translateX(-18px);
}

.city-popup-menu a span {
  color:
    var(--city-color);
}

.city-popup:popover-open
.city-popup-menu a {
  animation:
    popupMenuReveal
    0.45s
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.city-popup:popover-open
.city-popup-menu a:nth-child(1) {
  animation-delay: 0.08s;
}

.city-popup:popover-open
.city-popup-menu a:nth-child(2) {
  animation-delay: 0.12s;
}

.city-popup:popover-open
.city-popup-menu a:nth-child(3) {
  animation-delay: 0.16s;
}

.city-popup:popover-open
.city-popup-menu a:nth-child(4) {
  animation-delay: 0.20s;
}

.city-popup:popover-open
.city-popup-menu a:nth-child(5) {
  animation-delay: 0.24s;
}

@keyframes popupMenuReveal {
  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}

.city-popup-enter {
  margin-top: auto;

  padding:
    16px 18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  background:
    var(--city-color);

  color:
    #FFFFFF;

  font-size: 9px;
  font-weight: 900;
}


/* =========================================================
   19. COMMON HOME SECTIONS
========================================================= */

.placeholder-section {
  padding:
    65px 5%
    80px;

  border-radius: 0;
}

.light {
  background:
    var(--paper);
}

.dark {
  background:
    #080808;

  color:
    #FFFFFF;
}

.placeholder-section h2,
.news h2 {
  margin:
    15px 0 40px;

  font-size:
    clamp(
      50px,
      6vw,
      82px
    );

  line-height: 0.86;

  letter-spacing:
    -0.065em;
}


/* =========================================================
   20. OFFICIAL SECTION
========================================================= */

.placeholder-grid {
  display: grid;

  grid-template-columns:
    1.3fr 0.8fr;
}

.product-image {
  position: relative;

  min-height: 440px;

  overflow: hidden;

  background:
    #CCC8BD;
}

.product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.85s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.product-image:hover img {
  transform:
    scale(1.025);
}

.product-info {
  position: relative;

  padding:
    42px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  background:
    #090909;

  color:
    #FFFFFF;
}

.product-info::before {
  content: "";

  position: absolute;

  top: 0;
  left: 42px;
  right: 42px;

  height: 1px;

  background:
    rgba(255, 255, 255, 0.16);
}

.product-info h3 {
  margin:
    20px 0
    18px;

  font-size: 30px;

  line-height: 0.95;

  letter-spacing:
    -0.04em;
}

.product-info p {
  max-width: 320px;

  color:
    #AAAAAA;

  font-size: 11px;

  line-height: 1.65;
}

.red-label {
  color:
    var(--red);

  font-size: 9px;
  font-weight: 900;
}

.section-link {
  display: inline-block;

  margin-top: 35px;

  font-size: 8px;
  font-weight: 900;
}


/* ---------------------------------------------------------
   OFFICIAL FLOAT REVEAL
--------------------------------------------------------- */

@supports (animation-timeline: view()) {

  #official .product-image {
    animation:
      officialImageReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 5%
      cover 30%;
  }

  #official .product-info {
    animation:
      officialInfoReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 10%
      cover 35%;
  }

}

@keyframes officialImageReveal {
  from {
    opacity: 0;

    transform:
      translateY(85px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes officialInfoReveal {
  from {
    opacity: 0;

    transform:
      translateY(120px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   21. SUPPORTER SECTION
========================================================= */

.support-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 0;

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

.support-product {
  overflow: hidden;

  background:
    #EEEAE0;

  color:
    #111111;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.support-product:last-child {
  border-right: 0;
}

.home-product,
.away-product {
  position: relative;

  height: 360px;

  overflow: hidden;

  background:
    #D7D3C8;
}

.home-product img,
.away-product img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.85s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.support-product:hover img {
  transform:
    scale(1.025);
}

.support-kit-tag {
  position: absolute;

  z-index: 4;

  top: 18px;
  left: 18px;

  padding:
    7px 10px;

  background:
    #080808;

  color:
    #FFFFFF;

  font-size: 8px;
  font-weight: 900;

  letter-spacing:
    0.12em;
}

.support-product-info {
  padding:
    20px 21px
    24px;
}

.support-product-info > span {
  color:
    var(--red);

  font-size: 8px;
  font-weight: 900;
}

.support-product-info h3 {
  margin:
    8px 0 15px;

  font-size: 18px;

  letter-spacing:
    -0.025em;
}


/* SUPPORTER STAGGER */

@supports (animation-timeline: view()) {

  #supporter .support-product:first-child {
    animation:
      supporterLeftReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 3%
      cover 30%;
  }

  #supporter .support-product:last-child {
    animation:
      supporterRightReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 8%
      cover 34%;
  }

}

@keyframes supporterLeftReveal {
  from {
    opacity: 0;

    transform:
      translateY(80px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes supporterRightReveal {
  from {
    opacity: 0;

    transform:
      translateY(115px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   22. GOODS
========================================================= */

.goods-grid {
  display: grid;

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

  gap: 0;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.22);

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.22);
}

.goods-grid article {
  padding:
    0 16px
    24px;

  border-right:
    1px solid
    rgba(0, 0, 0, 0.22);
}

.goods-grid article:first-child {
  padding-left: 0;
}

.goods-grid article:last-child {
  padding-right: 0;

  border-right: 0;
}

.goods-image {
  height: 320px;

  overflow: hidden;

  background:
    #D0C9BB;
}

.goods-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.85s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.goods-grid article:hover
.goods-image img {
  transform:
    scale(1.025);
}

.goods-grid article > span {
  display: block;

  margin-top: 14px;

  color:
    var(--red);

  font-size: 8px;
  font-weight: 900;
}

.goods-grid h3 {
  margin-bottom: 0;

  font-size: 12px;
}


/* GOODS STAGGER */

@supports (animation-timeline: view()) {

  #goods .goods-grid article:nth-child(1) {
    animation:
      goodsOneReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 2%
      cover 29%;
  }

  #goods .goods-grid article:nth-child(2) {
    animation:
      goodsTwoReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 6%
      cover 32%;
  }

  #goods .goods-grid article:nth-child(3) {
    animation:
      goodsThreeReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 10%
      cover 35%;
  }

}

@keyframes goodsOneReveal {
  from {
    opacity: 0;

    transform:
      translateY(70px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes goodsTwoReveal {
  from {
    opacity: 0;

    transform:
      translateY(100px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes goodsThreeReveal {
  from {
    opacity: 0;

    transform:
      translateY(130px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   23. CUSTOM STATE
   FIX JUMP
========================================================= */

/*
   radio 完全不参与 layout。

   label 点击仍然可以：
   - 选择颜色
   - 选择姓名
   - 选择号码
   - 选择产品

   同时不会把页面滚回 custom section 顶部。
*/

.custom-state {
  display: none !important;
}


/* =========================================================
   24. CUSTOM LAB
========================================================= */

.custom-lab {
  position: relative;

  background:
    var(--paper);
}

.custom-lab__header {
  padding:
    72px 5%
    56px;

  display: grid;

  grid-template-columns:
    1.45fr 0.55fr;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.30);
}

.custom-lab__title {
  margin:
    20px 0 0;

  font-size:
    clamp(
      76px,
      10vw,
      138px
    );

  line-height: 0.74;

  font-weight: 900;

  letter-spacing:
    -0.08em;
}

.custom-lab__intro {
  padding-left: 25px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border-left:
    1px solid
    rgba(0, 0, 0, 0.28);

  font-size: 11px;
  font-weight: 900;
}

.custom-lab__intro p {
  line-height: 1.35;
}

.custom-lab__intro span {
  color:
    #77736A;

  font-size: 8px;

  letter-spacing:
    0.08em;
}

.custom-lab__grid {
  min-height: 760px;

  display: grid;

  grid-template-columns:
    0.82fr 1.18fr;
}


/* =========================================================
   25. CUSTOM PANEL
========================================================= */

.custom-panel {
  padding:
    48px 7%;

  border-right:
    1px solid
    rgba(0, 0, 0, 0.30);
}

.custom-field {
  margin-bottom: 30px;

  padding-bottom: 28px;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.24);
}

.custom-field__top {
  margin-bottom: 16px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  font-size: 9px;
  font-weight: 900;
}

.custom-field__top span {
  color:
    var(--red);
}


/* SELECT */

.custom-field select {
  width: 100%;

  padding:
    15px 0;

  border: 0;

  border-bottom:
    2px solid
    #111111;

  outline: none;

  border-radius: 0;

  background:
    transparent;

  color:
    #111111;

  font-size: 17px;
  font-weight: 900;
}


/* =========================================================
   26. PRODUCT TABS
========================================================= */

.product-tabs {
  display: grid;

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

  gap: 1px;

  background:
    #111111;
}

.product-tab {
  min-height: 52px;

  padding:
    0 8px;

  display: flex;

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

  background:
    var(--paper);

  color:
    #111111;

  font-size: 9px;
  font-weight: 900;

  text-align: center;

  transition:
    background-color
    0.2s ease,
    color
    0.2s ease;
}

.product-tab:hover {
  background:
    #E2DDD2;
}

#productHome:checked
~ .custom-lab__header
+ .custom-lab__grid
.product-tab--home,

#productSupporter:checked
~ .custom-lab__header
+ .custom-lab__grid
.product-tab--supporter,

#productBag:checked
~ .custom-lab__header
+ .custom-lab__grid
.product-tab--bag {
  background:
    #111111;

  color:
    #FFFFFF;
}


/* =========================================================
   27. NAME / NUMBER CHOICES
========================================================= */

.custom-choice-grid {
  display: grid;

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

  gap: 1px;

  background:
    #111111;
}

.custom-number-options {
  grid-template-columns:
    repeat(5, 1fr);
}

.custom-choice {
  min-height: 52px;

  padding:
    0 10px;

  display: flex;

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

  background:
    var(--paper);

  color:
    #111111;

  font-size: 9px;
  font-weight: 900;

  text-align: center;

  transition:
    background-color
    0.2s ease,
    color
    0.2s ease;
}

.custom-choice:hover {
  background:
    #E2DDD2;
}


/* NAME SELECTED */

#nameHunan:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-choice--hunan,

#nameHNFL:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-choice--hnfl,

#nameCity:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-choice--city,

#namePlayer:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-choice--player {
  background:
    #111111;

  color:
    #FFFFFF;
}


/* NUMBER SELECTED */

#number07:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-choice--07,

#number10:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-choice--10,

#number14:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-choice--14,

#number26:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-choice--26,

#number99:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-choice--99 {
  background:
    #111111;

  color:
    #FFFFFF;
}


/* =========================================================
   28. COLOR OPTIONS
========================================================= */

.color-options {
  display: flex;

  align-items: center;

  gap: 17px;
}

.color-dot {
  width: 43px;
  height: 43px;

  display: block;

  flex-shrink: 0;

  border-radius: 50%;

  transition:
    box-shadow
    0.2s ease;
}

.color-dot:hover {
  box-shadow:
    0 0 0 5px
    rgba(0, 0, 0, 0.08);
}

.color-dot--red {
  background:
    #E60012;
}

.color-dot--green {
  background:
    #8BAA98;
}

.color-dot--pink {
  background:
    #E78DAA;
}

.color-dot--blue {
  background:
    #28547D;
}

.color-dot--ivory {
  background:
    #E9E5DA;
}


/* SELECTED COLOR */

#colorRed:checked
~ .custom-lab__header
+ .custom-lab__grid
.color-dot--red,

#colorGreen:checked
~ .custom-lab__header
+ .custom-lab__grid
.color-dot--green,

#colorPink:checked
~ .custom-lab__header
+ .custom-lab__grid
.color-dot--pink,

#colorBlue:checked
~ .custom-lab__header
+ .custom-lab__grid
.color-dot--blue,

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.color-dot--ivory {
  outline:
    2px solid
    #111111;

  outline-offset:
    5px;
}


/* =========================================================
   29. CUSTOM ORDER
========================================================= */

.custom-order {
  margin-top: 45px;

  padding-top: 28px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.24);
}

.custom-order__label {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 900;
}

.custom-order strong {
  font-size: 32px;

  letter-spacing:
    -0.04em;
}

.custom-order__button {
  min-width: 215px;

  padding:
    17px 20px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  background:
    var(--red);

  color:
    #FFFFFF;

  font-size: 9px;
  font-weight: 900;
}


/* =========================================================
   30. CUSTOM PREVIEW
========================================================= */

.custom-preview {
  position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background:
    #090909;

  color:
    #FFFFFF;
}

.preview-meta,
.preview-footer {
  position: relative;

  z-index: 10;

  padding:
    16px 22px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  color:
    #777777;

  font-size: 8px;

  letter-spacing:
    0.15em;
}

.preview-stage {
  position: relative;

  flex: 1;

  min-height: 690px;

  display: flex;

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

  overflow: hidden;
}


/* CUSTOM SCROLL */

@supports (animation-timeline: view()) {

  #custom-lab .custom-panel {
    animation:
      customPanelReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 3%
      cover 30%;
  }

  #custom-lab .custom-preview {
    animation:
      customPreviewReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 8%
      cover 35%;
  }

}

@keyframes customPanelReveal {
  from {
    opacity: 0;

    transform:
      translateY(85px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes customPreviewReveal {
  from {
    opacity: 0;

    transform:
      translateY(125px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   31. PREVIEW BACKGROUND
========================================================= */

.motion-grid {
  position: absolute;

  inset: 0;

  opacity: 0.085;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;

  animation:
    customGridMove
    12s linear infinite;
}

@keyframes customGridMove {
  to {
    background-position:
      64px 64px;
  }
}

.motion-city-text {
  position: absolute;

  top: 8%;
  left: -5%;

  color:
    rgba(255, 255, 255, 0.035);

  font-size:
    clamp(
      70px,
      10vw,
      150px
    );

  line-height: 0.8;

  font-weight: 900;

  letter-spacing:
    -0.07em;
}

.preview-big-number {
  position: absolute;

  top: 50%;
  left: 50%;

  color: transparent;

  font-size:
    clamp(
      230px,
      30vw,
      430px
    );

  line-height: 0.75;

  font-weight: 900;

  letter-spacing:
    -0.08em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.12);

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


/* =========================================================
   32. CUSTOM MOTION OBJECTS
========================================================= */

.motion-cross,
.motion-line,
.motion-box,
.scan-line {
  position: absolute;
}

.motion-cross {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 20px;
}

.motion-cross--1 {
  top: 12%;
  right: 8%;
}

.motion-cross--2 {
  left: 9%;
  bottom: 18%;
}

.motion-line {
  height: 2px;

  background:
    var(--red);
}

.motion-line--1 {
  top: 25%;
  left: -40%;

  width: 35%;

  animation:
    customLineOne
    6s linear infinite;
}

.motion-line--2 {
  right: -30%;
  bottom: 30%;

  width: 25%;

  animation:
    customLineTwo
    8s linear infinite;
}

@keyframes customLineOne {
  to {
    left: 110%;
  }
}

@keyframes customLineTwo {
  to {
    right: 110%;
  }
}

.motion-box {
  border:
    1px solid
    rgba(255, 255, 255, 0.18);
}

.motion-box--1 {
  top: 17%;
  left: 12%;

  width: 90px;
  height: 90px;

  opacity: 0.38;
}

.motion-box--2 {
  right: 13%;
  top: 40%;

  width: 55px;
  height: 140px;

  opacity: 0.42;

  border-color:
    var(--red);
}

.scan-line {
  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  opacity: 0.26;

  background:
    linear-gradient(
      90deg,
      transparent,
      #FFFFFF,
      var(--red),
      #FFFFFF,
      transparent
    );

  animation:
    customScan
    6s linear infinite;
}

@keyframes customScan {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}


/* =========================================================
   33. JERSEY
========================================================= */

.jersey {
  --jersey-color:
    #8BAA98;

  position: relative;

  z-index: 10;

  width: 370px;
  height: 430px;

  filter:
    drop-shadow(
      0 28px 28px
      rgba(0, 0, 0, 0.38)
    );

  transition:
    transform
    0.65s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-preview:hover .jersey {
  transform:
    translateY(-7px);
}

.jersey-floor-shadow {
  position: absolute;

  left: 50%;
  bottom: 4px;

  width: 220px;
  height: 28px;

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.38);

  filter:
    blur(14px);

  transform:
    translateX(-50%);
}


/* ---------------------------------------------------------
   JERSEY BODY
--------------------------------------------------------- */

.jersey-body {
  position: absolute;

  z-index: 5;

  top: 35px;
  left: 50%;

  width: 225px;
  height: 342px;

  overflow: hidden;

  background:
    var(--jersey-color);

  clip-path:
    polygon(
      13% 0%,
      34% 0%,
      43% 8%,
      57% 8%,
      66% 0%,
      87% 0%,
      95% 14%,
      92% 30%,
      89% 54%,
      91% 100%,
      9% 100%,
      11% 54%,
      8% 30%,
      5% 14%
    );

  transform:
    translateX(-50%);

  transition:
    background-color
    0.45s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.jersey-body::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22),
      transparent 32%,
      transparent 68%,
      rgba(255, 255, 255, 0.08)
    );
}

.jersey-fabric {
  position: absolute;

  inset: 0;

  opacity: 0.22;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 3px
    );
}


/* ---------------------------------------------------------
   SLEEVES
--------------------------------------------------------- */

.jersey-sleeve {
  position: absolute;

  z-index: 4;

  top: 43px;

  width: 118px;
  height: 145px;

  overflow: hidden;

  background:
    var(--jersey-color);

  transition:
    background-color
    0.45s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.jersey-sleeve-left {
  left: 17px;

  clip-path:
    polygon(
      44% 0,
      100% 9%,
      88% 78%,
      65% 100%,
      4% 79%,
      0 60%
    );
}

.jersey-sleeve-right {
  right: 17px;

  clip-path:
    polygon(
      0 9%,
      56% 0,
      100% 60%,
      96% 79%,
      35% 100%,
      12% 78%
    );
}

.jersey-sleeve-highlight {
  position: absolute;

  top: -25%;
  left: 20%;

  width: 75%;
  height: 150%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.14),
      transparent
    );
}

.jersey-sleeve-cuff {
  position: absolute;

  bottom: 11px;

  width: 75%;
  height: 7px;

  background:
    rgba(0, 0, 0, 0.26);
}


/* ---------------------------------------------------------
   SHOULDERS
--------------------------------------------------------- */

.jersey-shoulder {
  position: absolute;

  top: 0;

  width: 47%;
  height: 50px;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.13),
      rgba(0, 0, 0, 0.05)
    );
}

.jersey-shoulder-left {
  left: 0;
}

.jersey-shoulder-right {
  right: 0;
}


/* ---------------------------------------------------------
   SIDE SHADOWS
--------------------------------------------------------- */

.jersey-side {
  position: absolute;

  top: 85px;

  width: 18px;
  height: 230px;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.38),
      rgba(0, 0, 0, 0.09)
    );
}

.jersey-side-left {
  left: 10px;
}

.jersey-side-right {
  right: 10px;
}

.jersey-body-light {
  position: absolute;

  top: 30px;
  left: 48%;

  width: 45px;
  height: 290px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
}


/* ---------------------------------------------------------
   COLLAR
--------------------------------------------------------- */

.jersey-collar {
  position: absolute;

  z-index: 20;

  top: -3px;
  left: 50%;

  width: 67px;
  height: 35px;

  background:
    #151515;

  border-radius:
    0 0 42px 42px;

  transform:
    translateX(-50%);
}

.jersey-collar-inner {
  position: absolute;

  left: 50%;

  width: 47px;
  height: 22px;

  background:
    #090909;

  border-radius:
    0 0 34px 34px;

  transform:
    translateX(-50%);
}


/* ---------------------------------------------------------
   JERSEY TEXT
--------------------------------------------------------- */

.jersey-brand,
.jersey-city-code,
.jersey-number,
.jersey-name {
  position: absolute;

  z-index: 30;

  left: 50%;

  color:
    #FFFFFF;

  font-weight: 900;

  transform:
    translateX(-50%);
}

.jersey-brand {
  top: 43px;

  font-size: 10px;
}

.jersey-city-code {
  top: 65px;

  font-size: 9px;
}

.jersey-number {
  top: 103px;

  min-width: 160px;

  text-align: center;

  font-size: 90px;

  line-height: 0.85;

  letter-spacing:
    -0.075em;
}

.jersey-name {
  top: 195px;

  width: 78%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  text-align: center;

  font-size: 15px;
}

.jersey-hem {
  position: absolute;

  left: 9%;
  right: 9%;
  bottom: 9px;

  height: 5px;

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

.jersey-seam {
  position: absolute;

  top: 70px;
  bottom: 25px;

  width: 1px;

  background:
    rgba(255, 255, 255, 0.12);
}

.jersey-seam-left {
  left: 20px;
}

.jersey-seam-right {
  right: 20px;
}


/* =========================================================
   34. JERSEY COLOR STATES
========================================================= */

#colorRed:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey {
  --jersey-color:
    #E60012;
}

#colorGreen:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey {
  --jersey-color:
    #8BAA98;
}

#colorPink:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey {
  --jersey-color:
    #E78DAA;
}

#colorBlue:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey {
  --jersey-color:
    #28547D;
}

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey {
  --jersey-color:
    #E9E5DA;
}


/* IVORY TEXT */

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey-brand,

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey-city-code,

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey-number,

#colorIvory:checked
~ .custom-lab__header
+ .custom-lab__grid
.jersey-name {
  color:
    #151515;
}


/* =========================================================
   35. NAME / NUMBER VALUES
========================================================= */

.name-value,
.number-value {
  display: none;
}


/* NAME */

#nameHunan:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-value--hunan {
  display: inline;
}

#nameHNFL:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-value--hnfl {
  display: inline;
}

#nameCity:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-value--city {
  display: inline;
}

#namePlayer:checked
~ .custom-lab__header
+ .custom-lab__grid
.name-value--player {
  display: inline;
}


/* NUMBER */

#number07:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-value--07 {
  display: inline;
}

#number10:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-value--10 {
  display: inline;
}

#number14:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-value--14 {
  display: inline;
}

#number26:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-value--26 {
  display: inline;
}

#number99:checked
~ .custom-lab__header
+ .custom-lab__grid
.number-value--99 {
  display: inline;
}


/* =========================================================
   36. PREVIEW BOTTOM INFO
========================================================= */

.preview-city-info {
  position: absolute;

  z-index: 12;

  left: 24px;
  bottom: 22px;
}

.preview-city-info p {
  margin: 0;

  font-size: 25px;
  font-weight: 900;

  letter-spacing:
    -0.05em;
}

.preview-city-info p::after {
  content: "";

  display: block;

  width: 60px;
  height: 2px;

  margin-top: 8px;

  background:
    var(--red);
}

.preview-city-info span {
  color:
    #888888;

  font-size: 8px;
}

.motion-index {
  position: absolute;

  z-index: 12;

  right: 22px;
  bottom: 23px;

  display: flex;

  flex-direction: column;

  text-align: right;

  color:
    #777777;
}

.motion-index > span:last-child {
  color:
    #FFFFFF;

  font-size: 35px;
  font-weight: 900;
}


/* =========================================================
   37. NEWS HOME
========================================================= */

.news {
  padding:
    65px 5%
    80px;

  background:
    var(--red);

  color:
    #FFFFFF;
}

.news-box {
  display: grid;

  grid-template-columns:
    1.5fr 0.8fr;
}

.news-main {
  min-height: 320px;

  overflow: hidden;

  background:
    #171717;
}

.news-main img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.85s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.news-main:hover img {
  transform:
    scale(1.025);
}

.news-list article {
  min-height: 96px;

  padding:
    28px;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.16);

  font-size: 12px;
  font-weight: 900;

  line-height: 1.25;
}


/* NEWS STAGGER */

@supports (animation-timeline: view()) {

  #news .news-main {
    animation:
      newsMainReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 3%
      cover 30%;
  }

  #news .news-list {
    animation:
      newsListReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 8%
      cover 35%;
  }

}

@keyframes newsMainReveal {
  from {
    opacity: 0;

    transform:
      translateY(85px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes newsListReveal {
  from {
    opacity: 0;

    transform:
      translateY(125px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   38. IMAGE SCROLL EFFECT
========================================================= */

@supports (animation-timeline: view()) {

  .product-image img,
  .home-product img,
  .away-product img,
  .goods-image img,
  .news-main img {
    animation:
      imageScrollReveal
      1ms linear both;

    animation-timeline:
      view();

    animation-range:
      entry 0%
      cover 32%;
  }

}

@keyframes imageScrollReveal {
  0% {
    transform:
      scale(1.10);

    filter:
      brightness(0.86);
  }

  60% {
    transform:
      scale(1.045);

    filter:
      brightness(0.96);
  }

  100% {
    transform:
      scale(1);

    filter:
      brightness(1);
  }
}


/* =========================================================
   39. FOOTER
========================================================= */

footer {
  padding:
    60px 5%;

  background:
    #090909;

  color:
    #FFFFFF;
}

footer h2 {
  margin: 0;

  font-size:
    clamp(
      42px,
      5vw,
      66px
    );

  line-height: 0.86;

  letter-spacing:
    -0.06em;
}

footer p {
  margin-top: 32px;

  color:
    #666666;

  font-size: 9px;

  letter-spacing:
    0.08em;
}


/* =========================================================
   40. TABLET
========================================================= */

@media (max-width: 1000px) {

  .site-header nav {
    gap: 14px;
  }

  .hero {
    grid-template-columns:
      1fr;
  }

  .hero-art {
    min-height: 430px;

    margin:
      0 5%
      60px;
  }

  .city-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }

  .placeholder-grid,
  .custom-lab__grid,
  .custom-lab__header,
  .news-box {
    grid-template-columns:
      1fr;
  }

  .custom-lab__intro {
    margin-top: 30px;

    padding:
      25px 0 0;

    border-left: 0;

    border-top:
      1px solid
      rgba(0, 0, 0, 0.25);
  }

  .custom-panel {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(0, 0, 0, 0.25);
  }

}


/* =========================================================
   41. MOBILE
========================================================= */

@media (max-width: 650px) {

  main,
  footer,
  .site-header {
    width: 100%;
  }

  .site-header {
    min-height: 64px;

    padding:
      0 16px;
  }

  .brand {
    font-size: 12px;
  }

  .site-header nav {
    display: none;
  }


  /* HERO */

  .hero {
    min-height: 720px;

    display: block;
  }

  .hero-content {
    min-height: 720px;

    padding:
      85px 22px
      100px;
  }

  .hero-title {
    font-size: 58px;
  }

  .hero-art {
    display: none;
  }

  .hero-top-line {
    display: block;
  }

  .hero-top-line > span {
    display: block;

    margin-top: 10px;
  }


  /* SCROLL REVEAL MOBILE */

  @supports (animation-timeline: view()) {

    .stack-section {
      animation-range:
        entry 0%
        cover 24%;
    }

    .stack-section > .section-index,
    .stack-section > h2 {
      animation-range:
        entry 3%
        cover 22%;
    }

    .city-grid,
    .city-live-preview,
    .placeholder-grid,
    .support-grid,
    .goods-grid,
    .custom-lab__grid,
    .news-box {
      animation-range:
        entry 5%
        cover 25%;
    }

  }


  @keyframes sectionFloatIn {
    0% {
      opacity: 0.2;

      transform:
        translateY(70px)
        scale(0.985);

      filter:
        brightness(0.92);

      clip-path:
        inset(
          5% 0 0 0
        );
    }

    100% {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);

      filter:
        brightness(1);

      clip-path:
        inset(
          0
        );
    }
  }


  /* CITY */

  .city-section {
    padding:
      50px 22px
      70px;
  }

  .city-section h2 {
    font-size: 46px;
  }

  .city-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .city-card {
    min-height: 72px;
  }

  .city-live-preview {
    height: 500px;
  }

  .city-preview-panel {
    background:
      linear-gradient(
        180deg,
        #080808 0%,
        #080808 52%,
        var(--city-color) 52%,
        var(--city-color) 100%
      );
  }

  .city-preview-content {
    width: 100%;
    height: 56%;

    padding:
      36px 22px
      24px;
  }

  .city-preview-content h3 {
    font-size: 47px;
  }

  .city-preview-totem {
    top: 52%;
    right: 0;

    width: 100%;
    height: 42%;
  }

  .city-preview-landmark {
    width: 100%;
    height: 27%;
  }

  .city-preview-big-code {
    font-size: 150px;
  }


  /* POPUP */

  .city-popup {
    width: 94vw;
    height: 88vh;

    background:
      linear-gradient(
        180deg,
        #080808 0%,
        #080808 58%,
        var(--city-color) 58%,
        var(--city-color) 100%
      );
  }

  .city-popup-content {
    width: 100%;
    height: 64%;

    padding:
      36px 22px
      24px;
  }

  .city-popup-content h3 {
    font-size: 46px;
  }

  .city-popup-totem {
    top: 58%;
    right: 0;

    width: 100%;
    height: 35%;
  }

  .city-popup-landmark {
    width: 100%;
    height: 22%;
  }


  /* GENERAL */

  .placeholder-section,
  .news {
    padding:
      50px 22px
      65px;
  }

  .placeholder-section h2,
  .news h2 {
    font-size: 46px;
  }


  /* OFFICIAL */

  .placeholder-grid {
    grid-template-columns:
      1fr;
  }

  .product-image {
    min-height: 410px;
  }

  .product-info {
    min-height: 330px;

    padding:
      32px 24px;
  }


  /* SUPPORTER */

  .support-grid {
    grid-template-columns:
      1fr;
  }

  .support-product {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.15);
  }

  .home-product,
  .away-product {
    height: 360px;
  }


  /* GOODS */

  .goods-grid {
    grid-template-columns:
      1fr;
  }

  .goods-grid article {
    padding:
      0 0
      28px;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(0, 0, 0, 0.18);
  }

  .goods-grid article + article {
    padding-top: 28px;
  }

  .goods-image {
    height: 350px;
  }


  /* CUSTOM */

  .custom-lab__header {
    padding:
      50px 22px;
  }

  .custom-lab__title {
    font-size: 64px;
  }

  .custom-lab__grid {
    min-height: auto;

    grid-template-columns:
      1fr;
  }

  .custom-panel {
    padding:
      40px 22px;
  }

  .custom-choice-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .custom-number-options {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .product-tabs {
    grid-template-columns:
      1fr;
  }

  .color-options {
    flex-wrap: wrap;
  }

  .custom-order {
    align-items: stretch;

    flex-direction: column;
  }

  .custom-order__button {
    width: 100%;
  }

  .preview-stage {
    min-height: 570px;
  }

  .jersey {
    width: 300px;
    height: 390px;

    transform:
      scale(0.88);
  }

  .custom-preview:hover .jersey {
    transform:
      scale(0.88);
  }

  .preview-big-number {
    font-size: 230px;
  }


  /* NEWS */

  .news-box {
    grid-template-columns:
      1fr;
  }

  .news-main {
    min-height: 330px;
  }

}


/* =========================================================
   42. REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }

  .stack-section,
  .stack-section > *,
  .city-grid,
  .city-live-preview,
  .placeholder-grid,
  .support-grid,
  .goods-grid,
  .custom-lab__grid,
  .news-box,
  .product-image,
  .product-info,
  .support-product,
  .goods-grid article,
  .custom-panel,
  .custom-preview,
  .news-main,
  .news-list {
    opacity:
      1 !important;

    transform:
      none !important;

    filter:
      none !important;

    clip-path:
      none !important;
  }

}
/* Single-page anchor navigation and supplied product image framing. */
section[id] { scroll-margin-top: 14px; }
.product-image img { display: block; object-position: center 44%; }
.home-product img { object-position: center 44%; }
.away-product img { object-position: center 48%; }
.goods-image img { display: block; object-position: center center; }