/* ═══════════════════════════════════════════════════
   MOBILE SAND LAYOUT DESIGN (Desert Horizon)
═══════════════════════════════════════════════════ */

:root {
  --sand-1: oklch(0.88 0.008 55);
  --sand-2: oklch(0.80 0.010 55);
  --sand-3: oklch(0.72 0.012 55);
  --sand-4: oklch(0.64 0.014 55);
  --sand-5: oklch(0.56 0.015 55);
  --sand-fill-top:    oklch(0.95 0.004 55);
  --sand-fill-mid:    oklch(0.90 0.006 55);
  --sand-fill-bottom: oklch(0.85 0.008 55);
  --sand-fill-bottom-45: oklch(0.85 0.008 55 / 0.45);
  --sand-fill-bottom-85: oklch(0.85 0.008 55 / 0.85);
  --sand-shadow:         oklch(0.70 0.006 55 / 0.25);
  --warm-soft:           oklch(0.55 0.16 55 / 0.12);
}

[data-theme="dark"] {
  --sand-1: oklch(0.22 0.006 55);
  --sand-2: oklch(0.28 0.008 55);
  --sand-3: oklch(0.34 0.010 55);
  --sand-4: oklch(0.40 0.012 55);
  --sand-5: oklch(0.48 0.014 55);
  --sand-fill-top:    oklch(0.13 0.005 55);
  --sand-fill-mid:    oklch(0.16 0.006 55);
  --sand-fill-bottom: oklch(0.20 0.007 55);
  --sand-fill-bottom-45: oklch(0.20 0.007 55 / 0.45);
  --sand-fill-bottom-85: oklch(0.20 0.007 55 / 0.85);
  --sand-shadow:         oklch(0.10 0.004 55 / 0.40);
  --warm-soft:           oklch(0.72 0.14 55 / 0.14);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE SHOW/HIDE RULES
═══════════════════════════════════════════════════ */
.about-v2__mobile-sand,
.values-grid__mobile-sand {
  display: none !important;
}

@media (max-width: 768px) {
  .about-v2,
  .values-grid {
    padding: 0 !important;
    background: transparent !important;
  }
  
  .about-v2::before,
  .about-v2::after,
  .sand-bg--about,
  .values-grid::before,
  .values-grid::after {
    display: none !important;
  }

  .about-v2__desktop,
  .values-grid__desktop {
    display: none !important;
  }
  .about-v2__mobile-sand,
  .values-grid__mobile-sand {
    display: block !important;
    width: 100%;
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes dune-breathe-1 {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-2px) scaleY(1.015); }
}
@keyframes dune-breathe-2 {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(1.5px) scaleX(1.008); }
}
@keyframes dune-breathe-3 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
@keyframes dune-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

.anim-1, .anim-2, .anim-3, .anim-drift {
  will-change: transform;
  transform: translateZ(0);
}

.anim-1 { transform-origin: center bottom; }
.anim-2 { transform-origin: center bottom; }
.anim-3 { transform-origin: center bottom; }
.anim-drift { }

/* ═══════════════════════════════════════════════════
   GRAIN OVERLAY
═══════════════════════════════════════════════════ */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
[data-theme="dark"] .grain {
  opacity: 0.30;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════
   STRUCTURE & DESIGN 1 BLENDING ELEMENTS
═══════════════════════════════════════════════════ */
.sec-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--warm, #ff8c00); opacity: 0.65;
}
.sec-icon svg { width: 100%; height: 100%; }

.sec-title {
  font-size: 1.3rem;
  font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em;
}

.sec-body {
  padding: 1.25rem;
}

.d1-card-bg {
  position: relative;
  z-index: 15;
  margin-top: -3px; /* slight overlap to eliminate subpixel gaps and seams */
  background-color: oklch(0.99 0.002 55);
  background-image: 
    /* Melting transition from dune wave to card body — extended to 65px for eye-friendly harmony */
    linear-gradient(to bottom, var(--sand-fill-bottom) 0px, transparent 65px),
    /* Silk Sheen lines */
    linear-gradient(90deg, 
      transparent 0%, rgba(255,255,255,0.45) 15%, 
      transparent 30%, transparent 55%, 
      rgba(255,255,255,0.35) 70%, transparent 85%, 
      transparent 100%),
    /* Mesh radial glow gradients with subtle peach/sand tints */
    radial-gradient(ellipse at 80% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 60%), 
    radial-gradient(ellipse at 20% 40%, oklch(0.97 0.007 70) 0%, transparent 50%), 
    radial-gradient(ellipse at 85% 70%, oklch(0.95 0.010 75) 0%, transparent 55%), 
    radial-gradient(ellipse at 15% 90%, oklch(0.97 0.004 55) 0%, transparent 50%), 
    linear-gradient(135deg, oklch(0.99 0.002 55) 0%, oklch(0.94 0.005 55) 100%);
  transition: background 0.8s ease, border-color 0.4s ease;
}

[data-theme="dark"] .d1-card-bg {
  background-color: oklch(0.13 0.005 55);
  background-image: 
    /* Melting transition from dune wave to card body in Dark mode */
    linear-gradient(to bottom, var(--sand-fill-bottom) 0px, transparent 65px),
    /* Subtle Silk Sheen lines for Dark mode */
    linear-gradient(90deg, 
      transparent 0%, rgba(255,255,255,0.04) 15%, 
      transparent 30%, transparent 55%, 
      rgba(255,255,255,0.03) 70%, transparent 85%, 
      transparent 100%),
    /* Mesh radial glow gradients for Dark mode with warm bronze hints */
    radial-gradient(ellipse at 80% 25%, rgba(40, 38, 35, 0.6) 0%, transparent 60%), 
    radial-gradient(ellipse at 20% 40%, rgba(30, 28, 25, 0.4) 0%, transparent 50%), 
    radial-gradient(ellipse at 85% 70%, rgba(38, 35, 30, 0.5) 0%, transparent 55%), 
    radial-gradient(ellipse at 15% 90%, rgba(28, 26, 24, 0.3) 0%, transparent 50%), 
    linear-gradient(135deg, oklch(0.14 0.005 55) 0%, oklch(0.11 0.004 55) 100%);
}

.sec-body p {
  font-size: 0.92rem; line-height: 1.85;
  color: var(--text-muted, #555); margin-bottom: 0.75rem;
  text-align: right;
}
[data-theme="dark"] .sec-body p {
  color: var(--text-muted, #aaa);
}

.info-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
[data-theme="dark"] .info-row {
  border-bottom-color: var(--border, rgba(255,255,255,0.05));
}
.info-row:last-child { border-bottom: none; }

.info-row__icon {
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--warm, #ff8c00); opacity: 0.5;
}
.info-row__icon svg { width: 100%; height: 100%; }

.info-row__text {
  font-size: 0.78rem; font-weight: 500;
  text-align: right;
}
.info-row__text strong {
  display: block; font-weight: 700;
  font-size: 0.82rem; margin-bottom: 0.1rem;
}
.info-row__text span {
  color: var(--text-muted, #555); font-size: 0.72rem;
}
[data-theme="dark"] .info-row__text span {
  color: var(--text-muted, #aaa);
}

.d1-banner {
  position: relative;
  width: 100%;
  min-height: 160px;
  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-alt) 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
[data-theme="dark"] .d1-banner {
  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-alt) 100%);
}

.d1-banner__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.d1-banner__haze {
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, var(--surface), transparent);
  z-index: 2;
  pointer-events: none;
}
[data-theme="dark"] .d1-banner__haze {
  background: linear-gradient(to bottom, var(--surface), transparent);
}

.d1-banner__light {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 15% 60%,
    rgba(255, 140, 0, 0.12) 0%,
    transparent 70%
  );
  z-index: 3;
  pointer-events: none;
}

.d1-banner__bottom-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35px;
  background: linear-gradient(to bottom, transparent 0%, var(--sand-fill-bottom) 100%);
  z-index: 9;
  pointer-events: none;
  transition: background 0.8s ease;
}

.d1-banner__content {
  position: relative; z-index: 10;
  padding: 1.5rem 1.25rem 2rem;
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%;
  color: var(--text, #1a1a1a);
}
[data-theme="dark"] .d1-banner__content {
  color: var(--text, #ffffff);
}

/* Najm Glow - Orange accents */
#d1-mobile .info-row__icon,
#d1-values-mobile .info-row__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff8c00 !important;
  filter: drop-shadow(0 0 14px rgba(255, 140, 0, 0.75));
  opacity: 1 !important;
  padding: 0 !important;
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

#d1-mobile .info-row__icon svg,
#d1-values-mobile .info-row__icon svg {
  width: 100%;
  height: 100%;
}

#d1-mobile .info-row,
#d1-values-mobile .info-row {
  transition: background-color 0.3s ease;
}
#d1-mobile .info-row.is-active .info-row__icon,
#d1-values-mobile .info-row.is-active .info-row__icon {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 0 16px rgba(255, 140, 0, 0.9));
  will-change: filter, transform;
}