/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */

/* ============================================================
   Cozy Cafe — Flip Cards Demo
   Warm, light, hospitable day-cafe palette
   ============================================================ */

:root {
  --bg: #fdf6ec;        /* كريمي دافئ */
  --paper: #fff9f0;
  --ink: #2b1d14;        /* بني قهوة غامق */
  --primary: #b8752b;    /* كراميل ذهبي دافئ */
  --secondary: #6f4a2f;  /* بني قهوة */
  --accent: #a9432f;     /* أحمر طوبي دافئ */
  --line: rgba(43, 29, 20, 0.12);
  --shadow-soft: 0 22px 55px rgba(43, 29, 20, 0.16);
  --shadow-card: 0 24px 60px rgba(43, 29, 20, 0.2);
  --font-display: 'Fraunces', serif;
  --font-body: 'Montserrat', sans-serif;
  --ease-pop: cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

[lang="ar"] {
  --font-display: 'Cairo', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: 0; line-height: 1.5; }
[lang="ar"] p { line-height: 1.9; }

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

html {
  background: var(--bg);
  /* إلغاء overflow المفروض من reset.css على html (overflow-x:hidden).
     لو بقي تولّد overflow-y:auto قسرياً فتصبح html حاوية سكرول ويفشل
     position:sticky (هنا .flip-stage). نحافظ على visible مطابقة للسلوك
     الصحيح دون لمس reset.css المشترك. */
  overflow-x: visible;
  overflow-y: visible;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Lenis recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

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

/* ===== CAFE HEADER (watermark name) ===== */
.cafe-header {
  position: fixed;
  top: 72px;
  left: 26px;
  z-index: 1200;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  pointer-events: none;
}
.cafe-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  background: linear-gradient(90deg, #b8752b, #a9432f, #6f4a2f);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 10s ease infinite;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  white-space: nowrap;
}
.cafe-header.scrolled { top: auto; bottom: 22px; }
.cafe-header.scrolled .cafe-name {
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 800;
}

@keyframes gradShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(253, 246, 236, 0.5) 0%, rgba(253, 246, 236, 0.86) 100%),
    url('_assets/images/cafe.webp') center/cover no-repeat;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 18px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 78px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  max-width: 18ch;
}

/* ===== NEW IN BANNER ===== */
.newin-banner {
  margin-top: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 38px;
  border: 2px solid var(--primary);
  border-radius: 20px;
  background: var(--paper);
  transform: rotate(3deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              text-shadow 0.4s ease;
  animation: subtleGlow 3s ease-in-out infinite;
  box-shadow: 0 16px 38px rgba(184, 117, 43, 0.22);
  cursor: default;
}
.newin-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.8vw, 27px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
}
.newin-banner .flourish {
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
  display: block;
}
.newin-banner:hover {
  transform: scale(1.02) rotate(-6deg);
}

@keyframes subtleGlow {
  0%, 100% {
    border-color: var(--primary);
    box-shadow: 0 16px 38px rgba(184, 117, 43, 0.22);
    text-shadow: 0 0 0 transparent;
  }
  50% {
    border-color: var(--accent);
    box-shadow: 0 16px 46px rgba(184, 117, 43, 0.5);
    text-shadow: 0 0 20px rgba(184, 117, 43, 0.5);
  }
}

/* ===== SCROLL HINT ===== */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity 0.8s ease;
}
.scroll-hint.gone { opacity: 0; pointer-events: none; }
.mouse {
  width: 26px;
  height: 42px;
  border: 2px solid var(--secondary);
  border-radius: 14px;
  position: relative;
}
.mouse-dot {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--accent);
  animation: scrollDot 2s infinite;
}
.scroll-arrow {
  font-size: 12px;
  color: var(--accent);
  animation: bounceArrow 2s infinite;
}

@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ===== FLIP TRACK ===== */
.flip-track { position: relative; }

.flip-section { position: relative; height: 110vh; }

.flip-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* The flip card itself */
.flip-card {
  position: absolute;
  top: 50%;
  left: 15%;
  width: clamp(320px, 58vw, 760px);
  height: clamp(380px, 60vh, 600px);
  perspective: 1200px;
  transform: translateY(-50%);
  will-change: transform, opacity;
}
.flip-card.side-right { left: auto; right: 15%; }

/* Card back content (revealed after flip) */
.card-body {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(184, 117, 43, 0.22);
  box-shadow: var(--shadow-card);
}
.card-media { position: relative; overflow: hidden; }
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-info {
  padding: clamp(18px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10px;
}
.card-desc {
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--secondary);
  opacity: 0.85;
  line-height: 1.75;
}
.card-option { margin-top: auto; padding-top: 14px; }
.card-option label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.card-option select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(107, 74, 47, 0.3);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
}
.card-option select:focus { border-color: var(--primary); }
.card-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.card-price {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--primary);
}
.add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 999px;
  font: 700 13px var(--font-body);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 24px rgba(169, 67, 47, 0.35);
  white-space: nowrap;
}
.add-btn:hover { transform: translateY(-2px); }
.add-btn:active { transform: scale(0.95); }

/* Front cover that flips open (gradient, animated) */
.overlay-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 22px;
  background: linear-gradient(90deg, #e9c48f, #d99a4e, #b8752b);
  background-size: 200% 200%;
  animation: overlayShift 5s ease infinite alternate;
  backface-visibility: hidden;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-align: center;
  padding: 24px;
}
.overlay-front .ovl-mark { font-size: 26px; color: var(--accent); line-height: 1; }
.overlay-front .ovl-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  max-width: 15ch;
}
.overlay-front .ovl-price {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(43, 29, 20, 0.35);
}

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

/* ===== CART BUTTON ===== */
.cart-btn {
  position: fixed;
  top: 78px;
  right: 22px;
  z-index: 2000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(169, 67, 47, 0.4);
  transition: transform 0.25s ease;
}
.cart-btn:hover { transform: translateY(-2px); }
.cart-btn:active { transform: scale(0.95); }
.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font: 700 12px var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
}
.cart-count.bump { animation: countBump 0.4s ease; }
@keyframes countBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ===== CART DRAWER ===== */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 2900;
  background: rgba(43, 29, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 3000;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -18px 0 50px rgba(43, 29, 20, 0.25);
}
.cart-drawer.open { right: 0; }

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink); }
.cart-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--secondary);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.cart-close:hover { color: var(--accent); transform: rotate(90deg); }

.cart-items { flex: 1; overflow-y: auto; padding: 14px 22px; }
.cart-empty { color: var(--secondary); opacity: 0.7; text-align: center; padding: 48px 0; font-size: 14px; }

.cart-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(43, 29, 20, 0.16);
}
.cart-item img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.cart-item-opt { font-size: 12px; opacity: 0.6; margin-top: 2px; }
.cart-item-line { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cart-item-price { font-weight: 700; color: var(--primary); font-size: 14px; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--accent);
  font: 700 12px var(--font-body);
  cursor: pointer;
  padding: 4px;
}
.cart-item-remove:hover { text-decoration: underline; }

.cart-foot {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--ink);
}
.cart-total-val { color: var(--primary); font-size: 22px; font-family: var(--font-display); font-weight: 800; }
.cart-checkout {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 14px var(--font-body);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 24px rgba(169, 67, 47, 0.32);
}
.cart-checkout:hover { transform: translateY(-2px); }
.cart-checkout:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== MOBILE STACK (max-width 800px) ===== */
.mobile-stack { display: none; padding: 22px 16px 60px; max-width: 560px; margin: 0 auto; }

.mobile-card {
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(184, 117, 43, 0.2);
  box-shadow: 0 10px 26px rgba(43, 29, 20, 0.1);
  margin-bottom: 20px;
}
.mobile-card img { width: 100%; height: 200px; object-fit: cover; }
.mobile-card-body { padding: 16px 18px; }
.mobile-card-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.mobile-card-desc { font-size: 13px; color: var(--secondary); opacity: 0.85; line-height: 1.7; margin-bottom: 12px; }
.mobile-card .card-option { margin-top: 0; padding-top: 0; }
.mobile-card .card-buy { margin-top: 14px; }
.mobile-card .card-buy .add-btn { font-size: 12px; padding: 11px 16px; }

/* ===== FOOTER ===== */
.site-footer {
  text-align: center;
  padding: 60px 20px 44px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.footer-flourish { color: var(--primary); font-size: 26px; display: block; margin-bottom: 12px; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(90deg, #b8752b, #a9432f, #6f4a2f);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 10s ease infinite;
  display: inline-block;
}
.footer-sub { color: var(--secondary); margin-top: 10px; font-size: 14px; }
.footer-note { font-size: 12px; opacity: 0.6; margin-top: 14px; }

/* ===== MOBILE (≤800px): disable all scroll/flip animation ===== */
@media (max-width: 800px) {
  .flip-track { display: none; }
  .mobile-stack { display: block; }

  .cafe-header { top: 68px; left: 16px; }
  .cafe-header.scrolled {
    top: auto;
    bottom: 18px;
    transform: rotate(-90deg) translate(15px, -30px);
  }

  .hero { min-height: 560px; }
  .scroll-hint { bottom: 18px; }

  .cart-btn { top: 74px; right: 14px; width: 48px; height: 48px; }
}

@media (max-width: 420px) {
  .card-option select { padding: 9px 11px; }
  .mobile-card img { height: 170px; }
}

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