/* ============================================================
   Rofoof — Global Styles
   Brand palette: cream #faf8f5 · mocha #e8dccb · ink #3a2618
                  brown #5e422f · gold #cba358
   Tailwind utilities + config live in index.html; this file holds
   the @font-face, keyframes/animations, scrollbar, toast, and any
   arbitrary CSS too complex for inline Tailwind.
   ============================================================ */

/* ---------- Expo Arabic (licensed brand font) ----------
   Add the licensed font files to /assets/fonts/ and these rules
   activate Expo Arabic as the primary face. Until then the page
   falls back to Tajawal / Almarai (loaded via Google Fonts in
   index.html), then Cairo. */
@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/ExpoArabic-Book.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/ExpoArabic-Medium.ttf') format('truetype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Expo Arabic';
    src: url('../fonts/ExpoArabic-Bold.otf') format('opentype');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- custom scrollbar ---------- */
html{ scrollbar-width:thin; scrollbar-color:#cba358 #f0e9df; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#f0e9df; }
::-webkit-scrollbar-thumb{ background:#cba358; border-radius:8px; border:2px solid #f0e9df; }
::-webkit-scrollbar-thumb:hover{ background:#b58e3f; }

/* ---------- premium toast (created by main.js) ---------- */
.toast{
  position:fixed; inset-block-end:26px; inset-inline-start:26px; z-index:200;
  display:flex; align-items:center; gap:11px; max-width:90vw;
  background:#3a2618; color:#faf8f5; font-family:inherit; font-weight:700; font-size:15px;
  padding:14px 20px; border-radius:16px; border:1px solid rgba(203,163,88,.40);
  box-shadow:0 0 30px rgba(203,163,88,.35), 0 24px 50px -20px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1);
}
.toast.show{ opacity:1; transform:none; }
.toast-icon{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#cba358; color:#3a2618; font-weight:900; flex:0 0 auto;
}

/* ============================================================
   Component styles & animations (moved from inline <style>)
   ============================================================ */

  :root{ --cream:#faf8f5; --mocha:#e8dccb; --ink:#3a2618; --brown:#5e422f; --gold:#cba358; --bronze:#b59372 }
  *{ -webkit-font-smoothing:antialiased }
  html{ scroll-behavior:smooth }
  html{ overflow-x:hidden; width:100%; max-width:100% }
  body{ font-family:'Expo Arabic','Tajawal','Almarai','Cairo',sans-serif; background:#faf8f5; color:#3a2618; overflow-x:hidden; width:100%; max-width:100% }
  ::selection{ background:var(--gold); color:var(--ink) }
  :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:8px }

  /* ---------- premium motion ---------- */
  @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
  @keyframes floatSlow{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-22px) } }
  @keyframes floatTiny{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
  @keyframes glowPulse{ 0%,100%{ box-shadow:0 0 0 1px rgba(203,163,88,.45), 0 22px 60px -30px rgba(203,163,88,.45) } 50%{ box-shadow:0 0 0 1px rgba(203,163,88,.8), 0 28px 80px -26px rgba(203,163,88,.7) } }
  @keyframes dash{ to{ stroke-dashoffset:-26 } }
  @keyframes barGrow{ from{ transform:scaleY(.25) } to{ transform:scaleY(1) } }

  .animate-float{ animation:float 6s ease-in-out infinite }
  .animate-float-slow{ animation:floatSlow 7.5s ease-in-out infinite }
  .animate-float-tiny{ animation:floatTiny 5s ease-in-out infinite }
  .animate-glow{ animation:glowPulse 3.4s ease-in-out infinite }
  .dash-line{ stroke-dasharray:6 7; animation:dash 1.4s linear infinite }

  /* ---------- scroll reveal ---------- */
  .reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
  .reveal.in{ opacity:1; transform:none }
  .reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
  .reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.40s }

  /* ---------- isometric scene ---------- */
  .scene{ perspective:1700px }
  .iso{ transform:rotateX(9deg) rotateY(-13deg) rotateZ(1.2deg); transform-style:preserve-3d }
  .iso-sat{ transform:rotateX(9deg) rotateY(-13deg) }
  .bar{ transform-origin:bottom; animation:barGrow 1s cubic-bezier(.2,.8,.2,1) both }

  /* glass nav */
  .glass{ background:rgba(250,248,245,.72); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px) }

  @media (max-width:1023px){
    .iso, .iso-sat{ transform:none }
    .scene{ perspective:none }
  }
  /* ---------- comparison collapse ---------- */
  #cmpPanel{ grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1) }
  #cmpPanel.open{ grid-template-rows:1fr }
  #cmpToggle[aria-expanded="true"] .cmp-chevron{ transform:rotate(180deg) }
  .cmp-row{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease }
  .cmp-row.in{ opacity:1; transform:none }

  @media (prefers-reduced-motion:reduce){
    .animate-float,.animate-float-slow,.animate-float-tiny,.animate-glow,.dash-line,.bar{ animation:none !important }
    .reveal{ opacity:1; transform:none; transition:none }
    .iso,.iso-sat{ transform:none }
    #cmpPanel{ transition:none } .cmp-row{ opacity:1; transform:none; transition:none }
    html{ scroll-behavior:auto }
  }


input,
input:invalid,
input:required {
    box-shadow: none;
}

input:focus,
input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 2px solid #cba358;
}
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }