/* ============================================================
   DECOR HUB SOUVENIR — main.css v3  (comic / pop-art)
   Greenfield. Synth: Awwwards 40-site + taste-skill + impeccable.
   Animations use transform/opacity only. Hard ink comic shadows.
   ============================================================ */

/* ════════ LAYOUT PRIMITIVES ════════ */
.sec-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.sec-head__title {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  line-height: 1.06;   /* clear stacked VN diacritics (Ệ/Ợ vs Ầ/Ồ) */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-head__title em { font-style: normal; color: var(--do); }
.sec-head--center .sec-head__title { margin-top: var(--s-2); }
.sec-head__sub {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 52ch;
  font-weight: 500;
}
.sec-head--center .sec-head__sub { margin-inline: auto; }
.link-ink { color: var(--do); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 700; }

/* ════════ STAMPS (ink-stamp badges) ════════ */
.stamp {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.stamp--ink   { background: var(--ink);  color: var(--paper); }
.stamp--red   { background: var(--do);   color: var(--paper); border-color: var(--ink); }
.stamp--cream { background: var(--paper);color: var(--ink); }
.stamp--vang  { background: var(--vang); color: var(--ink); }

/* ════════ BUTTONS — comic press ════════ */
.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 14px 22px;
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  transition: transform var(--d-micro) var(--e-quart), box-shadow var(--d-micro) var(--e-quart), background var(--d-base) var(--e-quart);
  will-change: transform;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-2); }
.btn:active { transform: translate(3px, 3px); box-shadow: var(--sh-press); }
.btn--red   { --btn-bg: var(--do);   --btn-fg: var(--paper); }
.btn--cream { --btn-bg: var(--paper);--btn-fg: var(--ink); }
.btn--ghost { box-shadow: none; background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; transform: translateY(-2px); }
.btn--big   { font-size: var(--t-md); padding: 18px 30px; min-height: 56px; border-radius: var(--r-pill); }
.btn--sm    { font-size: var(--t-xs); padding: 10px 16px; min-height: 40px; }
.btn__count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--vang); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 800; margin-left: 2px;
}
.btn__count.is-bump { animation: count-bump 0.5s var(--e-spring); }
@keyframes count-bump { 0%,100% { transform: scale(1);} 40% { transform: scale(1.5) rotate(-8deg); background: var(--do); color: var(--paper);} }

/* ════════ TICKERS (out-of-phase marquees) ════════ */
.ticker {
  overflow: hidden;
  border-top: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  padding: 14px 0;
}
.ticker--red   { background: var(--do);   color: var(--paper); }
.ticker--yellow{ background: var(--vang); color: var(--ink); }
.ticker--ink   { background: var(--ink);  color: var(--vang); }
.ticker--jade  { background: var(--ngoc); color: var(--ink); }
.ticker__track {
  display: inline-flex; align-items: center; gap: 40px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: clamp(28px, 4.5vw, 60px);
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  animation: ticker-run 38s linear infinite;
  padding-right: 40px;
}
.ticker__track--rev { animation-duration: 30s; animation-direction: reverse; }
.ticker__star { font-size: 0.55em; transform: translateY(-0.08em); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* ════════ PRELOADER ════════ */
.loader {
  position: fixed; inset: 0; z-index: var(--z-fx);
  background: var(--vang);
  display: grid; place-items: center;
  transition: transform 0.7s var(--e-expo), opacity 0.4s var(--e-quart) 0.25s;
}
.loader.is-done { transform: translateY(-110%); opacity: 0; pointer-events: none; } /* curtain lift */
.loader__inner { position: relative; width: min(92vw, 560px); text-align: center; padding: 24px; }
.loader__sticker { width: clamp(120px, 22vw, 190px); margin: 0 auto var(--s-5); animation: loader-spin 2s var(--e-quart) forwards; }
.loader__sticker img { width: 100%; filter: drop-shadow(0 10px 0 rgba(26,20,16,0.18)); }
@keyframes loader-spin {
  0% { transform: rotate(-200deg) scale(0.4); opacity: 0; }
  60% { transform: rotate(10deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
.loader__mark { font-family: var(--f-display); font-size: clamp(40px, 9vw, 84px); line-height: 1.06; text-transform: uppercase; color: var(--ink); }
.loader__mark em { font-style: normal; color: var(--do); }
.loader__cook { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--ink-2); text-transform: uppercase; }
.loader__bar { margin: var(--s-5) auto 0; width: min(80%, 360px); height: 12px; background: rgba(26,20,16,0.12); border: 2.5px solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: var(--do); transition: width 0.12s linear; }
.loader__pct { font-family: var(--f-display); font-size: clamp(36px,7vw,68px); line-height: 1; color: var(--ink); margin-top: var(--s-3); }
.loader__meta { position: absolute; bottom: -8px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.18em; color: var(--ink-2); }
.loader__meta--l { left: 4px; } .loader__meta--r { right: 4px; }

/* ════════ HEADER ════════ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--gutter);
  background: rgba(251,243,225,0.82);
  backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid var(--ink);
}
.hdr__logo { font-family: var(--f-display); font-size: 26px; line-height: 0.9; text-transform: uppercase; color: var(--ink); position: relative; }
.hdr__logo em { font-style: normal; color: var(--do); }
.hdr__logo small { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--ink-2); margin-top: 2px; }
.hdr__nav { display: flex; gap: clamp(12px, 1.6vw, 28px); }
.hdr__nav a {
  font-family: var(--f-body); font-weight: 700; font-size: var(--t-sm);
  position: relative; padding: 4px 2px; display: inline-block;
  transition: transform var(--d-base) var(--e-spring);
}
.hdr__nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2.5px; background: var(--do); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--e-quart); }
.hdr__nav a:hover { transform: translateY(-3px) rotate(-2deg); }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__actions { display: flex; gap: var(--s-2); align-items: center; }
.hdr__burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: var(--bw) solid var(--ink); border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-press); }
.hdr__burger span { display: block; width: 22px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform var(--d-base) var(--e-quart), opacity var(--d-micro); }
.hdr__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hdr__burger.is-open span:nth-child(2) { opacity: 0; }
.hdr__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ════════ HERO (YELLOW) ════════ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s-7)) var(--gutter) var(--s-8);
  background: var(--vang);
  border-bottom: var(--bw) solid var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* (hero gets its halftone from the global #halftone-canvas overlay) */
.hero__ghost {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-size: var(--t-ghost); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 3px rgba(26,20,16,0.13);
  z-index: 0; pointer-events: none; user-select: none;
}
.hero__inner { width: 100%; max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.hero__title { font-family: var(--f-display); font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
.hero__line { display: flex; align-items: baseline; gap: 0.16em; flex-wrap: wrap; }
.hero__line--shift { padding-left: 0.5em; }
.hero__title .word { display: inline-block; transition: transform var(--d-base) var(--e-spring); }
.hero__title .word:hover { transform: translateY(-0.08em) rotate(-3deg); }
.hero__title .word--fill { color: var(--do); }
.hero__title .word--out { color: transparent; -webkit-text-stroke: clamp(2px,0.5vw,5px) var(--ink); }
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-7); }
.hero__copy { max-width: 42ch; }
.hero__lede { font-size: var(--t-lg); line-height: 1.4; font-weight: 600; color: var(--ink); }
.hero__hintcard {
  display: inline-block; margin-top: var(--s-5);
  background: var(--paper); border: var(--ink-border); border-radius: var(--r-md);
  padding: 14px 20px; transform: rotate(-3deg); box-shadow: var(--sh-1);
}
.hero__hintcard span { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; color: var(--ink); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__scroll { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); animation: bob 2.2s var(--e-quart) infinite; }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(6px);} }

/* hero floating stickers */
.hero__floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.float { position: absolute; pointer-events: auto; filter: drop-shadow(4px 6px 0 rgba(26,20,16,0.18)); will-change: transform; transition: transform var(--d-slow) var(--e-spring), filter var(--d-base); }
.float img { width: 100%; height: auto; }
.float:hover { transform: rotate(0deg) scale(1.08) !important; filter: drop-shadow(8px 10px 0 rgba(26,20,16,0.25)) saturate(1.1); z-index: 5; }
.float--1 { width: clamp(80px,11vw,150px); top: 12%;  right: 7%;  transform: rotate(12deg); animation: drift-a 8s ease-in-out infinite; }
.float--2 { width: clamp(70px,9vw,120px);  top: 60%;  right: 4%;  transform: rotate(-10deg); animation: drift-b 9s ease-in-out infinite; }
.float--3 { width: clamp(80px,10vw,140px); bottom: 12%; right: 22%; transform: rotate(8deg); animation: drift-c 10s ease-in-out infinite; }
.float--4 { width: clamp(64px,8vw,108px);  top: 16%;  right: 32%; transform: rotate(-8deg); animation: drift-a 11s ease-in-out infinite; }
.float--5 { width: clamp(60px,7vw,100px);  top: 70%;  left: 4%;   transform: rotate(10deg); animation: drift-b 9.5s ease-in-out infinite; }
.float--6 { width: clamp(70px,9vw,124px);  top: 20%;  left: 3%;   transform: rotate(-12deg); animation: drift-c 8.5s ease-in-out infinite; }
/* em bé (Phú Quý) đẩy sang phải để né body copy bên trái */
.float--7 { width: clamp(60px,7vw,104px);  bottom: 14%; left: auto; right: 40%; transform: rotate(6deg); animation: drift-a 8s ease-in-out infinite; }
/* stronger drift — bigger travel + wider wobble so floats clearly move */
@keyframes drift-a { 0%,100% { transform: translate(0,0) rotate(10deg);} 50% { transform: translate(-16px,-28px) rotate(22deg);} }
@keyframes drift-b { 0%,100% { transform: translate(0,0) rotate(-13deg);} 50% { transform: translate(22px,-20px) rotate(2deg);} }
@keyframes drift-c { 0%,100% { transform: translate(0,0) rotate(8deg);} 50% { transform: translate(-24px,18px) rotate(22deg);} }

/* ════════ STORY ════════ */
.story { padding: var(--section-y) var(--gutter); background: var(--paper); }
.story__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.story__left { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.story__eyebrow { margin-bottom: var(--s-4); }
.story__title { font-family: var(--f-display); font-size: clamp(34px, 5vw, 76px); line-height: 1.16; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-5); }
.story__title em { font-style: normal; color: var(--do); }
.story__lede { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
/* scattered vertical scrapbook — cards offset L/R, varied gaps + tilt; parallax via JS on .snap-wrap */
.story__right { display: flex; flex-direction: column; gap: clamp(28px, 4.5vw, 64px); padding-top: var(--s-7); }
.snap-wrap { width: 74%; will-change: transform; }
.snap-wrap:nth-child(1) { align-self: flex-end;   margin-right: 3%; }
.snap-wrap:nth-child(2) { align-self: flex-start; margin-top: 9%; }
.snap-wrap:nth-child(3) { align-self: flex-end;   margin-top: 3%; margin-right: 9%; }
.snap-wrap:nth-child(4) { align-self: flex-start; margin-top: 5%; margin-left: 7%; }
.snap { border: var(--ink-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); transition: transform var(--d-base) var(--e-spring); }
.snap-wrap:nth-child(odd) .snap  { transform: rotate(-2.4deg); }
.snap-wrap:nth-child(even) .snap { transform: rotate(2.6deg); }
.snap:hover { transform: rotate(0) translateY(-6px) scale(1.03) !important; z-index: 2; }
.snap img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 30px; }
.snap--yellow img { background: var(--vang); } .snap--red img { background: var(--do); } .snap--jade img { background: var(--ngoc); } .snap--orange img { background: var(--cam); }
.snap figcaption { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 14px; border-top: 2.5px solid var(--ink); background: var(--paper); color: var(--ink-2); }

/* ════════ DROPS ════════ */
.drops { padding: var(--section-y) var(--gutter); }
.drops__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.drop {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px; padding: var(--s-5);
  border: var(--ink-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-quart);
}
.drop--tall { grid-row: span 2; min-height: 660px; }
.drop:hover { transform: translate(-3px,-5px); box-shadow: var(--sh-3); }
.drop--yellow { background: var(--vang); color: var(--ink); }
.drop--red    { background: var(--do); color: var(--paper); }
.drop--jade   { background: var(--ngoc); color: var(--ink); }
.drop--orange { background: var(--cam); color: var(--ink); }
.drop--cream  { background: var(--paper); color: var(--ink); }
.drop--ink    { background: var(--ink); color: var(--vang); }
.drop__num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; position: relative; z-index: 2; }
.drop__sticker { position: absolute; right: -8%; top: 28%; width: 62%; filter: drop-shadow(3px 4px 0 rgba(26,20,16,0.2)); transition: transform var(--d-slow) var(--e-spring); z-index: 1; }
.drop--tall .drop__sticker { top: 34%; width: 80%; }
.drop:hover .drop__sticker { transform: rotate(-8deg) scale(1.1); }
.drop__foot { position: relative; z-index: 2; }
.drop__name { font-family: var(--f-display); font-size: clamp(28px, 3vw, 46px); line-height: 1.06; text-transform: uppercase; max-width: 90%; }
.drop__meta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; }
.bar { flex: 1; height: 8px; border: 2px solid currentColor; border-radius: var(--r-pill); position: relative; overflow: hidden; }
.bar::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: currentColor; }

/* ════════ SHOP ════════ */
.shop { padding: var(--section-y) var(--gutter); }
.shop-div { max-width: var(--container); margin: clamp(48px,7vw,96px) auto var(--s-6); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; border-bottom: var(--bw) solid var(--ink); padding-bottom: var(--s-5); }
.shop-div:first-of-type { margin-top: 0; }
.shop-div__num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--do); margin-bottom: var(--s-2); }
.shop-div__title { font-family: var(--f-display); font-size: clamp(28px, 4vw, 60px); line-height: 1.08; text-transform: uppercase; }
.shop-div__title em { font-style: normal; color: var(--do); }
.shop-div__sub { margin-top: var(--s-3); max-width: 60ch; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.shop-div__sub strong { color: var(--ink); }

.grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 18vw, 200px), 1fr)); gap: var(--s-4); }
.sticker {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--paper-2);
  border: 2.5px solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-quart), background var(--d-base) var(--e-quart);
  text-align: center; cursor: pointer;
}
.sticker::before { /* halftone disc behind sticker, reveals on hover */
  content: ''; position: absolute; inset: 8px 8px 44px; z-index: -1; border-radius: var(--r-sm);
  background-image: radial-gradient(rgba(26,20,16,0.18) 1.3px, transparent 1.5px);
  background-size: 11px 11px; opacity: 0; transition: opacity var(--d-base);
}
.sticker:hover { transform: translateY(-6px) rotate(-2deg) scale(1.05); box-shadow: var(--sh-2); z-index: 3; }
.sticker:hover::before { opacity: 1; }
.sticker:nth-child(4n+1):hover { background: var(--vang); }
.sticker:nth-child(4n+2):hover { background: var(--ngoc); }
.sticker:nth-child(4n+3):hover { background: var(--hong); }
.sticker:nth-child(4n):hover   { background: var(--cam); }
.sticker:active { transform: translateY(-2px) scale(0.98); box-shadow: var(--sh-press); }
.sticker__img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform var(--d-base) var(--e-spring); }
.sticker:hover .sticker__img { transform: scale(1.08) rotate(3deg); }
.sticker__label { margin-top: var(--s-2); font-family: var(--f-body); font-weight: 700; font-size: var(--t-sm); color: var(--ink); }
.sticker__price { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; color: var(--do); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 2px 9px; margin-top: 5px; }
.sticker.is-collected { outline: 3px solid var(--do); outline-offset: -3px; }
.shop__soon { text-align: center; max-width: 60ch; margin: var(--s-8) auto 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.shop__soon strong { color: var(--ink); }

/* ════════ RING (rivalry) ════════ */
.ring { padding: var(--section-y) var(--gutter); background: var(--ink); color: var(--paper); border-block: var(--bw) solid var(--ink); position: relative; overflow: hidden; }
.ring::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(247,192,18,0.12) 1.4px, transparent 1.6px); background-size: 18px 18px; }
.ring__inner { position: relative; max-width: 1000px; margin: 0 auto; text-align: center; }
.ring__eyebrow { margin-bottom: var(--s-4); }
.ring__title { font-family: var(--f-display); font-size: clamp(40px,7vw,104px); line-height: 1.05; text-transform: uppercase; color: var(--vang); }
.ring__title em { font-style: normal; color: var(--do); }
.ring__sub { max-width: 50ch; margin: var(--s-4) auto var(--s-8); color: rgba(251,243,225,0.7); font-size: var(--t-md); line-height: 1.5; }
.ring__match { display: flex; align-items: center; justify-content: center; gap: clamp(16px,4vw,64px); }
.fighter { flex: 1; max-width: 340px; }
.fighter__sticker { background: var(--paper); border: var(--ink-border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2); transition: transform var(--d-base) var(--e-spring); }
.fighter__sticker img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.fighter:first-child .fighter__sticker { transform: rotate(-3deg); }
.fighter:last-child .fighter__sticker { transform: rotate(3deg); }
.fighter:hover .fighter__sticker { transform: rotate(0) scale(1.06); }
.fighter__name { font-family: var(--f-display); font-size: clamp(28px,3.5vw,48px); text-transform: uppercase; margin-top: var(--s-4); color: var(--vang); }
.fighter__tag { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; color: rgba(251,243,225,0.65); margin-top: 4px; }
.ring__vs { font-family: var(--f-display); font-size: clamp(40px,7vw,96px); color: var(--do); -webkit-text-stroke: 2px var(--vang); flex-shrink: 0; }

/* ════════ TESTIMONIALS — speech bubbles around a headline (avatar = our stickers) ════════ */
/* tall section: headline pins (sticky) center while bubbles scroll past it (Terry Ho-style) */
.notes { position: relative; min-height: 185vh; padding: 0 var(--gutter); background: var(--ngoc); border-block: var(--bw) solid var(--ink); }
.notes__pin { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; text-align: center; z-index: 2; }
.notes__eyebrow { position: relative; z-index: 2; text-align: center; }
.notes__title { position: relative; z-index: 2; text-align: center; font-family: var(--f-display); font-size: clamp(44px, 8vw, 130px); line-height: 1.04; text-transform: uppercase; color: var(--ink); margin-top: var(--s-4); }
.notes__title em { font-style: normal; color: var(--do); }

.bubble { position: absolute; z-index: 3; width: clamp(200px, 19vw, 262px); padding: var(--s-4) var(--s-4) var(--s-3); background: var(--paper); border: var(--ink-border); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.bubble__txt { font-size: var(--t-sm); line-height: 1.5; font-weight: 600; color: var(--ink); }
.bubble__by { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--do); }
.bubble::after { content: ''; position: absolute; bottom: -13px; width: 22px; height: 22px; background: var(--paper); border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); transform: rotate(45deg); }
.bubble__face { position: absolute; bottom: -60px; width: 64px; height: auto; filter: drop-shadow(2px 3px 0 rgba(26,20,16,0.28)); }
.bubble__spark { position: absolute; color: var(--paper); font-size: 22px; -webkit-text-stroke: 1.5px var(--ink); }
.bubble:hover { animation: none; transform: translateY(-8px) scale(1.04) rotate(0deg) !important; z-index: 6; transition: transform var(--d-base) var(--e-spring); }

/* scatter + gentle float — rotation kept via --r so it survives reduced-motion */
/* spread down the tall section (vh) so they scroll past the pinned headline, alternating sides */
.bubble--1 { --r: 2deg;    top: 16vh;  left: 23%;  transform: rotate(var(--r)); }
.bubble--2 { --r: -3deg;   top: 50vh;  right: 24%; transform: rotate(var(--r)); }
.bubble--3 { --r: -2deg;   top: 84vh;  left: 26%;  transform: rotate(var(--r)); }
.bubble--4 { --r: 3deg;    top: 118vh; right: 25%; transform: rotate(var(--r)); }
.bubble--5 { --r: -1.5deg; top: 152vh; left: 24%;  transform: rotate(var(--r)); }
.bubble--1 .bubble__face, .bubble--3 .bubble__face, .bubble--5 .bubble__face { left: 26px; } .bubble--1::after, .bubble--3::after, .bubble--5::after { left: 38px; }
.bubble--2 .bubble__face, .bubble--4 .bubble__face { right: 26px; } .bubble--2::after, .bubble--4::after { right: 38px; }
.bubble--1 .bubble__spark { top: -8px; right: -10px; } .bubble--2 .bubble__spark { top: -8px; left: -10px; }
.bubble--3 .bubble__spark { top: -10px; right: -10px; } .bubble--4 .bubble__spark { top: -8px; left: -10px; } .bubble--5 .bubble__spark { top: -8px; right: -10px; }

@media (max-width: 860px) {
  .notes { min-height: 0; }
  .notes__pin { position: static; height: auto; padding: var(--s-8) 0 var(--s-6); }
  .bubble { position: relative; z-index: 3; width: auto; max-width: 440px; margin: 0 auto var(--s-9); left: auto; right: auto; top: auto; transform: rotate(0) !important; animation: none !important; }
  .bubble--1 { margin-top: var(--s-7); }
  .bubble::after { left: 36px; right: auto; } .bubble__face { left: 24px; right: auto; }
}

/* ════════ PROCESS ════════ */
.process { padding: var(--section-y) var(--gutter); }
.process__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.step { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--paper-2); border: var(--ink-border); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base); }
.step:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--sh-2); }
.step:nth-child(2) { background: var(--vang); } .step:nth-child(3) { background: var(--cam); } .step:nth-child(4) { background: var(--ngoc); }
.step__num { font-family: var(--f-display); font-size: 44px; color: var(--do); line-height: 1; }
.step__title { font-family: var(--f-display); font-size: clamp(22px,2vw,30px); text-transform: uppercase; margin: var(--s-2) 0 var(--s-3); }
.step__txt { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }

/* ════════ MEGA CTA ════════ */
.megacta { padding: var(--section-y) var(--gutter); display: grid; place-items: center; background: var(--do); border-block: var(--bw) solid var(--ink); position: relative; overflow: hidden; }
.megacta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(26,20,16,0.14) 1.5px, transparent 1.7px); background-size: 20px 20px; }
.megacta__circle {
  position: relative; display: grid; place-items: center;
  width: clamp(220px, 34vw, 380px); aspect-ratio: 1; border-radius: 50%;
  background: var(--vang); border: var(--bw) solid var(--ink); box-shadow: var(--sh-3);
  text-align: center; transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base);
}
.megacta__circle span { font-family: var(--f-display); font-size: clamp(34px,5vw,64px); line-height: 1.02; text-transform: uppercase; color: var(--ink); }
.megacta__circle em { font-style: normal; color: var(--do); }
.megacta__circle:hover { transform: scale(1.05) rotate(-3deg); box-shadow: 14px 14px 0 var(--ink); }
.megacta__circle:active { transform: scale(0.98); box-shadow: var(--sh-1); }

/* ════════ FOOTER ════════ */
.foot { background: var(--ink); color: var(--paper); padding: var(--section-y) var(--gutter) var(--s-7); }
.foot__inner { max-width: var(--container); margin: 0 auto; }
.foot__big { font-family: var(--f-display); font-size: clamp(48px, 12vw, 200px); line-height: 0.82; text-transform: uppercase; color: var(--paper); margin-bottom: var(--s-8); transition: text-shadow var(--d-base); }
.foot__big em { font-style: normal; color: var(--vang); }
.foot__big:hover { text-shadow: 6px 6px 0 var(--do), 12px 12px 0 var(--vang); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); padding-top: var(--s-7); border-top: 2.5px solid rgba(251,243,225,0.2); }
.foot__brand h4, .foot__col h4 { font-family: var(--f-display); font-size: var(--t-lg); text-transform: uppercase; color: var(--vang); margin-bottom: var(--s-3); }
.foot__brand p { color: rgba(251,243,225,0.7); line-height: 1.6; font-size: var(--t-sm); max-width: 40ch; }
.foot__col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.foot__col a { color: rgba(251,243,225,0.8); font-size: var(--t-sm); transition: color var(--d-micro), transform var(--d-micro); display: inline-block; }
.foot__col a:hover { color: var(--vang); transform: translateX(4px); }
.foot__bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 2.5px solid rgba(251,243,225,0.2); font-family: var(--f-mono); font-size: var(--t-xs); color: rgba(251,243,225,0.55); }

/* ════════ BAG (album panel) ════════ */
.bag {
  position: fixed; right: var(--s-4); top: 50%; transform: translateY(-50%);
  z-index: var(--z-album); width: 280px;
  background: var(--paper); border: var(--ink-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: var(--s-5);
  transition: transform var(--d-slow) var(--e-spring), opacity var(--d-base);
}
/* collapsed = drawer: leave the "Túi" tab + a sliver of the card edge peeking */
.bag.is-collapsed { transform: translate(calc(100% - 12px), -50%); }
/* transform-free "catch" flash → safe across desktop panel + mobile sheet */
.bag.is-pop { animation: bag-pop 0.55s var(--e-quart); }
@keyframes bag-pop { 0%,100% { box-shadow: var(--sh-3); } 40% { box-shadow: 0 0 0 6px var(--vang), var(--sh-3); } }
.bag__toggle { position: absolute; left: -42px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; background: var(--do); color: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 6px 14px; font-family: var(--f-display); font-size: 16px; text-transform: uppercase; box-shadow: var(--sh-press); }
.bag__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2.5px solid var(--ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.bag__title { font-family: var(--f-display); font-size: 24px; text-transform: uppercase; }
.bag__count { display: grid; place-items: center; min-width: 28px; height: 28px; background: var(--vang); border: 2.5px solid var(--ink); border-radius: var(--r-pill); font-family: var(--f-mono); font-weight: 700; font-size: var(--t-sm); }
.bag__empty { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); text-align: center; padding: var(--s-5) 0; }
.bag:not(.is-empty) .bag__empty { display: none; }
.bag__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); max-height: 280px; overflow-y: auto; }
.bag__item { position: relative; aspect-ratio: 1; background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 6px; overflow: hidden; cursor: pointer; transform: rotate(var(--rot,0deg)); }
.bag__item img { width: 100%; height: 100%; object-fit: contain; }
/* whole item = delete target; hover shows a red ✕ overlay (zooms in) */
.bag__item-rm { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--do); color: var(--paper); font-size: 26px; font-weight: 800; opacity: 0; transform: scale(0.7); transition: opacity var(--d-base) var(--e-quart), transform var(--d-base) var(--e-spring); }
.bag__item:hover .bag__item-rm, .bag__item:focus-visible .bag__item-rm { opacity: 0.92; transform: scale(1); }
/* comic poof on delete (keeps the item's tilt via --rot) */
.bag__item.is-removing { pointer-events: none; z-index: 2; animation: item-poof 0.38s var(--e-spring) forwards; }
@keyframes item-poof {
  0%   { transform: rotate(var(--rot,0deg)) scale(1);   opacity: 1; }
  35%  { transform: rotate(calc(var(--rot,0deg) - 12deg)) scale(1.18); opacity: 1; }
  100% { transform: rotate(calc(var(--rot,0deg) + 45deg)) scale(0);    opacity: 0; }
}
.bag__total { font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 700; text-align: center; margin: var(--s-3) 0; }
.bag:not(.is-empty) .bag__total { padding-top: var(--s-3); border-top: 2.5px solid var(--ink); }
.bag__cta { width: 100%; padding: 13px; background: var(--do); color: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-pill); font-family: var(--f-body); font-weight: 700; box-shadow: var(--sh-press); transition: transform var(--d-micro) var(--e-quart); }
.bag.is-empty .bag__cta { display: none; }
.bag__cta:hover { transform: translateY(-2px); }
.bag__cta:active { transform: translateY(2px); }

/* ════════ TOAST ════════ */
/* comic toast — yellow chip, ink border + hard shadow; parks fully
   off-screen (100% + 80px) when hidden so it never peeks into view */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, calc(100% + 80px));
  z-index: var(--z-fx);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--vang); color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--r-pill);
  padding: 13px 24px;
  font-family: var(--f-body); font-weight: 800; font-size: var(--t-base);
  letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: var(--sh-2);
  transition: transform var(--d-slow) var(--e-spring);
  pointer-events: none;
}
.toast::before { content: '✦'; color: var(--do); font-size: 0.9em; }
.toast.is-show { transform: translate(-50%, 0); }

/* ════════ COLLECTION MODAL ════════ */
.cmodal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-5); background: rgba(26,20,16,0.62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--d-base), visibility var(--d-base); }
.cmodal.is-open { opacity: 1; visibility: visible; }
.cmodal__panel { width: min(900px, 96vw); max-height: 90vh; overflow-y: auto; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3); transform: scale(0.9) translateY(20px); transition: transform var(--d-slow) var(--e-spring); }
.cmodal.is-open .cmodal__panel { transform: scale(1) translateY(0); }
.cmodal__close { position: sticky; top: var(--s-3); float: right; margin: var(--s-3) var(--s-3) 0 0; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 50%; font-size: 22px; z-index: 3; box-shadow: var(--sh-press); transition: transform var(--d-base) var(--e-quart); }
.cmodal__close:hover { transform: rotate(90deg) scale(1.05); background: var(--do); color: var(--paper); }
.cmodal__hero { padding: clamp(28px,5vw,56px); border-bottom: var(--bw) solid var(--ink); position: relative; }
.cmodal__hero[data-theme="tan-co-giao-duyen"] { background: var(--vang); }
.cmodal__hero[data-theme="linh-thieng"] { background: var(--do); color: var(--paper); }
.cmodal__hero[data-theme="danh-thang"] { background: var(--ngoc); }
.cmodal__hero[data-theme="doi-song"] { background: var(--cam); }
.cmodal__crumb { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.cmodal__title { font-family: var(--f-display); font-size: clamp(36px,6vw,72px); line-height: 1.06; text-transform: uppercase; margin: var(--s-2) 0; }
.cmodal__title em { font-style: normal; color: var(--ink); opacity: 0.55; }
.cmodal__hero[data-theme="linh-thieng"] .cmodal__title em { color: var(--vang); opacity: 1; }
.cmodal__sub { max-width: 56ch; font-size: var(--t-md); line-height: 1.5; }
.cmodal__meta { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-3); margin-top: var(--s-5); }
.cmodal__meta div { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.cmodal__meta strong { font-family: var(--f-display); font-size: 28px; opacity: 1; margin-top: 4px; }
.cmodal__body { padding: clamp(24px,4vw,48px); }
.cmodal__section { margin-bottom: var(--s-7); }
.cmodal__section h3 { font-family: var(--f-display); font-size: 26px; text-transform: uppercase; margin-bottom: var(--s-4); color: var(--do); }
.cmodal__author { display: flex; gap: var(--s-4); align-items: flex-start; }
.cmodal__avatar { flex-shrink: 0; width: 88px; height: 88px; border: 2.5px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.cmodal__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cmodal__author-name { font-family: var(--f-display); font-size: 24px; text-transform: uppercase; }
.cmodal__author-role { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; color: var(--ink-2); margin: 2px 0 var(--s-3); }
.cmodal__author-bio { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.cmodal__quote { margin-top: var(--s-3); font-family: var(--f-display); font-size: clamp(18px,2vw,24px); line-height: 1.2; color: var(--ink); text-transform: none; }
.cmodal__insp { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
.cmodal__insp-card { padding: var(--s-4); background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: var(--r-md); }
.cmodal__insp-num { font-family: var(--f-display); font-size: 30px; color: var(--do); }
.cmodal__insp-t { font-family: var(--f-display); font-size: 19px; text-transform: uppercase; margin: var(--s-1) 0 var(--s-2); }
.cmodal__insp-b { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); }
.cmodal__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: var(--s-3); }
.cmodal__item { display: flex; flex-direction: column; align-items: center; padding: var(--s-3); background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: var(--r-sm); cursor: pointer; transition: transform var(--d-base) var(--e-spring), background var(--d-base); }
.cmodal__item:hover { transform: translateY(-5px) rotate(-2deg); background: var(--vang); }
.cmodal__item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.cmodal__item-label { font-weight: 700; font-size: var(--t-xs); margin-top: var(--s-2); }
.cmodal__item-price { font-family: var(--f-mono); font-size: 10px; color: var(--do); font-weight: 700; }

/* ════════ CHECKOUT PANEL ════════ */
.checkout__panel { width: min(840px, 96vw); }
.checkout__grid { display: grid; grid-template-columns: 1fr 1fr; }
.checkout__summary { padding: clamp(28px,4vw,46px); background: var(--vang); border-right: var(--bw) solid var(--ink); }
.checkout__crumb { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.checkout__title { font-family: var(--f-display); font-size: clamp(30px,4vw,52px); line-height: 1.04; text-transform: uppercase; margin: var(--s-2) 0 var(--s-5); }
.checkout__items { display: flex; flex-direction: column; gap: var(--s-2); max-height: 44vh; overflow-y: auto; }
.checkout__item { display: flex; align-items: center; gap: var(--s-3); background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-sm); padding: 6px 10px; }
.checkout__item img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.checkout__item span { flex: 1; font-weight: 700; font-size: var(--t-sm); }
.checkout__item b { font-family: var(--f-mono); color: var(--do); }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--bw) solid var(--ink); font-family: var(--f-display); text-transform: uppercase; font-size: 18px; }
.checkout__total b { font-size: 30px; }
.checkout__form { padding: clamp(28px,4vw,46px); display: flex; flex-direction: column; gap: var(--s-3); }
.checkout__formtitle { font-family: var(--f-display); font-size: 24px; text-transform: uppercase; margin-bottom: var(--s-2); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.field input { background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: var(--r-sm); padding: 11px 13px; font-weight: 500; transition: box-shadow var(--d-micro), background var(--d-micro); }
.field input:focus { box-shadow: var(--sh-press); background: var(--paper); }
.checkout__pay { margin-top: var(--s-3); width: 100%; }
.checkout__safe { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-2); text-align: center; margin-top: 2px; }
@media (max-width: 720px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout__summary { border-right: 0; border-bottom: var(--bw) solid var(--ink); }
  .checkout__items { max-height: 30vh; }
}

/* ════════ TRAIL — điểm bán (winding route; cities POP up as the carp passes) ════════ */
.trail { background: var(--paper); }
.trail__stage { position: relative; height: 300vh; }
.trail__sticky { position: sticky; top: 0; height: 100vh; overflow: visible; z-index: 5; }
.trail__clip { position: absolute; inset: 0; overflow: hidden; }   /* clips the flowing path to the frame; the carp lives outside this, on top */

/* HUD — headline + live city + legend, pinned in the viewport (left) */
.trail__hud { position: absolute; z-index: 5; left: clamp(20px,5vw,84px); right: auto; top: clamp(44px,9vh,104px); max-width: min(40vw,540px); pointer-events: none; }
.trail__hud .stamp { margin-bottom: var(--s-4); }
.trail__title { font-family: var(--f-display); font-size: clamp(38px,5.2vw,84px); line-height: 1.16; text-transform: uppercase; color: var(--ink); letter-spacing: -0.005em; }
.trail__title em { font-style: normal; color: var(--do); -webkit-text-stroke: 2px var(--ink); }
.trail__lede { margin-top: var(--s-5); max-width: 32ch; font-size: clamp(14px,1.05vw,17px); line-height: 1.5; color: var(--ink-2); }
.trail__now { margin-top: var(--s-6); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; }
.trail__now strong { font-family: var(--f-display); font-size: clamp(26px,2.6vw,42px); color: var(--do); -webkit-text-stroke: 1.4px var(--ink); letter-spacing: 0; }
.trail__hud .trail__legend { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; }

/* flowing path layer — JS translates it so the carp stays screen-centred */
.trail__scroller { position: absolute; left: 0; top: 0; width: 100%; height: 2400px; will-change: transform; }
.trail__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail__draw { transition: stroke-dashoffset 0.1s linear; }

/* city markers — POP (overshoot) as the carp reaches screen centre; labels point inward */
.trail__pin { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .3s var(--e-quart), transform .55s var(--e-spring); font-family: var(--f-display); font-size: clamp(24px,3vw,52px); text-transform: uppercase; color: var(--do); -webkit-text-stroke: 1.5px var(--ink); white-space: nowrap; }
.trail__pin--r { transform: translate(20px,-50%) rotate(-3deg) scale(0); transform-origin: left center; }
.trail__pin--l { transform: translate(calc(-100% - 20px),-50%) rotate(3deg) scale(0); transform-origin: right center; }
.trail__pin--r.is-active { opacity: 1; transform: translate(20px,-50%) rotate(-3deg) scale(1); }
.trail__pin--l.is-active { opacity: 1; transform: translate(calc(-100% - 20px),-50%) rotate(3deg) scale(1); }

.trail__card { position: absolute; z-index: 3; opacity: 0; width: clamp(156px,17vw,236px); filter: drop-shadow(5px 7px 0 rgba(26,20,16,0.26)); transition: opacity .3s, transform .6s var(--e-spring); }
.trail__card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.trail__card figcaption { font-family: var(--f-display); font-size: clamp(19px,2.1vw,32px); text-transform: uppercase; text-align: center; color: var(--do); -webkit-text-stroke: 1px var(--ink); margin-top: 2px; }
.trail__card--r { transform: translate(20px,-50%) rotate(-3deg) scale(0); transform-origin: left center; }
.trail__card--l { transform: translate(calc(-100% - 20px),-50%) rotate(3deg) scale(0); transform-origin: right center; }
.trail__card--r.is-active { opacity: 1; transform: translate(20px,-50%) rotate(-3deg) scale(1); }
.trail__card--l.is-active { opacity: 1; transform: translate(calc(-100% - 20px),-50%) rotate(3deg) scale(1); }

/* carp — fixed at screen centre, swims along the path's x */
.trail__rider { position: absolute; left: 0; top: 0; width: clamp(74px,8vw,128px); filter: drop-shadow(3px 5px 0 rgba(26,20,16,0.22)); will-change: transform; z-index: 6; }
.trail__rider img { width: 100%; animation: trailSwim 1.1s var(--e-quart) infinite; }
@keyframes trailSwim { 0%,100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.08); } }

/* reduced-motion / no-JS: unpin, show whole route + all cities */
.trail__stage.is-static { height: auto; }
.trail__stage.is-static .trail__sticky { position: static; height: auto; overflow: visible; padding: var(--section-y) 0; }
.trail__stage.is-static .trail__scroller { position: relative; transform: none !important; }
.trail__stage.is-static .trail__rider { display: none; }

/* address list below the stage */
.trail__cities { max-width: var(--container); margin: clamp(24px,5vh,64px) auto 0; padding: 0 var(--gutter) var(--section-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: var(--s-4); position: relative; z-index: 4; }
.store-city { padding: var(--s-5); background: var(--paper-2); border: var(--ink-border); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: transform var(--d-base) var(--e-spring); }
.store-city:hover { transform: translateY(-4px) rotate(-0.6deg); }
.store-city__name { font-family: var(--f-display); font-size: clamp(22px,2.4vw,32px); text-transform: uppercase; color: var(--do); margin-bottom: var(--s-3); }
.store { font-size: var(--t-sm); line-height: 1.6; color: var(--ink); margin-top: var(--s-2); }
.store small { color: var(--ink-2); }
.store__tag { display: inline-block; margin-right: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 11px; border: 2.5px solid var(--ink); border-radius: var(--r-pill); color: var(--ink); box-shadow: var(--sh-press); vertical-align: 1px; }
.store__tag--g { background: var(--ngoc); }   /* Ginkgo = jade */
.store__tag--a { background: var(--cam); }    /* Artbook = orange */

@media (max-width: 1024px) {
  .trail__stage { height: 300vh; }
  .trail__hud { left: 50%; right: auto; transform: translateX(-50%); top: clamp(20px,4vh,48px); max-width: min(92vw,560px); text-align: center; background: rgba(251,243,225,0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 14px 16px 16px; border-radius: var(--r-md); }
  .trail__now, .trail__hud .trail__legend { justify-content: center; }
  .trail__title { font-size: clamp(38px,11vw,72px); }
  .trail__card { width: clamp(112px,30vw,150px); }
  .trail__card--r, .trail__card--l { transform: translate(-50%,-108%) rotate(3deg) scale(0); transform-origin: center bottom; }
  .trail__card--r.is-active, .trail__card--l.is-active { transform: translate(-50%,-108%) rotate(3deg) scale(1); }
  .trail__pin { font-size: clamp(18px,5.5vw,30px); }
  .trail__pin--r, .trail__pin--l { transform: translate(-50%,-148%) scale(0); transform-origin: center bottom; }
  .trail__pin--r.is-active, .trail__pin--l.is-active { transform: translate(-50%,-148%) scale(1); }
}

/* ════════ FX LAYER (cursor / comic bursts / progress / edges) ════════ */
/* halftone overlays section backgrounds (multiply) but sits BELOW content,
   which is lifted to z-index:3 — texture on the paper, crisp text/elements */
#halftone-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; }
/* lift every section's content above the halftone(1)+grain(2) overlays so
   text & elements stay crisp while backgrounds keep the dot texture */
.hero__inner, .ticker__track, .story__inner, .sec-head, .drops__grid,
.shop-div, .grid, .shop__soon, .ring__inner, .notes__list,
.process__grid, .megacta__circle, .foot__inner,
.trail__cities {
  position: relative; z-index: 3;
}
.j-cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: var(--z-cursor); pointer-events: none; will-change: transform; border-radius: 50%; background: var(--do); border: 2.5px solid var(--ink); mix-blend-mode: multiply; transition: width var(--d-base) var(--e-spring), height var(--d-base) var(--e-spring), margin var(--d-base) var(--e-spring), background var(--d-base); }
.j-cursor.is-hot { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: var(--vang); }
.j-cursor.is-down { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
@media (hover: none), (max-width: 860px) { .j-cursor { display: none; } }
:root.has-cursor, :root.has-cursor * { cursor: none; }
:root.has-cursor a, :root.has-cursor button, :root.has-cursor .sticker { cursor: none; }
.j-progress { position: fixed; top: 0; left: 0; height: 5px; width: 100%; z-index: var(--z-header); pointer-events: none; }
.j-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--do), var(--vang) 50%, var(--ngoc)); border-bottom: 1px solid var(--ink); }
.j-edge { position: fixed; top: 0; width: 12px; height: 100vh; z-index: var(--z-sticky); pointer-events: none; background: repeating-linear-gradient(0deg, var(--do) 0 14px, var(--vang) 14px 28px); border-inline: 2px solid var(--ink); opacity: 0.9; }
.j-edge--l { left: 0; } .j-edge--r { right: 0; }
@media (max-width: 860px) { .j-edge { display: none; } }
.j-kachow { position: fixed; z-index: var(--z-fx); pointer-events: none; font-family: var(--f-display); font-size: clamp(40px,6vw,80px); text-transform: uppercase; color: var(--vang); -webkit-text-stroke: 4px var(--ink); transform: translate(-50%,-50%); text-shadow: 5px 5px 0 var(--do); animation: kachow 0.85s var(--e-spring) forwards; }
@keyframes kachow { 0% { transform: translate(-50%,-50%) scale(0) rotate(-24deg); } 30% { transform: translate(-50%,-50%) scale(1.25) rotate(8deg);} 50% { transform: translate(-50%,-50%) scale(0.92) rotate(-4deg);} 70% { transform: translate(-50%,-50%) scale(1.08) rotate(2deg); opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1.4) rotate(0); opacity: 0; } }
.j-burst { position: fixed; z-index: calc(var(--z-fx) - 1); pointer-events: none; width: 220px; height: 220px; transform: translate(-50%,-50%) scale(0); animation: burst 0.8s var(--e-spring) forwards; }
@keyframes burst { 0% { transform: translate(-50%,-50%) scale(0) rotate(0); opacity: 1;} 60% { transform: translate(-50%,-50%) scale(1.1) rotate(25deg); opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1.7) rotate(50deg); opacity: 0; } }
.j-ball, .j-star { position: fixed; z-index: calc(var(--z-fx) - 2); pointer-events: none; will-change: transform; }
.j-ball { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.fly { position: fixed; z-index: var(--z-fx); pointer-events: none; will-change: transform; }
.fly img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(26,20,16,0.25)); }
.spawn { position: absolute; z-index: var(--z-decor); width: clamp(70px,9vw,120px); margin: -1px 0 0 -1px; transform: translate(-50%,-50%) rotate(var(--rot,0deg)); cursor: pointer; will-change: transform; animation: spawn-in 0.6s var(--e-spring); filter: drop-shadow(4px 6px 0 rgba(26,20,16,0.2)); }
.spawn img { width: 100%; pointer-events: none; }
@keyframes spawn-in { 0% { transform: translate(-50%,-50%) scale(0) rotate(calc(var(--rot,0deg) - 40deg)); } 60% { transform: translate(-50%,-50%) scale(1.12) rotate(var(--rot,0deg)); } 100% { transform: translate(-50%,-50%) scale(1) rotate(var(--rot,0deg)); } }
.spawn.is-peel { animation: spawn-peel 0.5s var(--e-quart) forwards; }
@keyframes spawn-peel { to { transform: translate(-50%,-50%) scale(0.2) rotate(calc(var(--rot,0deg) + 60deg)); opacity: 0; } }
.spawn-hint { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px); z-index: var(--z-album); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; padding: 9px 16px; border-radius: var(--r-pill); opacity: 0; transition: opacity var(--d-base), transform var(--d-base) var(--e-spring); pointer-events: none; }
.spawn-hint.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════ SCROLL REVEALS ════════ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--d-enter) var(--e-quart), transform var(--d-enter) var(--e-expo); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--pop { transform: translateY(40px) scale(0.92); }
.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }
.reveal[data-delay="3"] { transition-delay: 180ms; }
.reveal[data-delay="4"] { transition-delay: 240ms; }
.reveal[data-delay="5"] { transition-delay: 300ms; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
  .drops__grid { grid-template-columns: repeat(2, 1fr); }
  .drop--tall { grid-row: span 1; min-height: 320px; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .hero__ghost { display: none; }
}
@media (max-width: 768px) {
  .hdr__burger { display: inline-flex; }
  .hdr__logo small { display: none; }
  .hdr .btn { min-height: 44px; }
  .hdr__logo { font-size: 20px; }
  .hdr__actions { gap: 6px; }
  .hdr__nav { display: flex; flex-direction: column; gap: 0; position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--paper); border-bottom: var(--bw) solid var(--ink); box-shadow: var(--sh-2); padding: var(--s-3) var(--gutter) var(--s-6); transform: translateY(-140%); transition: transform .52s var(--e-spring); z-index: var(--z-header); }
  .hdr__nav.is-open { transform: translateY(0); }
  .hdr__nav a { font-size: var(--t-xl); font-weight: 800; padding: 14px 6px; min-height: 48px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink-line); opacity: 0; transform: translateX(-30px) rotate(-2.5deg); transition: opacity .28s var(--e-quart), transform .5s var(--e-spring); }
  .hdr__nav a::before { content: '✦'; color: var(--do); font-size: 0.62em; -webkit-text-stroke: 0; }
  .hdr__nav a::after { display: none; }
  .hdr__nav.is-open a { opacity: 1; transform: translateX(0) rotate(0); }
  .hdr__nav.is-open a:active { transform: translateX(6px) rotate(0) scale(0.98); }
  .hdr__nav.is-open a:nth-child(1) { transition-delay: .06s; }
  .hdr__nav.is-open a:nth-child(2) { transition-delay: .12s; }
  .hdr__nav.is-open a:nth-child(3) { transition-delay: .18s; }
  .hdr__nav.is-open a:nth-child(4) { transition-delay: .24s; }
  .hdr__nav.is-open a:nth-child(5) { transition-delay: .30s; }
  .story__inner { grid-template-columns: 1fr; }
  .story__left { position: static; }
  .story__right { padding-top: var(--s-5); gap: var(--s-6); }
  .snap-wrap { width: 100%; align-self: stretch !important; margin: 0 !important; }
  .ring__match { flex-direction: column; }
  .ring__vs { transform: rotate(90deg); }
  .bag { right: 0; left: 0; top: auto; bottom: 0; width: auto; transform: translateY(calc(100% - 52px)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .bag.is-collapsed { transform: translateY(calc(100% - 52px)); }
  .bag:not(.is-collapsed) { transform: translateY(0); }
  .bag__toggle { left: 50%; top: 0; transform: translate(-50%, -100%); border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .bag__list { grid-template-columns: repeat(5, 1fr); max-height: 180px; }
  /* +1 toast: move to the TOP (just under the header) on mobile — the bottom is taken by the cart bar; keep it on top */
  .toast { top: calc(var(--header-h) + 10px); bottom: auto; transform: translate(-50%, calc(-100% - 90px)); }
  .toast.is-show { transform: translate(-50%, 0); }
}
@media (max-width: 560px) {
  .drops__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1; }
}