@import "tailwindcss";

/* ===== CSS VARIABLES ===== */
@theme {
  /* Official Asli Food Brand Colors — Apr 2026 */
  --color-brand-yellow:         #F3CC23;  /* Asli Yellow    — accent, buttons (sparingly)  */
  --color-brand-blue:           #AECFE3;  /* Diete Blue     — subtle bg, secondary CTAs    */
  --color-brand-dark:           #000000;  /* Black          — text, headings, buttons       */
  --color-brand-section:        #f2d5ac;  /* Beige          — navbar scrolled, ticker       */
  --color-brand-section-accent: #000000;  /* Black          — text on section backgrounds   */
  --color-brand-terracotta:     #c49a6c;  /* Warm Tan       — hero banners, textures        */
  --color-brand-gray:           #6b6b6b;  /* Muted Gray     — secondary text, placeholders  */
  --color-brand-white:          #ffffff;
  --color-brand-off-white:      #f7ecd5;  /* Cream          — main page background          */
  --color-brand-sand:           #f7ecd5;  /* Cream          — alias                         */
  --color-brand-sand-light:     #f7ecd5;  /* Cream          — footer, panels                */
  --color-brand-peach:          #f2d5ac;  /* Beige          — cards, sections               */
}

/* ===== BASE ===== */
body {
  background: #f7ecd5;
  color: #000000;
  overflow-x: clip; /* clip ≠ hidden — doesn't create a scroll container, so position:sticky works */
}

/* ===== KEYFRAMES ===== */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-25px); }
}

@keyframes floatAlt {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(2deg); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes pulseRing {
  0%   { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.9);  opacity: 0; }
}

@keyframes scrollIndicator {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wordFlip {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroFillBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ===== VIDEO GRID ===== */

.video-grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b c" "a d d";
  gap: 5px;
  background-color: #111;
  overflow: hidden;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b" "c d";
  }
}

/* ===== ANIMATION UTILITY CLASSES ===== */

.animate-float         { animation: float        7s ease-in-out infinite; }
.animate-float-alt     { animation: floatAlt     9s ease-in-out 1s infinite; }
.animate-marquee       { animation: marquee      30s linear infinite; }
.animate-marquee-rev   { animation: marqueeReverse 30s linear infinite; }
.animate-spin-slow     { animation: spinSlow     25s linear infinite; }
.animate-pulse-once    { animation: pulseOnce    0.6s ease-out; }

@keyframes pulseOnce {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249, 204, 72, 0.6); }
  40%  { transform: scale(1.01); box-shadow: 0 0 0 8px rgba(249, 204, 72, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249, 204, 72, 0); }
}

/* ===== SCROLL REVEAL ===== */
/* Initial states kept as fallback — GSAP (section observers) own animation */

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
}


/* ===== TEXT STROKE ===== */

.text-stroke {
  -webkit-text-stroke: 3px var(--color-brand-dark);
  color: transparent;
}

.text-stroke-yellow {
  -webkit-text-stroke: 3px #FFD000;
  color: transparent;
}

.text-stroke-white {
  -webkit-text-stroke: 3px #ffffff;
  color: transparent;
}

/* ===== ARABIC (RTL) — larger base font size ===== */

[dir="rtl"] {
  font-size: 115%;
  font-family: var(--font-arabic, sans-serif) !important;
}

[dir="rtl"] * {
  font-family: var(--font-arabic, sans-serif) !important;
}

[dir="rtl"] [style*="--font-space"],
[dir="rtl"] [style*="font-space"] {
  font-family: var(--font-arabic, sans-serif) !important;
}

[dir="rtl"] * {
  letter-spacing: 0 !important; /* Arabic doesn't use letter-spacing */
}

/* Fixed-px sizes don't scale with html font-size — bump them manually */
[dir="rtl"] [class*="text-[8px]"]  { font-size: 14px; }
[dir="rtl"] [class*="text-[9px]"]  { font-size: 15px; }
[dir="rtl"] [class*="text-[10px]"] { font-size: 17px; }
[dir="rtl"] [class*="text-[11px]"] { font-size: 18px; }
[dir="rtl"] [class*="text-[13px]"] { font-size: 19px; }
[dir="rtl"] [class*="text-[14px]"] { font-size: 20px; }
[dir="rtl"] [class*="text-[15px]"] { font-size: 21px; }

/* Arabic fonts are inherently heavier — reduce all weights one step down */
[dir="rtl"] .font-black     { font-weight: 700 !important; }
[dir="rtl"] .font-extrabold { font-weight: 600 !important; }
[dir="rtl"] .font-bold      { font-weight: 500 !important; }
[dir="rtl"] .font-semibold  { font-weight: 400 !important; }

/* Flip directional icons (arrows etc.) in RTL */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
  display: inline-block;
}