@font-face {
  font-family: 'NanumPen';
  src: url('NanumPenScript-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal;
  font-display: block;
}

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

:root {
  --cream:  #F2EDD8;
  --cream2: #EDE5CC;
  --lemon:  #EDD98A;
  --sky:    #C8DCF0;
  --baby:   #B0C8DC;
  --slate:  #7FA8C8;
  --navy:   #1E3A5F;
  --deep:   #0D1B2E;
  --black:  #1A1A1A;
  --white:  #FAF7EE;
  --tape:   rgba(200,170,90,0.36);
}

html { scroll-behavior: auto; }

/* 全站標題副標置中 */
.sec-title, .sec-ko { text-align: center; }

/* 導航按鈕 — Y2K 光澤膠囊 */
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px 4px;
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  line-height: 1; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Windows 浮雕 */
  background: #c0c0c0;
  color: #000;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: 1px 1px 0 #000;
  border-radius: 0;
  transition: none;
}
.nav-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  box-shadow: none;
  transform: translate(1px, 1px);
}
.nav-lemon, .nav-navy { background: #c0c0c0; color: #000; }

/* 全站 cursor：小雞 🐥，按鈕/可點元素保留手形 */
html, body {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='24'>🐥</text></svg>") 12 24, auto;
}
a, button, [onclick], .interact, .cam-btn, .flip-card,
.stamp-ring, .star-tap, .star-btn, .fstkr[data-step],
.s06-ph, .dim-star, .food-item, #sanhaBtn,
.intro-badge, .card-slot {
  cursor: pointer !important;
}

body {
  background: var(--cream2);
  color: var(--black);
  font-family: 'Space Grotesk', sans-serif;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* grain overlay — vintage texture */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999;
  opacity: 0.24;
}

/* scroll reveal */
.rv  { opacity: 0; transform: translateY(20px); transition: opacity 0.75s ease, transform 0.75s ease; will-change: opacity, transform; }
.rv.on  { opacity: 1; transform: none; }
.rv2 { opacity: 0; transform: translateY(15px); transition: opacity 0.9s ease 0.18s, transform 0.9s ease 0.18s; will-change: opacity, transform; }
.rv2.on { opacity: 1; transform: none; }
.rv3 { opacity: 0; transform: translateY(10px); transition: opacity 1s ease 0.36s, transform 1s ease 0.36s; will-change: opacity, transform; }
.rv3.on { opacity: 1; transform: none; }
.rv4 { opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease 0.55s, transform 0.9s ease 0.55s; will-change: opacity, transform; }
.rv4.on { opacity: 1; transform: none; }
.rv5 { opacity: 0; transform: translateY(8px); transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; will-change: opacity, transform; }
.rv5.on { opacity: 1; transform: none; }

/* common typography */
.sec-no {
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.38;
}
.sec-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em; line-height: 1;
}
/* 消除相鄰 sticker 行之間的縫 */
.sec-title + .sec-title { margin-top: -4px; }
.sec-ko {
  font-size: 16px; line-height: 1.8;
  font-weight: 300; letter-spacing: 0.02em;
}
.divider {
  flex: 1; height: 1px; background: rgba(0,0,0,0.1);
}
.divider-light {
  flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}

/* polaroid */
.pola {
  background: white;
  padding: 8px 8px 30px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.17);
}
.pola-cap {
  text-align: center; font-size: 9px;
  font-family: 'Space Mono', monospace;
  color: #999; margin-top: 7px; letter-spacing: 0.08em;
}

/* photo placeholders */
.ph {
  background: rgba(0,0,0,0.055);
  border: 1.5px dashed rgba(0,0,0,0.13);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(0,0,0,0.2);
}
.ph-dark {
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}

/* ══════════════════════════════════
   01 COVER
══════════════════════════════════ */
.s01 {
  height: 92svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.s01-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(30,58,95,0.1) 1px, transparent 1px);
  background-size: 22px 22px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.a1 { animation: fadeUp 0.8s ease 0.2s  both; }
.a2 { animation: fadeUp 0.7s ease 0.55s both; }
.a3 { animation: fadeUp 0.7s ease 0.82s both; }
.a4 { animation: fadeUp 0.7s ease 1.05s both; }
.a5 { animation: fadeUp 0.6s ease 1.5s  both; }

@keyframes scrollBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* 01 COVER title animations */
@keyframes coverLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }
@keyframes coverRight { from{opacity:0;transform:translateX(38px)}  to{opacity:1;transform:none} }

/* 拍立得顯影 — 黑色漸漸變出 */
@keyframes polaroidDevelop {
  0%   { filter: brightness(0) saturate(0); }
  20%  { filter: brightness(0.06) saturate(0.1); }
  50%  { filter: brightness(0.38) saturate(0.5) sepia(0.25); }
  78%  { filter: brightness(0.82) saturate(0.88); }
  100% { filter: brightness(1) saturate(1); }
}

.cover-pola-wrap {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s ease 0.1s, transform 0.55s ease 0.1s;
  margin-bottom: 24px;
}
.s01.cover-go .cover-pola-wrap { opacity: 1; transform: none; }
.cover-pola-ph { filter: brightness(0) saturate(0); }
.s01.cover-go .cover-pola-ph { animation: polaroidDevelop 2.4s ease 0.3s both; }
@keyframes eggFloat {
  0%,100% { transform: rotate(-18deg) translateY(0px); }
  50%     { transform: rotate(-18deg) translateY(-8px); }
}
@keyframes chicWalk {
  0%   { transform: translateX(-70px); }
  100% { transform: translateX(calc(100vw + 70px)); }
}

/* 三顆蛋橫排 */
.egg-trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}
.egg-item {
  position: relative;
  cursor: pointer;
  width: 64px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.egg-item:hover { transform: scale(0.82); }
.egg-main {
  height: 54px; width: auto;
  animation: eggFloat 3s ease-in-out infinite;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.egg-item:nth-child(1) .egg-main { animation-delay: 0s; }
.egg-item:nth-child(2) .egg-main { animation-delay: 0.9s; }
.egg-item:nth-child(3) .egg-main { animation-delay: 1.7s; }
.egg-reveal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.egg-chick { height: 72px; width: auto; }
.egg-fried { height: 64px; width: auto; transform: translate(-50%, -50%) rotate(-10deg) scale(0.4); }

/* 蛋 → 荷包蛋互動 (舊) */
.egg-container {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.egg-shell {
  width: 62px; height: 84px;
  background: radial-gradient(ellipse at 38% 28%, #fffdf0 0%, #f5edd8 52%, #e8d8b4 100%);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  transform: rotate(-22deg);
  box-shadow: inset -3px -5px 8px rgba(0,0,0,0.06), 3px 6px 16px rgba(0,0,0,0.14);
  position: relative; overflow: visible;
  transition: width .45s cubic-bezier(.34,1.56,.64,1),
              height .45s cubic-bezier(.34,1.56,.64,1),
              border-radius .45s cubic-bezier(.34,1.56,.64,1),
              transform .45s cubic-bezier(.34,1.56,.64,1),
              background .4s ease, box-shadow .4s ease;
}
.egg-shell.cracked {
  width: 112px; height: 74px;
  border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%;
  transform: rotate(-10deg);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
}
.egg-yolk {
  position: absolute;
  width: 44px; height: 42px;
  background: radial-gradient(circle at 38% 30%, #ffee60 0%, #f5a822 55%, #e88a20 100%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1) .28s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
}
.egg-shell.cracked .egg-yolk {
  transform: translate(-50%, -50%) scale(1);
}
@keyframes coverStamp {
  0%   { opacity:0; transform:scale(2.6) rotate(16deg); }
  55%  { opacity:1; transform:scale(0.9) rotate(-5deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

.cover-noreason { opacity:0; }
.cover-just     { opacity:0; }
.cover-sanha    { opacity:0; }

/* 韓文先出現（typewriter），大字延遲到韓文打完後 */
.s01.cover-go .cover-noreason { animation:coverLeft  0.55s ease 2.7s both; }
.s01.cover-go .cover-just     { animation:coverRight 0.45s ease 3.2s both; }
.s01.cover-go .cover-sanha    { animation:coverStamp 0.55s ease 2.85s both; }

/* ══════════════════════════════════
   02 STAGE
══════════════════════════════════ */
.s02 {
  background: var(--deep);
  color: var(--white);
  padding: 52px 22px 60px;
  position: relative; overflow: hidden;
}

@keyframes spinBounce {
  0%   { transform: rotate(0deg)   scale(1); }
  42%  { transform: rotate(210deg) scale(1.55); }
  70%  { transform: rotate(345deg) scale(1.22); }
  87%  { transform: rotate(368deg) scale(1.07); }
  100% { transform: rotate(360deg) scale(1); }
}
.star-btn {
  font-size: 46px; cursor: pointer;
  display: inline-block; user-select: none;
  filter: drop-shadow(0 0 10px rgba(237,217,138,0.3));
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.star-btn.spin {
  animation: spinBounce 0.78s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Win95 folder */
.win95-folder {
  display: inline-block; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
  transition: filter 0.2s;
}
@keyframes folderShake {
  0%   { transform: scale(1) rotate(0deg); }
  18%  { transform: scale(1.2) rotate(-12deg); }
  42%  { transform: scale(1.25) rotate(9deg); }
  62%  { transform: scale(1.12) rotate(-4deg); }
  80%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.win95-folder.shaking { animation: folderShake 0.55s cubic-bezier(0.34,1.4,0.64,1) forwards; }

.pola-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
}

/* ticket */
.ticket-wrap {
  background: var(--cream);
  color: var(--black);
  border-radius: 7px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.38);
  display: flex; overflow: hidden;
  position: relative;
}
/* perforation holes using box-shadow trick on a pseudo-element */
.ticket-wrap::before,
.ticket-wrap::after {
  content: '';
  position: absolute;
  right: 77px; /* width of stub */
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--deep);
  z-index: 5;
}
.ticket-wrap::before { top: -7px; }
.ticket-wrap::after  { bottom: -7px; }

.ticket-main {
  flex: 1; padding: 18px 16px;
  border-right: 2px dashed rgba(0,0,0,0.16);
  min-width: 0;
}
.ticket-stub {
  width: 77px; flex-shrink: 0;
  padding: 16px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}

/* stamp — oval like rubber stamp */
@keyframes stampHit {
  0%   { opacity:0; transform:scale(2.5) rotate(-18deg); }
  50%  { opacity:1; transform:scale(0.9) rotate(6deg);  }
  75%  { transform:scale(1.06) rotate(-2deg); }
  100% { opacity:1; transform:scale(1) rotate(-8deg); }
}
.stamp-ring {
  width: 120px; height: 78px; border-radius: 50%;
  border: 3px solid rgba(30,58,95,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: border-color 0.2s, transform 0.3s;
  flex-shrink: 0;
  position: relative;
}
.stamp-ring::before {
  content:''; position:absolute; inset:5px;
  border-radius: 50%; border: 1.5px solid rgba(30,58,95,0.1);
}
.stamp-ring:hover:not(.stamped) { border-color: rgba(30,58,95,0.4); }
.stamp-inner {
  font-family: 'cooper-black-std', serif; font-size: 18px;
  letter-spacing: 0.1em; color: rgba(30,58,95,0.28);
  text-align: center; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center;
  transition: color 0.3s;
}
.stamp-inner small {
  font-family: 'Space Mono', monospace; font-size: 7px;
  letter-spacing: 0.15em; text-transform: uppercase; display: block;
}
.stamp-ring.stamped {
  transform: rotate(-8deg);
  border-color: #8B1A1A !important;
  background: rgba(139,26,26,0.08) !important;
}
.stamp-ring.stamped::before {
  border-color: rgba(139,26,26,0.25) !important;
}
.stamp-ring.stamped .stamp-inner {
  animation: stampHit 0.42s ease forwards;
  color: #8B1A1A !important; font-weight: 700;
}

/* ══════════════════════════════════
   03 MUSICAL
══════════════════════════════════ */
.s03 {
  background: #D5E8F8;
  padding: 52px 20px 120px;
  position: relative; overflow: hidden;
}

@keyframes camFlash {
  0%   { filter: brightness(1); }
  16%  { filter: brightness(3.8); }
  42%  { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}
.pola.flash { animation: camFlash 0.52s ease; }

/* 滑進場 — 03 MUSICAL */
.rv-left  { opacity:0; transform:translateX(-48px) rotate(-1deg) translateZ(0); -webkit-transform:translateX(-48px) rotate(-1deg) translateZ(0); transition:opacity 0.6s ease, transform 0.65s cubic-bezier(0.34,1.2,0.64,1); will-change:opacity,transform; }
.rv-left.on  { opacity:1; transform:translateZ(0); -webkit-transform:translateZ(0); }
.rv-right { opacity:0; transform:translateX(48px) rotate(1deg) translateZ(0); -webkit-transform:translateX(48px) rotate(1deg) translateZ(0); transition:opacity 0.6s ease, transform 0.65s cubic-bezier(0.34,1.2,0.64,1); will-change:opacity,transform; }
.rv-right.on { opacity:1; transform:translateZ(0); -webkit-transform:translateZ(0); }

/* 逐張出現 — photo collage (scroll reveal) */
.photo-pop { opacity:0; transform:scale(0.82) translateY(18px) translateZ(0); -webkit-transform:scale(0.82) translateY(18px) translateZ(0); transition:opacity 0.5s ease, transform 0.55s cubic-bezier(.34,1.4,.64,1); will-change:opacity,transform; }
.photo-pop.on { opacity:1; transform:translateZ(0); -webkit-transform:translateZ(0); }

/* musical photos — 初始隱藏，動畫由 JS 控制 */
.musical-pop { opacity:0; will-change:opacity,transform; }

/* stage polaroids — hidden until star tapped */
.stage-pola {
  opacity: 0; transform: translateY(18px) translateZ(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
  -webkit-transform: translateY(18px) translateZ(0);
}
.stage-pola.revealed {
  opacity: 1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* musical polaroids — hidden until camera tapped */
.musical-pola {
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.musical-pola.revealed { opacity: 1; transform: scale(1); }

/* camera flash overlay */
#camFlash {
  position: fixed; inset: 0;
  background: white; opacity: 0; pointer-events: none;
  z-index: 9998; transition: opacity 0.15s;
}

/* cover typewriter cursor */
.tw-cursor {
  display: inline-block; width: 2px; height: 0.9em;
  background: rgba(255,255,255,0.8);
  margin-left: 2px; vertical-align: middle;
  animation: blink 0.85s step-end infinite;
}

/* ══════════════════════════════════
   04 PHOTO CARD — lemon yellow
══════════════════════════════════ */
.s04 {
  background: #EDD98A;
  padding: 52px 20px 60px;
  height: 100svh;
  overflow: hidden;
}
.card-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}

/* flip card */
.flip-card {
  aspect-ratio: 2/3; cursor: pointer;
  perspective: 700px;
}
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px; overflow: hidden;
}
.flip-card-front { box-shadow: none; }
/* front = polaroid, shown first */
.flip-card-front {
  background: transparent;
}
.flip-card-front img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* back = photo, hidden first */
.flip-card-back {
  background: white;
  transform: rotateY(180deg);
  box-shadow: 3px 6px 18px rgba(0,0,0,0.28);
}
.flip-card-back .ph { width: 100%; height: 100%; }

/* ══════════════════════════════════
   05 FOOD — cream + auto-scroll + 筷子 cursor
══════════════════════════════════ */
.s05 {
  background: #F2EDD8;
  padding: 52px 20px 64px;
  min-height: 100svh;
  overflow: hidden;
}
/* 雙排橫滑正方形相冊 */
.food-gallery {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -20px; /* 撐滿 section 寬度含 padding */
  padding: 0 20px 12px;
}
.food-gallery::-webkit-scrollbar { display: none; }
.food-gallery-track {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 398px; /* 2 × 190px + 18px gap */
  gap: 9px;
  width: max-content;
}
.food-sq {
  width: 168px; height: 168px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* s05 動畫加速 */
.s05 .rv2 { transition: opacity 0.3s ease 0s,    transform 0.3s ease 0s; }
.s05 .rv4 { transition: opacity 0.3s ease 0.1s,  transform 0.3s ease 0.1s; }
.s05 .rv5 { transition: opacity 0.3s ease 0.2s,  transform 0.3s ease 0.2s; }

/* s05 筷子游標 */
.s05, .s05 * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ctext y='30' font-size='30'%3E%F0%9F%A5%A2%3C/text%3E%3C/svg%3E") 4 32, auto !important;
}
/* 判定 stamp */
.food-sq { position: relative; }
@keyframes stampIn {
  0%   { opacity:0; transform: scale(1.8); }
  60%  { opacity:1; transform: scale(0.92); }
  100% { opacity:1; transform: scale(1); }
}
.food-stamp {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: stampIn 0.3s cubic-bezier(.34,1.56,.64,1) both;
}
.food-stamp-inner {
  font-family: 'Space Mono', monospace;
  font-size: 18px; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 14px 5px;
  border-radius: 3px;
  transform: rotate(-8deg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.food-stamp.survive .food-stamp-inner {
  background: rgba(237,217,138,0.88);
  color: #1E3A5F;
}
.food-stamp.out .food-stamp-inner {
  background: rgba(30,58,95,0.88);
  color: #EDD98A;
}

/* ══════════════════════════════════
   06 HANDMADE — baby blue
══════════════════════════════════ */
.s06 {
  background: #C8DCF0;
  padding: 52px 20px 60px;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}
.s06-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.env-row {
  display:flex; flex-direction:column; align-items:center;
  padding:10px 0 16px;
}
.env-card {
  width:210px; flex-shrink:0;
  perspective:700px; cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent;
  position:relative;
}
.env-card:nth-child(1) { z-index:3; }
.env-card:nth-child(2) { z-index:2; margin-top:-28px; }
.env-card:nth-child(3) { z-index:1; margin-top:-28px; }
.env-card.flipped { z-index:10; }
.env-inner {
  width:100%; aspect-ratio:4/3;
  position:relative; transform-style:preserve-3d;
  transition:transform 0.65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.env-card.flipped .env-inner { transform:rotateY(180deg); }
.env-front, .env-back {
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 5px 16px rgba(0,0,0,0.18);
  border-radius:10px;
}
.env-back { transform:rotateY(180deg); }
.env-front img, .env-back img { width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.env-front img { image-rendering:-webkit-optimize-contrast; filter:blur(0.4px); }




/* ══════════════════════════════════
   07 MEMORY WALL — deep navy
══════════════════════════════════ */
.s07 {
  background: var(--navy);
  padding: 52px 20px 60px;
  color: var(--white);
}
.mem-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
/* card deck */
.deck-stage {
  position: relative;
  width: 290px; height: 360px;
  margin: 0 auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deck-card {
  position: absolute; top: 0; left: 0;
  width: 290px;
  background: white;
  padding: 8px 8px 30px;
  box-shadow: 1px 3px 6px rgba(0,0,0,0.12);
  will-change: transform, opacity;
  pointer-events: none;
}
.deck-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.deck-cap {
  text-align: center; padding-top: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 0.08em; color: #333;
}
.deck-hint {
  font-family: 'Space Mono', monospace;
  font-size: 8px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.28);
  text-align: center; margin-top: 6px;
}
.deck-counter {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  text-align: center; margin-top: 10px;
}

/* ══════════════════════════════════
   08 THE TRUTH IS
══════════════════════════════════ */
.s08 {
  background-color: #faf9ee;
  background-image:
    linear-gradient(90deg, transparent 50px, rgba(196,60,60,0.32) 50px, rgba(196,60,60,0.32) 52px, transparent 52px),
    repeating-linear-gradient(transparent, transparent 35px, rgba(88,136,206,0.32) 35px, rgba(88,136,206,0.32) 36px);
  padding: 52px 32px 80px;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.s08-big {
  font-family: 'NanumPen', cursive;
  font-size: 46px; font-weight: 400;
  line-height: 72px; letter-spacing: 0.02em;
  color: #1a2a4a;
  text-align: center;
  padding-left: 0;
  flex: 1; overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.s08-big em {
  font-style: normal; font-weight: 400;
  color: #b83030;
}
.s08-en {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px; letter-spacing: 0.05em;
  line-height: 1; color: var(--navy);
}

/* ══════════════════════════════════
   09 ENDING
══════════════════════════════════ */
.s09 {
  background: var(--deep);
  color: var(--white);
  min-height: 100svh;
  padding: 72px 28px 80px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  transition: background 0.9s ease;
}
.dim-star {
  position: absolute; cursor: pointer; user-select: none;
  transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.25s ease;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.dim-star:active { transform: scale(1.5) translateZ(0) !important; }

/* ══════════════════════════════════
   跑馬燈 + 過場
══════════════════════════════════ */
.ticker {
  overflow: hidden; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: 'cooper-black-std', serif;
  padding: 9px 0;
  border-top: 1px solid rgba(0,0,0,0.11);
  border-bottom: 1px solid rgba(0,0,0,0.11);
  color: rgba(0,0,0,0.36);
}
.ticker-light {
  border-top-color: rgba(255,255,255,0.1);
  border-bottom-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.26);
}
.ticker span { display: inline-block; animation: tick 22s linear infinite; will-change: transform; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 星星評分 interlude */
.interlude {
  padding: 22px 22px 0;
  background: #EDD98A;
}
.interlude-label {
  font-family: 'cooper-black-std', serif;
  font-size: 24px; letter-spacing: 0em;
  color: rgba(30,58,95,0.8); text-align: center; margin-bottom: 16px;
  min-height: 32px; line-height: 1; white-space: nowrap;
  max-width: 100%; overflow: hidden;
}
.star-row { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 18px; }
.star-tap {
  font-size: 28px; cursor: pointer;
  filter: grayscale(1) opacity(0.35);
  transition: filter 0.25s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.star-tap.lit { filter: none; }
@keyframes starWiggle {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.35) rotate(-12deg); }
  45%  { transform: scale(1.28) rotate(9deg); }
  70%  { transform: scale(1.22) rotate(-5deg); }
  100% { transform: scale(1.18) rotate(0deg); }
}
.star-tap.wiggle { animation: starWiggle 0.5s ease forwards; }

/* camera icon button */
.cam-btn {
  width: 62px; height: 62px; border-radius: 16px;
  background: var(--navy); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: transform 0.15s ease, background 0.2s;
  box-shadow: 0 4px 14px rgba(30,58,95,0.3);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.cam-btn:active { transform: scale(0.9); background: var(--slate); }
.cam-btn svg { width: 28px; height: 28px; }

/* 04 card hover */
.card-slot {
  transition: transform 0.18s ease;
  cursor: pointer;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.card-slot:active { transform: scale(0.93) rotate(-1.5deg) translateZ(0) !important; }

/* 07 mem cell hover */
.mem-cell { transition: transform 0.18s ease; will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); }
.mem-cell:active { transform: scale(0.94) translateZ(0); }
.mem-cell img { transition: transform 0.3s ease; will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); }
.mem-cell:hover img { transform: scale(1.1) translateZ(0); }

/* 06 photo hover */
.s06-ph { transition: transform 0.2s ease; cursor: pointer; will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); }
.s06-ph:active { transform: scale(0.97) translateZ(0); }

/* food strip scroll indicator */
@keyframes scrollNudge {
  0%,100% { transform: translateX(0); opacity: 1; }
  60%      { transform: translateX(-8px); opacity: 0.5; }
}

/* ══════════════════════════════════
   00 INTRO — animations
══════════════════════════════════ */
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(5deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(4deg)}  50%{transform:translateY(-16px) rotate(-4deg)} }
@keyframes particleFly {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes introHintFade { to { opacity:1; } }

.interact {
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.interact:active { transform: scale(0.93) translateZ(0) !important; }

.fstkr { user-select: none; pointer-events: auto; position: absolute; z-index: 4; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* intro folders */
.intro-folder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}
.folder-name {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--navy);
  margin-top: 5px;
  opacity: 0.65;
  letter-spacing: 0.05em;
  text-align: center;
}

/* intro badge 反轉顏色 */
.intro-badge {
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.15s ease;
}
.intro-badge.flipped {
  background: rgba(0,60,140,0.85) !important;
  color: #FBF3C0 !important;
  border-color: rgba(0,60,140,0.85) !important;
}


/* ══════════════════════════════════
   ✦ 拼貼 × 美式標語
══════════════════════════════════ */
/* 剪紙黑底貼紙文字 */
.cut {
  display: inline-block;
  vertical-align: top;
  background: #111;
  padding: 5px 14px 3px;
  line-height: 1;
}
.cut-w   { color: #fff; }
.cut-y   { color: #EDD98A; }
.cut-sky { color: #B0C8DC; }
/* 亮色底貼紙（深色 section 用） */
.cut-lem {
  display: inline-block;
  background: #EDD98A;
  color: #111;
  padding: 5px 14px 3px;
  line-height: 1;
}

/* 相機 LCD 框 */
.cam-wrap {
  position: relative;
  display: inline-block;
}
.cam-lcd {
  position: absolute;
  top: 15.7%; left: 6.8%;
  width: 57.3%; height: 71.8%;
  overflow: hidden;
  background: #111;
  border-radius: 2px;
  z-index: 1;
}
.cam-wrap img {
  width: 100%; display: block;
  position: relative; z-index: 2;
}
.cam-wrap { cursor: pointer !important; }

/* ── 掃描線疊層 ── */
.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,10,30,0.045) 3px, rgba(0,10,30,0.045) 4px
  );
  pointer-events: none;
  z-index: 20;
  animation: scanScroll 6s linear infinite, scanFlicker 9s ease-in-out infinite;
  will-change: opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
@keyframes scanScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}
@keyframes scanFlicker {
  0%,100% { opacity:1; }
  91%     { opacity:1; }
  92%     { opacity:0.82; }
  93%     { opacity:1; }
  95%     { opacity:0.9; }
  96%     { opacity:1; }
}

/* ── Badge shimmer ── */
.badge-shimmer {
  position: relative; overflow: hidden;
}
.badge-shimmer::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 50%; height: 100%;
  transform: translateX(-150%) translateZ(0);
  will-change: transform;
  background: linear-gradient(
    120deg,
    transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%
  );
  animation: shimmerRun 3.5s ease-in-out infinite;
}
@keyframes shimmerRun {
  0%        { transform: translateX(-150%); }
  40%, 100% { transform: translateX(260%); }
}