/* ==========================================================================
   3D qatlam — chuqurlik, qiyalik va suzuvchi obyektlar.
   styles.css dan keyin ulanadi; bu faylni olib tashlasangiz sahifa
   avvalgi yassi holatiga qaytadi. Harakat faqat sichqonchali qurilmada
   va "reduce motion" o'chiq bo'lsa ishlaydi (3d.js).
   ========================================================================== */

@property --rx { syntax: "<angle>"; inherits: true; initial-value: 7deg; }
@property --ry { syntax: "<angle>"; inherits: true; initial-value: -15deg; }

:root {
  --edge: #d3dcd7;
  --edge-strong: #bccac3;
  --lift: 0 22px 38px -14px rgba(13, 20, 27, 0.22);
  --lift-hover: 0 38px 60px -18px rgba(13, 20, 27, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge: #080d12;
    --edge-strong: #05090d;
    --lift: 0 22px 38px -14px rgba(0, 0, 0, 0.6);
    --lift-hover: 0 38px 60px -18px rgba(0, 0, 0, 0.75);
  }
}
:root[data-theme="dark"] {
  --edge: #080d12;
  --edge-strong: #05090d;
  --lift: 0 22px 38px -14px rgba(0, 0, 0, 0.6);
  --lift-hover: 0 38px 60px -18px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------- hero sahnasi ---- */

.hero { position: relative; }

.hero::before {
  content: "";
  position: absolute;
  inset: -80px 0 0;
  z-index: -1;
  background:
    radial-gradient(520px 420px at 78% 38%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    radial-gradient(420px 360px at 12% 8%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.hero h1 span {
  background: linear-gradient(180deg, #33cf84, var(--brand-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--brand-darker) 28%, transparent));
}

.hero-visual {
  perspective: 1300px;
  perspective-origin: 50% 42%;
  --mx: 0;
  --my: 0;
}

.hero-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 300px;
  height: 46px;
  transform: translateX(-42%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 14, 11, 0.34), transparent);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

.glow {
  width: 460px;
  height: 460px;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -14px), 0);
}

/* Telefon fazoda burilgan; o'ng-pastki qirralar "qalinlik" beradi. */
.phone {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1.5deg);
  transform-style: preserve-3d;
  animation: phone-sway 9s ease-in-out infinite;
  box-shadow:
    1px 1px 0 #2b3740,
    2px 2px 0 #26313a,
    3px 3px 0 #212b33,
    4px 4px 0 #1c252c,
    5px 5px 0 #182026,
    6px 6px 0 #141b21,
    7px 7px 0 #11171c,
    8px 8px 0 #0e1418,
    9px 9px 0 #0b1014,
    34px 46px 70px -10px rgba(8, 14, 11, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.hero-visual.is-live .phone {
  animation: none;
  transition: transform 0.22s ease-out;
}

/* Ekrandagi shisha yaltirashi */
.phone::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 36px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 44%);
  pointer-events: none;
  z-index: 5;
}

@keyframes phone-sway {
  0%, 100% { --rx: 7deg; --ry: -15deg; }
  50% { --rx: 4deg; --ry: -9deg; }
}

.chip {
  box-shadow: 0 4px 0 var(--edge), var(--lift);
  z-index: 4;
}
.chip-rating,
.chip-fav { animation: none; }
.chip-rating { translate: calc(var(--mx) * 26px) calc(var(--my) * 26px); }
.chip-fav { translate: calc(var(--mx) * 34px) calc(var(--my) * 34px); }
.chip > * { animation: float 6s ease-in-out infinite; }
.chip-fav > * { animation-delay: 1.6s; }

/* Suzuvchi 3D masalliqlar (3d.js qo'shadi) */
.float3d {
  position: absolute;
  z-index: 3;
  width: var(--s, 96px);
  pointer-events: none;
  translate: calc(var(--mx) * var(--d, 20) * 1px) calc(var(--my) * var(--d, 20) * 1px);
  transition: translate 0.25s ease-out;
}
.float3d img {
  width: 100%;
  height: auto;
  rotate: var(--r, 0deg);
  filter: drop-shadow(0 16px 14px rgba(8, 14, 11, 0.26));
  animation: bob var(--t, 7s) ease-in-out var(--dl, 0s) infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}

.f-tomato   { --s: 104px; --d: 34; --r: -10deg; top: 34px; left: 5%; }
.f-basil    { --s: 92px;  --d: -16; --r: 14deg; --t: 8s; --dl: 0.8s; top: 0; right: 8%; }
.f-avocado  { --s: 108px; --d: 48; --r: 12deg; --t: 7.5s; --dl: 0.4s; top: 262px; right: -1%; }
.f-chili    { --s: 96px;  --d: 40; --r: -6deg; --t: 6.5s; --dl: 1.2s; bottom: 26px; left: 3%; }
.f-lemon    { --s: 74px;  --d: -22; --r: 8deg; --t: 9s; --dl: 0.2s; bottom: 196px; left: 15%; }
.f-mushroom { --s: 70px;  --d: -12; --r: -8deg; --t: 8.5s; --dl: 1.6s; bottom: 8px; right: 17%; }

/* -------------------------------------------------- qalin kartochkalar --- */

.stats-grid,
.feature-card,
.recipe-card,
.step-card,
.faq details {
  box-shadow: 0 6px 0 var(--edge), var(--lift);
}

.tilt {
  position: relative;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.18s ease, opacity 0.55s ease;
  will-change: transform;
}
.tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-6px) !important;
  transform-style: preserve-3d;
}
.tilt:hover {
  box-shadow: 0 10px 0 var(--edge-strong), var(--lift-hover);
}

/* Sichqonchani kuzatuvchi yorug'lik dog'i */
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.2), transparent 62%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.tilt:hover::after { opacity: 1; }

.feature-card.tilt.is-tilting > .feature-icon { transform: translateZ(46px); }
.feature-card.tilt.is-tilting > h3 { transform: translateZ(26px); }
.feature-card.tilt.is-tilting > p,
.feature-card.tilt.is-tilting > .pay-pills { transform: translateZ(14px); }
.step-card.tilt.is-tilting > .step-number { transform: translateZ(40px); }
.step-card.tilt.is-tilting > h3 { transform: translateZ(24px); }

/* Bo'limlar pastdan "ko'tarilib" ochiladi */
.js-reveal .reveal {
  transform: perspective(900px) translateY(30px) rotateX(-12deg);
  transform-origin: 50% 100%;
}
.js-reveal .reveal.visible { transform: none; }

/* -------------------------------------------------------- 3D ikonkalar --- */

.i-green { --c: var(--brand); }
.i-blue  { --c: var(--blue); }
.i-red   { --c: var(--red); }
.i-amber { --c: var(--amber); }
.i-teal  { --c: var(--teal); }
.i-navy  { --c: var(--navy); }

.feature-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 52%),
    var(--c, var(--brand));
  box-shadow:
    0 5px 0 color-mix(in srgb, var(--c, var(--brand)) 66%, #000),
    0 16px 20px -8px color-mix(in srgb, var(--c, var(--brand)) 60%, transparent),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  rotate: -5deg;
  margin-bottom: 22px;
}
.feature-icon svg { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18)); }

/* Gemini'da chizilgan 3D obyekt bilan almashtirilganda */
.feature-icon.has-3d {
  width: 96px;
  height: 96px;
  padding: 0;
  margin: -50px 0 6px -8px;
  background: none;
  box-shadow: none;
  rotate: none;
}
.feature-icon.has-3d svg { display: none; }
.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(8, 14, 11, 0.24));
  transition: transform 0.25s ease;
}
.feature-card:hover .feature-icon img { transform: scale(1.1) rotate(-6deg); }
.feature-grid.has-3d,
.duo-grid.has-3d { row-gap: 60px; margin-top: 34px; }

/* ------------------------------------------------------------- stats ---- */

.stats-grid strong {
  color: #2fc77b;
  font-size: clamp(26px, 3.4vw, 36px);
  text-shadow:
    0 1px 0 var(--brand-dark),
    0 2px 0 var(--brand-dark),
    0 3px 0 var(--brand-darker),
    0 4px 0 var(--brand-darker),
    0 10px 14px rgba(17, 92, 57, 0.35);
}

/* ----------------------------------------------------------- recipes ---- */

.recipe-card img { transition: transform 0.35s ease; }
.recipe-card:hover img { transform: scale(1.07); }
.recipe-card { overflow: hidden; }
.recipe-more { box-shadow: 0 6px 0 var(--brand-darker), var(--lift); }
.recipe-more:hover { box-shadow: 0 10px 0 var(--brand-darker), var(--lift-hover); }

/* ------------------------------------------------------------- steps ---- */

.step-number {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(155deg, #3bd68c, var(--brand));
  color: #fff !important;
  font-size: 19px;
  box-shadow: 0 5px 0 var(--brand-darker), 0 14px 18px -8px rgba(33, 156, 98, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  rotate: -5deg;
}

.mini-pill { box-shadow: 0 3px 0 var(--edge); }
.id-badge { box-shadow: 0 3px 0 var(--brand-darker); }

/* --------------------------------------------------------------- cta ---- */

.cta-band {
  box-shadow: 0 10px 0 #0b3f27, 0 40px 60px -24px rgba(17, 92, 57, 0.6);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(135deg, #27b872, var(--brand-darker));
}
.cta-band h2 { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16); }
.cta-band .float3d { z-index: 0; }
.c-dice  { --s: 120px; --d: 18; --r: -10deg; left: 3%; bottom: 14px; }
.c-flame { --s: 110px; --d: 24; --r: 8deg; --dl: 0.9s; right: 4%; top: 10px; }
.c-book  { --s: 96px; --d: 30; --r: 12deg; --dl: 0.5s; --t: 8s; right: 16%; bottom: 8px; }
.c-pig   { --s: 92px; --d: 30; --r: -8deg; --dl: 1.4s; --t: 8s; left: 17%; top: 8px; }

.brand-mark { box-shadow: 0 3px 0 var(--brand-darker), var(--shadow-sm); }

/* ---------------------------------------------------------- app tour ---- */

.tour-section { background: var(--bg-alt); overflow-x: clip; }

.tour {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

/* Matn tomoni: sarlavha + tavsif tepada, tablar pastda */
.tour-copy { order: 1; min-width: 0; }
.tour-stage { order: 2; }

.tour-panels { min-height: 150px; margin-bottom: 26px; }
.tour-panel h3 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; margin-bottom: 12px; }
.tour-panel p { font-size: 17px; color: var(--text-muted); max-width: 520px; }

/* JS ishlasa faqat faol panel ko'rinadi; ishlamasa — hammasi ro'yxat */
.js-tour .tour-panel { display: none; }
.js-tour .tour-panel.is-active { display: block; animation: tour-in 0.45s ease both; }
.tour-panel + .tour-panel { margin-top: 18px; }
.js-tour .tour-panel + .tour-panel { margin-top: 0; }

@keyframes tour-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.tour-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tour-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.15s ease, background 0.15s ease;
}
.tour-tab img { width: 38px; height: 38px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(8, 14, 11, 0.25)); }
.tour-tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); }
.tour-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.tour-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 0 var(--brand-darker), 0 14px 22px -10px rgba(33, 156, 98, 0.6);
}

/* Sahna: burilgan telefon + 3D belgi */
.tour-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 640px;
  perspective: 1400px;
}
.tour-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 68%);
  filter: blur(18px);
}
.tour-phone {
  position: relative;
  width: 300px;
  padding: 10px;
  border-radius: 44px;
  background: linear-gradient(170deg, #26313a, #10181f);
  transform: rotateY(-13deg) rotateX(4deg) rotateZ(1deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow:
    1px 1px 0 #2b3740, 2px 2px 0 #26313a, 3px 3px 0 #212b33, 4px 4px 0 #1c252c,
    5px 5px 0 #182026, 6px 6px 0 #141b21, 7px 7px 0 #11171c, 8px 8px 0 #0e1418,
    30px 44px 70px -10px rgba(8, 14, 11, 0.5);
}
.tour:hover .tour-phone { transform: rotateY(-5deg) rotateX(2deg) rotateZ(0.5deg); }
.tour-screen {
  position: relative;
  aspect-ratio: 432 / 868;
  border-radius: 34px;
  overflow: hidden;
  background: #f7f9f8;
}
.tour-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.tour-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04) translateX(14px);
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.js-tour .tour-shot.is-active { opacity: 1; transform: none; }
.tour-shot:first-child { opacity: 1; transform: none; }
.js-tour .tour-shot:first-child:not(.is-active) { opacity: 0; transform: scale(1.04) translateX(14px); }

.tour-badge {
  position: absolute;
  right: 4%;
  top: 7%;
  width: 132px;
  z-index: 3;
  pointer-events: none;
  animation: bob 6.5s ease-in-out infinite;
}
.tour-badge img {
  width: 100%;
  filter: drop-shadow(0 18px 16px rgba(8, 14, 11, 0.3));
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s ease;
}
.tour-badge.swap img { transform: scale(0.5) rotate(-18deg); opacity: 0; }

@media (max-width: 1000px) {
  .tour { grid-template-columns: 1fr; gap: 26px; }
  .tour-stage { order: 1; min-height: 0; padding: 12px 0 8px; }
  .tour-copy { order: 2; text-align: center; }
  .tour-panel p { margin-inline: auto; }
  .tour-panels { min-height: 130px; margin-bottom: 18px; }
  .tour-phone { width: 250px; }
  .tour-glow { width: 360px; height: 360px; }
  .tour-badge { width: 104px; right: calc(50% - 190px); top: 2%; }
}
@media (max-width: 640px) {
  .tour-tabs {
    display: flex;
    overflow-x: auto;
    gap: 9px;
    padding: 4px 2px 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tab { flex: none; scroll-snap-align: center; white-space: nowrap; }
  .tour-badge { right: calc(50% - 158px); width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-phone, .tour-shot, .tour-badge img { transition: none; }
  .tour-badge { animation: none; }
  .js-tour .tour-panel.is-active { animation: none; }
}

/* Havolalar soni oshgani uchun menyu torroq ekranda ham bir qatorda tursin */
.nav-links a { white-space: nowrap; }
@media (max-width: 1140px) { .nav-links { gap: 20px; } }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* -------------------------------------------------------- moslashuv ---- */

/* Matn ustiga chiqmasligi uchun tor ekranda CTA obyektlari yashiriladi */
@media (max-width: 1000px) {
  .cta-band .float3d { display: none; }
}

@media (max-width: 760px) {
  .f-tomato   { --s: 78px; left: 0; top: 18px; }
  .f-basil    { --s: 70px; right: 2%; }
  .f-avocado  { --s: 80px; right: -2%; top: 300px; }
  .f-chili    { --s: 72px; left: 0; bottom: 8px; }
  .f-lemon, .f-mushroom { display: none; }
  .hero-visual::after { width: 250px; }
  .feature-grid.has-3d,
  .duo-grid.has-3d { row-gap: 46px; }
  .feature-card { padding: 22px 20px; }
  .feature-icon.has-3d { width: 76px; height: 76px; margin: -42px 0 4px -6px; }

  /* Telefonda retseptlar ikki ustunda — bitta ustunda sahifa juda uzun bo'lardi */
  .recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .recipe-body { padding: 10px 11px 12px; }
  .recipe-body h3 { font-size: 13.5px; line-height: 1.25; margin: 6px 0 2px; }
  .recipe-body p { font-size: 11.5px; }
  .recipe-body .tag { font-size: 9.5px; padding: 2px 8px; }
  .recipe-more { grid-column: 1 / -1; }
  .recipe-more .recipe-body { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; }
  .float3d img { animation: none; }
  .js-reveal .reveal { transform: none; }
}