/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: "Camaro";
  src: url("../fonts/Camaro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swis721 BlkCn BT";
  src: url("../fonts/Swis721%20BlkCn%20BT%20Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swis721 Cn BT";
  src: url("../fonts/Swis721%20Cn%20BT%20Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
p {
  margin: 0;
}

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

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* Palette — diambil dari frame Figma "Coming Soon" (6031:2863) */
  --color-bg: #121212;
  --color-white: #ffffff;
  --color-red: #ed1c24;
  --color-amber: #f69f31;
  /* Merah ujung gradasi kartu counter — sedikit berbeda dari merah Honda. */
  --color-ember-red: #ed1b2f;
  --color-ink: #121212;
  --color-rule: #141414;
  --color-outline: #000000;
  --color-overlay: rgba(0, 0, 0, 0.35);

  /* Ukuran figur biker, sebagai persentase dari stage (Figma: 529×842 di 1512×851) */
  --figure-width: 34.99%;
  --figure-height: 98.94%;
  --figure-top: 10.69%;

  /* Tipografi — clamp dikalibrasi agar tepat menyentuh nilai Figma di lebar 1512px */
  --title-brand-size: clamp(22px, 3.17vw, 48px);
  --title-event-size: clamp(32px, 4.76vw, 72px);
  --subtitle-size: clamp(13px, 1.32vw, 20px);
  --counter-value-size: clamp(22px, 2.65vw, 40px);
  --counter-label-size: clamp(9px, 0.79vw, 12px);
  --counter-label-tracking: clamp(1.8px, 0.16vw, 2.4px);

  /* Spasi */
  --hero-gap: clamp(16px, 1.59vw, 24px);
  --heading-gap: clamp(10px, 1.06vw, 16px);
  --counter-gap: clamp(6px, 0.66vw, 10px);
  --counter-cell-width: clamp(64px, 6.1vw, 92px);
  --counter-cell-padding: clamp(10px, 1.06vw, 16px);
  --counter-cell-border: clamp(2px, 0.2vw, 3px);

  --content-width: 963px;
  --page-padding: clamp(20px, 4vw, 64px);
  --radius: 10px;

  /* Outline teks. Figma memakai stroke OUTSIDE (judul 6px, subjudul 2px),
     sedangkan -webkit-text-stroke menggambar di tengah garis glyph. Dengan
     paint-order fill menutupi separuh bagian dalam, jadi nilai di sini adalah
     dua kali tebal yang akhirnya terlihat. Satuan px — bukan em — karena Figma
     memakai satu nilai absolut untuk "Honda" (48px) dan "BIKERS DAY XV" (72px). */
  --title-outline: clamp(5px, 0.79vw, 12px);
  --subtitle-outline: clamp(2px, 0.26vw, 4px);

  /* Layer */
  --z-background: 0;
  --z-figure: 1;
  --z-overlay: 2;
  --z-glow: 3;
  --z-particles: 4;
  --z-content: 5;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: "Swis721 Cn BT", "Arial Narrow", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--page-padding);
  overflow: hidden;
}

/* Kabut panas yang tersirat di bawah viewport — tanpa bentuk api. */
.stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -35%;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(246, 159, 49, 0.22),
    rgba(237, 28, 36, 0.1) 45%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: var(--z-glow);
}

.stage__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-background);
  overflow: hidden;
}

.stage__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Figma memotong pita putih terang di dasar foto dengan cara meregangkan gambar.
   Di sini gambar dibiarkan proporsional dan pita itu diredam oleh scrim,
   supaya kartu counter yang berwarna putih tetap punya kontras di semua ukuran layar. */
.stage__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 38%,
    rgba(18, 18, 18, 0.32) 72%,
    rgba(18, 18, 18, 0.62) 100%
  );
  pointer-events: none;
}

.stage__figure {
  position: absolute;
  top: var(--figure-top);
  left: 50%;
  width: var(--figure-width);
  height: var(--figure-height);
  transform: translateX(-50%);
  z-index: var(--z-figure);
}

.stage__figure-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.stage__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hero {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-gap);
  width: 100%;
  max-width: var(--content-width);
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--heading-gap);
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero__title {
  display: flex;
  flex-direction: column;
  font-family: "Camaro", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: var(--title-outline) var(--color-outline);
  paint-order: stroke fill;
}

.hero__title-brand {
  font-size: var(--title-brand-size);
  color: var(--color-red);
}

.hero__title-event {
  font-size: var(--title-event-size);
  color: var(--color-white);
  text-transform: uppercase;
}

.hero__subtitle {
  font-family: "Camaro", "Arial Narrow", Arial, sans-serif;
  font-size: var(--subtitle-size);
  line-height: normal;
  color: var(--color-white);
  -webkit-text-stroke: var(--subtitle-outline) var(--color-outline);
  paint-order: stroke fill;
}

.counter {
  display: flex;
  gap: var(--counter-gap);
}

/* Outline bergradasi: lapisan putih dikleping ke padding-box menutupi bagian
   dalam, lapisan gradien dikleping ke border-box sehingga hanya tersisa di area
   border. Efeknya sama dengan kartu outline gradien yang ditumpuk kartu putih
   di Figma, tanpa perlu elemen pembungkus tambahan. */
.counter__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--counter-cell-width);
  padding: var(--counter-cell-padding);
  border: var(--counter-cell-border) solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(180deg, var(--color-amber) 0%, var(--color-ember-red) 100%)
      border-box;
}

.counter__value {
  width: 100%;
  font-family: "Swis721 BlkCn BT", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--counter-value-size);
  line-height: normal;
  color: var(--color-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.counter__label {
  width: 100%;
  padding-top: 1px;
  border-top: 1px solid var(--color-rule);
  font-family: "Swis721 Cn BT", "Arial Narrow", Arial, sans-serif;
  font-size: var(--counter-label-size);
  line-height: 2;
  letter-spacing: var(--counter-label-tracking);
  color: var(--color-ink);
  text-align: center;
  text-transform: uppercase;
  /* Letter-spacing menyisakan jarak setelah huruf terakhir; geser agar tetap optis di tengah. */
  text-indent: var(--counter-label-tracking);
}

/* ==========================================================================
   Particles
   ========================================================================== */

.ember-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-particles);
  pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Di bawah lebar desktop, figur biker dilabuhkan ke dasar layar dengan rasio
   aslinya — kotak sempit-tinggi ala Figma hanya masuk akal pada layar lebar. */
@media (max-width: 1199px) {
  :root {
    --figure-width: 52%;
  }

  .stage__figure {
    top: auto;
    bottom: -4%;
    height: auto;
  }

  .stage__figure-image {
    height: auto;
  }
}

/* Di layar portrait, biker dilabuhkan ke dasar dan memakan tinggi yang banyak.
   Konten dinaikkan ke sepertiga atas — kalau tetap di tengah, kartu counter
   jatuh persis di atas helm. */
@media (max-width: 1199px) and (orientation: portrait) {
  :root {
    --figure-width: 66%;
  }

  .stage {
    align-items: flex-start;
    padding-top: clamp(56px, 11vh, 140px);
  }
}

@media (max-width: 767px) {
  :root {
    --figure-width: 82%;
    /* Rasio brand:event dijaga tetap 48:72 seperti di Figma. */
    --title-brand-size: clamp(15px, 5.1vw, 34px);
    /* "BIKERS DAY XV" dalam Camaro butuh lebar sekitar 11,26 x font-size. 7,6vw adalah
       ukuran terbesar yang masih memuatnya dalam satu baris setelah dikurangi padding. */
    --title-event-size: clamp(22px, 7.6vw, 52px);
    --subtitle-size: clamp(12px, 3.2vw, 16px);
    --counter-value-size: clamp(22px, 6.6vw, 32px);
    --counter-cell-width: clamp(64px, 19vw, 78px);
  }

  .stage__figure {
    bottom: -6%;
  }
}

@media (max-width: 380px) {
  :root {
    --page-padding: 16px;
  }
}

/* Layar pendek dan lebar: jaga agar figur tidak menutupi konten. */
@media (max-height: 560px) and (min-width: 768px) {
  :root {
    --figure-width: 28%;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}