/* ==================================================================
   02｜首頁主視覺 Hero＋跑馬字裝飾
================================================================== */


/* ================================================================
   Hero 主視覺
================================================================ */

.hero {
  min-height:
    calc(100svh - 76px);

  padding:
    clamp(56px, 7vw, 100px)
    clamp(24px, 7vw, 112px)
    clamp(54px, 6vw, 84px);

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 0.72fr);

  gap:
    clamp(36px, 6vw, 100px);

  align-items:
    center;

  position:
    relative;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 4% 10%,
      rgba(255, 255, 255, 0.95) 0 2%,
      transparent 18%
    ),
    linear-gradient(
      122deg,
      #ffd834 0%,
      #ffb830 46%,
      #ff8536 100%
    );
}


/* ================================================================
   Hero 背景裝飾
================================================================ */

.hero::before {
  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  left:
    -220px;

  bottom:
    -170px;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #72d7aa,
      #715ce9,
      #ff94cd
    );

  filter:
    blur(30px);

  opacity:
    0.65;
}


.hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    radial-gradient(
      rgba(23, 18, 15, 0.15) 0.8px,
      transparent 0.8px
    );

  background-size:
    9px 9px;

  opacity:
    0.3;

  mask-image:
    linear-gradient(
      to right,
      black,
      transparent 60%
    );
}


/* ================================================================
   電路裝飾
================================================================ */

.circuit {
  position:
    absolute;

  width:
    280px;

  height:
    2px;

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

  transform:
    rotate(-28deg);
}


.circuit::before,
.circuit::after {
  content:
    "";

  position:
    absolute;

  width:
    12px;

  height:
    12px;

  top:
    -5px;

  border:
    3px solid white;

  border-radius:
    50%;
}


.circuit::before {
  left:
    -2px;
}


.circuit::after {
  right:
    -2px;
}


.circuit-a {
  top:
    18%;

  left:
    -20px;
}


.circuit-b {
  bottom:
    15%;

  right:
    -50px;

  transform:
    rotate(18deg);
}


/* ================================================================
   Hero 內容層級
================================================================ */

.hero-copy,
.hero-art {
  position:
    relative;

  z-index:
    2;
}


/* ================================================================
   活動名稱
================================================================ */

.hero-event-title {
  margin:
    0 0 6px;

  color:
    var(--red);

  font-size:
    clamp(24px, 3.2vw, 48px);

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    -0.04em;
}


/* ================================================================
   英文副標
================================================================ */

.eyebrow {
  margin:
    0 0 20px;

  font-size:
    12px;

  letter-spacing:
    0.18em;

  font-weight:
    900;
}


/* ================================================================
   主標題
================================================================ */


/* 唱出你的聲音 */

.hero h1 {
  margin-top: 0;
  font-size: 7em;
  color: #383836;
}


/* ================================================================
   讓城市聽見
   黑色底框＋白色外框
================================================================ */

.hero h1 .sound-box {
  display:
    inline-block;

  margin-top:
    12px;

  padding:
    3px 12px 10px;

  background:
 #6f625a;

  box-shadow:
    8px 8px 0 rgba(255, 255, 255, 0.95);

  transform:
    rotate(-1.2deg);
}


/* ================================================================
   讓城市聽見
   只有文字使用漸層
================================================================ */

.hero h1 .sound-gradient {
  display:
    inline-block;

  padding:
    0;

  background:
    radial-gradient(
      circle at center,
      #fff57a 0%,
      #fff57a 15%,
      #e7722b 38%,
      #eed347 60%,
      #ec962c 80%,
      #eed347 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  color:
    transparent;
}


/* ================================================================
   Hero 說明文字
================================================================ */

.hero-intro {
  margin:
    32px 0 28px;

  font-size:
    clamp(17px, 1.5vw, 22px);

  line-height:
    1.8;

  font-weight:
    600;

  font-family:
    "華康儷粗圓(P)";
}


.hero-intro strong {
  font-size:
    1.25em;
}


/* ================================================================
   按鈕
================================================================ */

.hero-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  flex-wrap:
    wrap;
}


.button {
  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    12px;

  padding:
    15px 22px;

  border-radius:
    12px;

  font-weight:
    900;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.button-dark {
  color:
    white;

  background:
    var(--ink);

  box-shadow:
    5px 5px 0 rgba(255, 255, 255, 0.85);
}


.button:hover {
  transform:
    translate(-2px, -2px);

  box-shadow:
    8px 8px 0 rgba(255, 255, 255, 0.85);
}


.text-link {
  font-weight:
    800;

  border-bottom:
    2px solid var(--ink);
}


/* ================================================================
   活動重點
================================================================ */

.quick-facts {
  margin-top:
    44px;

  display:
    flex;

  gap:
    12px;
}


.quick-facts > div {
  min-width:
    110px;

  padding:
    12px 16px;

  border-left:
    3px solid var(--ink);
}


.quick-facts b {
  display:
    block;

  font-size:
    26px;

  line-height:
    1;
}


.quick-facts span {
  display:
    block;

  margin-top:
    6px;

  font-size:
    11px;

  font-weight:
    700;
}


/* ================================================================
   Hero 圖片
   p001.png
   原始尺寸：765 × 831
================================================================ */

.hero-art {
  justify-self:
    end;

  width:
    min(100%, 520px);

  height:
    auto;

  border:
    none;

  border-radius:
    0;

  box-shadow:
    none;

  overflow:
    visible;

  transform:
    none;

  background:
    transparent;
}


.hero-art img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  aspect-ratio:
    765 / 831;

  object-fit:
    contain;
}


/* ================================================================
   跑馬字
================================================================ */

.ticker {
  overflow:
    hidden;

  color:
    white;

  background:
    var(--ink);

  transform:
    rotate(-0.7deg)
    scale(1.01);
}


.ticker > div {
  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  gap:
    26px;

  padding:
    12px 0;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  animation:
    ticker 20s linear infinite;
}


.ticker i {
  color:
    var(--yellow);

  font-style:
    normal;
}


@keyframes ticker {

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

}