/* ============================================================
   M&S — Speed + Video = Revenue
   Premium animated presentation — rebrandable
   ============================================================ */

/* ── BRAND TOKENS (swap these to rebrand) ─────────────────── */
:root {
  --gold:    #b8960c;
  --cream:   #f7f3ee;
  --dark:    #1a1a1a;
  --mid:     #2c2c2c;
  --danger:  #c1121f;
  --fast:    #0077b6;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', -apple-system, sans-serif;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--sans); }

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8c547);
  z-index: 1000; transition: width 0.1s linear;
}

/* ── SCENE COUNTER ────────────────────────────────────────── */
.scene-counter {
  position: fixed; top: 18px; right: 20px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  z-index: 999;
}

/* ── CONTROLS ─────────────────────────────────────────────── */
.controls {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 999;
  opacity: 0; transition: opacity 0.3s;
}
body:hover .controls { opacity: 1; }

.ctrl-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.5); color: #fff; font-size: 14px;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.ctrl-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); }

/* ── SCENES ───────────────────────────────────────────────── */
.scene {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.scene.active { opacity: 1; pointer-events: all; }

/* ── SCENE BACKGROUNDS ────────────────────────────────────── */
.scene-bg { position: absolute; inset: 0; z-index: 0; }
.bg1 { background: linear-gradient(155deg, #f0ebe4 0%, #e4ddd5 55%, #d5cdc5 100%); }
.bg2 { background: linear-gradient(155deg, #ece4dc 0%, #ddd4ca 55%, #cec5bb 100%); }
.bg3 { background: linear-gradient(155deg, #080810 0%, #12121e 55%, #1a1a2e 100%); }
.bg4 { background: linear-gradient(155deg, #f5f0eb 0%, #ede5dc 55%, #e0d8ce 100%); }
.bg5 { background: linear-gradient(155deg, #080808 0%, #101010 55%, #181818 100%); }

/* ── BROWSER WINDOW ───────────────────────────────────────── */
.browser {
  position: relative; z-index: 10;
  width: 82%; max-width: 900px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.22), 0 6px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: floatIn 0.55s cubic-bezier(0.34,1.4,0.64,1) both;
}
.browser.wide { width: 88%; }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── BROWSER BAR ──────────────────────────────────────────── */
.bbar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; background: #f0f0f0; border-bottom: 1px solid #e0e0e0;
}
.bbar.dark { background: #18182a; border-bottom: 1px solid #28284a; }

.dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dr { background: #ff5f57; } .dy { background: #febc2e; } .dg { background: #28c840; }

.burl {
  flex: 1; font-size: 11px; color: #666; background: #fff;
  border-radius: 4px; padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.burl.dark { background: #28284a; color: #9090c0; display: flex; align-items: center; gap: 8px; }

.fast-badge {
  background: var(--fast); color: #fff;
  font-size: 9px; padding: 2px 7px; border-radius: 3px;
  font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}

/* ── SITE NAV ─────────────────────────────────────────────── */
.site-nav {
  display: flex; align-items: center; gap: 22px;
  padding: 11px 20px; border-bottom: 1px solid #ece4dc; background: #fff;
}
.site-nav.slim { padding: 8px 16px; }
.site-nav.after { border-bottom: 2px solid #1a1a1a; }

.logo {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--dark); white-space: nowrap;
}

.nav-links { display: flex; gap: 18px; }
.nav-links span {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: #444; cursor: pointer;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  height: 155px; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

.hero.shimmer {
  background: linear-gradient(90deg, #e8e0d5 25%, #f0e8e0 50%, #e8e0d5 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.hero.loaded {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 26px; height: 26px;
  border: 2px solid rgba(0,0,0,0.1); border-top-color: #999;
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner { text-align: center; color: #fff; padding: 16px; }
.hero-tag {
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 5px; font-weight: 600;
}
.hero-title {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  letter-spacing: 0.05em; margin-bottom: 4px;
}
.hero-sub {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 12px;
}
.hero-cta {
  background: #fff; color: #1a1a1a; border: none;
  padding: 7px 20px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
  font-family: var(--sans);
}

/* ── PRODUCT GRID ─────────────────────────────────────────── */
.pgrid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; padding: 14px 18px; background: #faf8f5;
}
.pgrid.after { background: #fff; }
.pgrid.zoom { animation: gridZoom 3s 0.6s ease-in-out forwards; }
@keyframes gridZoom {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.07) translateY(-5px); }
}

.pcard { background: #fff; border-radius: 3px; overflow: hidden; }

/* slow reveal */
.pcard.slow {
  opacity: 0;
  animation: slowIn 0.7s var(--d, 0s) ease forwards;
}
@keyframes slowIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fast reveal */
.pcard.fast {
  opacity: 0;
  animation: fastIn 0.12s var(--d, 0s) ease forwards;
}
@keyframes fastIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pimg {
  width: 100%; height: 100px;
  background: #ede8e2;
}
.pimg.shimmer-img {
  background: linear-gradient(90deg, #ede8e2 25%, #f5f0ea 50%, #ede8e2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}
.pimg.tall { height: 110px; }

.pinfo { padding: 7px 8px; }
.pname { font-size: 10px; font-weight: 500; color: #1a1a1a; margin-bottom: 3px; letter-spacing: 0.02em; }
.pprice { font-size: 10px; color: #555; }

.sline {
  height: 7px; border-radius: 3px; margin-bottom: 4px;
  background: linear-gradient(90deg, #e0d8d0 25%, #ede8e2 50%, #e0d8d0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}
.sline.w80 { width: 80%; }
.sline.w50 { width: 50%; }

/* ── LOAD BAR ─────────────────────────────────────────────── */
.load-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: #f5f0eb; border-top: 1px solid #ece4dc;
}
.load-row.fast-row { background: #f0f8ff; border-top: 1px solid #d0e8f8; }

.load-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #999; white-space: nowrap;
}
.load-track { flex: 1; height: 4px; background: #e0d8d0; border-radius: 2px; overflow: hidden; }
.load-fill { height: 100%; border-radius: 2px; width: 0%; }

.load-fill.slow {
  background: linear-gradient(90deg, var(--danger), #e63946);
  animation: slowLoad 2.5s 0.4s ease forwards;
}
@keyframes slowLoad {
  0%  { width: 0%; } 25% { width: 18%; } 55% { width: 42%; }
  80% { width: 62%; } 100% { width: 76%; }
}

.load-fill.fast {
  background: linear-gradient(90deg, var(--fast), #00b4d8);
  animation: fastLoad 0.35s 0.15s ease forwards;
}
@keyframes fastLoad { from { width: 0%; } to { width: 100%; } }

.load-time { font-size: 10px; font-weight: 700; white-space: nowrap; }
.load-time.slow { color: var(--danger); }
.load-time.fast { color: var(--fast); }

/* ── GLITCH OVERLAY ───────────────────────────────────────── */
.glitch {
  position: absolute; inset: 0; z-index: 50;
  pointer-events: none; opacity: 0;
}
.glitch.go {
  animation: glitch 0.55s ease forwards;
}
@keyframes glitch {
  0%  { opacity: 0; background: transparent; }
  15% { opacity: 1; background: rgba(0,119,182,0.28); }
  30% { opacity: 0; background: transparent; }
  50% { opacity: 0.7; background: rgba(255,255,255,0.12); }
  65% { opacity: 0; background: transparent; }
  100%{ opacity: 0; }
}

/* ── OVERLAYS ─────────────────────────────────────────────── */
.ov-top {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.55);
  padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(8px);
  z-index: 20; opacity: 0; white-space: nowrap;
}
.ov-top.red  { background: rgba(193,18,31,0.75); }
.ov-top.blue { background: rgba(0,119,182,0.75); }

.ov-bot {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 20; opacity: 0; white-space: nowrap;
}

.pill {
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  color: #fff; background: rgba(0,0,0,0.6);
  padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
}
.pill.red  { background: rgba(193,18,31,0.7);  border-color: rgba(193,18,31,0.4); }
.pill.blue { background: rgba(0,119,182,0.7);  border-color: rgba(0,119,182,0.4); }
.pill.lg   { font-size: 13px; padding: 8px 18px; }

.ov-sub {
  position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 17px; font-weight: 400;
  font-style: italic; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65); z-index: 20; opacity: 0; white-space: nowrap;
}

/* ── PDP LAYOUT ───────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: 1fr 1fr; }

.pdp-media {
  position: relative; overflow: hidden; min-height: 300px;
  background: linear-gradient(155deg, #c9b99a 0%, #a89070 45%, #8a7060 100%);
}

/* Fabric / video simulation */
.fabric { position: absolute; inset: 0; overflow: hidden; }
.fl {
  position: absolute; width: 130%; height: 130%;
  border-radius: 45%; opacity: 0.22; mix-blend-mode: overlay;
}
.fl1 { background: linear-gradient(45deg,#e8d5b0,transparent); top:-15%;left:-15%;
        animation: fab1 3.2s ease-in-out infinite; }
.fl2 { background: linear-gradient(135deg,#c8a870,transparent); top:-8%;left:-8%;
        animation: fab2 4.1s ease-in-out infinite; }
.fl3 { background: linear-gradient(225deg,#a88050,transparent); top:0;left:0;
        animation: fab3 5s ease-in-out infinite; }

@keyframes fab1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-9%) rotate(3deg)} }
@keyframes fab2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(7%) rotate(-2deg)} }
@keyframes fab3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5%) rotate(1.5deg)} }

/* Model silhouette */
.model {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 55%; height: 85%;
  background: linear-gradient(180deg, rgba(180,150,110,0.6) 0%, rgba(140,110,80,0.8) 100%);
  border-radius: 40% 40% 0 0;
  animation: modelSway 4s ease-in-out infinite;
}
@keyframes modelSway {
  0%,100% { transform: translateX(-50%) scaleX(1); }
  50%      { transform: translateX(-50%) scaleX(1.03); }
}

.vid-badge {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.52); color: #fff;
  font-size: 10px; font-weight: 500; padding: 5px 12px;
  border-radius: 20px; backdrop-filter: blur(8px); letter-spacing: 0.05em;
  white-space: nowrap;
}
.vpulse {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4444;
  animation: vp 1s ease-in-out infinite;
}
@keyframes vp { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.thumbs {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.th {
  width: 34px; height: 26px; border-radius: 3px;
  background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.2);
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75); cursor: pointer;
}
.th.on { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.5); }
.th.vid { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.5); }

/* PDP info panel */
.pdp-info {
  padding: 22px 18px; background: #fff;
  display: flex; flex-direction: column; gap: 9px;
}
.pdp-brand-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #999;
}
.pdp-title {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  line-height: 1.3; color: #1a1a1a; letter-spacing: 0.02em;
}
.pdp-price { font-size: 18px; font-weight: 600; color: #1a1a1a; }

.swatches { display: flex; gap: 7px; }
.sw {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 1px solid #ddd;
}
.sw.on { border: 2px solid #1a1a1a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1a1a1a; }

.sizes { display: flex; gap: 5px; flex-wrap: wrap; }
.sz {
  width: 30px; height: 30px; border: 1px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; cursor: pointer; color: #444;
}
.sz.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

.add-btn {
  background: #1a1a1a; color: #fff; border: none;
  padding: 11px 18px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; font-family: var(--sans); margin-top: 4px;
}

/* ── SCENE 5: CLOSE FRAME ─────────────────────────────────── */
.close-frame {
  position: relative; z-index: 10;
  text-align: center; padding: 36px 40px;
  max-width: 680px; width: 92%;
}

.bg-glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(184,150,12,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.close-headline {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 400; color: #fff;
  letter-spacing: 0.04em; line-height: 1.2;
  margin-bottom: 28px;
  opacity: 0; transform: translateY(10px);
}

.close-divider {
  width: 48px; height: 1px; background: var(--gold);
  margin: 0 auto 28px; opacity: 0;
}

.close-stats-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 0; margin-bottom: 28px;
}

.close-stat {
  text-align: center; padding: 0 28px;
  opacity: 0; transform: translateY(10px);
}
.close-stat-sep {
  width: 1px; height: 50px; background: rgba(255,255,255,0.12);
  align-self: center;
  opacity: 0; transform: translateY(10px);
}

.cstat-num {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600; color: var(--gold);
  letter-spacing: 0.02em; line-height: 1; margin-bottom: 6px;
}
.cstat-lbl {
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.close-pills-row {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 28px;
  opacity: 0; transform: translateY(10px);
}
.cpill {
  font-size: 10px; font-weight: 500; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 14px; border-radius: 20px;
}

.close-final-line {
  font-family: var(--serif);
  font-size: clamp(15px, 2.2vw, 21px);
  font-weight: 300; font-style: italic;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.06em;
  opacity: 0; transform: translateY(10px);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .browser { width: 96%; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .pdp { grid-template-columns: 1fr; }
  .close-stats-row { gap: 0; }
  .nav-links { display: none; }
}