/* Reel cards — one idea, one tap. No autoplay. No infinite motion. */
.reel {
  --reel-ink: #f4efe6;
  --reel-mute: #b7aea2;
  --reel-line: rgba(255,255,255,0.12);
  --reel-card: #161410;
  --reel-gold: #c9a227;
  margin-top: 40px;
}
.reel-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.reel-head h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -0.03em; }
.reel-head p { color: var(--reel-mute); font-size: 0.92rem; max-width: 28rem; }
.reel-stage {
  position: relative;
  min-height: min(58vh, 520px);
  border: 1px solid var(--reel-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--reel-card);
  touch-action: pan-y;
}
.reel-card {
  display: none;
  position: absolute; inset: 0;
  padding: clamp(22px, 4vw, 40px);
  flex-direction: column;
  justify-content: flex-end;
  color: var(--reel-ink);
  text-decoration: none;
  background-size: cover;
  background-position: center;
}
.reel-card.is-on { display: flex; }
.reel-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.72) 78%);
  pointer-events: none;
}
.reel-card > * { position: relative; z-index: 1; }
.reel-card .k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--reel-gold); font-weight: 600; }
.reel-card h3 {
  margin-top: 8px;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
}
.reel-card p { margin-top: 10px; max-width: 28rem; color: var(--reel-mute); font-size: 1.02rem; line-height: 1.5; }
.reel-card .go {
  margin-top: 18px;
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 18px;
  border-radius: 4px;
  background: #f3ead8; color: #1a1612;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 4px 6px 0 rgba(0,0,0,0.35);
}
.reel-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px;
}
.reel-nav button {
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid var(--reel-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--reel-ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.reel-nav button:hover { border-color: rgba(201,162,39,0.5); }
.reel-nav button:focus-visible { outline: 2px solid var(--reel-gold); outline-offset: 2px; }
.reel-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.reel-dots button {
  width: 10px; height: 10px; min-width: 10px; min-height: 10px; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.reel-dots button[aria-current="true"] { background: var(--reel-gold); }
.reel-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

body.ht .reel-card .go { background: #e23d4f; color: #fff; box-shadow: none; }
body.bmu .reel-card .go { background: #f3ead8; color: #1a1612; }

/* Hany: architecture mass, 3D tilt only while hovering the pressable card */
.reel.hany-reel .reel-stage {
  perspective: 1100px;
  background: #12151b;
  border-color: rgba(232,224,210,0.18);
}
.reel.hany-reel .reel-card {
  transform: rotateX(6deg) rotateY(-8deg);
  transform-origin: 50% 80%;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  border-left: 3px solid #c9a66b;
}
.reel.hany-reel .reel-card:hover,
.reel.hany-reel .reel-card:focus-visible {
  transform: rotateX(0) rotateY(0) translateZ(12px);
}
.reel.hany-reel .reel-card .go {
  background: linear-gradient(180deg, #e8d7b5, #c9a66b);
  color: #14161c;
}

@media (prefers-reduced-motion: reduce) {
  .reel-card, .reel.hany-reel .reel-card, .reel.hany-reel .reel-card:hover {
    transform: none;
    transition: none;
  }
}
@media (max-width: 720px) {
  .reel-stage { min-height: min(52vh, 460px); }
}