@import url("../assets/fonts/fonts.css");

/* ============================================================
   فُتات الأحد — مخبز الحيّ · النسخة العربية (RTL)
   مبني على تخطيط sundaycrumb.framer.website
   ============================================================ */

:root{
  /* الألوان — مطابقة لرموز الموقع الأصلي */
  --blue:#0944ba;
  --navy:#102a56;
  --cream:#fff9ec;
  --lime:#e5f36d;
  --sky:#d6edff;
  --sage:#dfe5d7;
  --rust:#da440d;
  --ink:#0d120b;
  --steel:#81a8d1;
  --pale:#adc3de;
  --grey:#999999;
  --w10:rgba(255,255,255,.10);
  --w07:rgba(255,255,255,.05);

  --display:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;

  --pad:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--blue);font-family:var(--body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* الأرقام والعملات باتجاه معزول */
.ltr,.price{direction:ltr;unicode-bidi:isolate}

.wrap{max-width:1265px;margin:0 auto;padding:0 var(--pad)}

/* ---------- عناوين ---------- */
.h-xl{font-family:var(--display);font-size:clamp(42px,7.6vw,97px);font-weight:800;
  line-height:1.14;letter-spacing:0;color:var(--blue)}
.h-l{font-family:var(--display);font-size:clamp(32px,5vw,64px);font-weight:800;
  line-height:1.2;letter-spacing:0;color:var(--blue)}
.h-m{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.3;
  letter-spacing:0;color:var(--navy)}
.lead{font-size:22px;line-height:1.6;color:var(--blue)}
.body{font-size:18px;line-height:1.65;color:var(--blue)}

/* ---------- أزرار ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;
  border-radius:999px;background:var(--lime);color:var(--navy);
  font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:0;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.btn:hover{transform:translateY(-3px) rotate(-1.2deg);background:var(--cream)}
.btn--cream{background:var(--cream);color:var(--blue)}
.btn--cream:hover{background:var(--lime);color:var(--navy)}
.btn--blue{background:var(--blue);color:var(--cream)}
.btn--blue:hover{background:var(--navy);color:var(--cream)}

/* ------------------------------------------------------------
   شريط التنقّل
   ------------------------------------------------------------ */
.nav{position:fixed;inset:0 0 auto 0;height:91px;z-index:70;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--pad);transition:background .4s ease,backdrop-filter .4s ease}
.nav.is-stuck{background:rgba(9,68,186,.88);backdrop-filter:blur(12px)}
.nav__logo{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;color:var(--cream);letter-spacing:0}
.nav.is-light .nav__logo,.nav.is-light .nav__links a{color:var(--blue)}
.nav__links{display:flex;gap:32px}
.nav__links a{font-size:16px;color:var(--cream);transition:opacity .3s ease}
.nav__links a:hover{opacity:.65}
.nav__burger{display:none;width:28px;height:16px;position:relative;color:var(--cream)}
.nav__burger i{position:absolute;right:0;width:100%;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.nav__burger i:nth-child(1){top:0}
.nav__burger i:nth-child(2){bottom:0}
.nav.is-light .nav__burger{color:var(--blue)}

/* ------------------------------------------------------------
   1) البطل
   ------------------------------------------------------------ */
.hero{position:relative;height:800px;min-height:100svh;overflow:hidden;background:var(--blue)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.hero__inner{position:relative;z-index:3;height:100%;max-width:1265px;margin:0 auto;padding:100px var(--pad) 56px}
.hero__title{color:var(--cream);max-width:620px}
.hero__art{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__ring{position:absolute;top:50%;right:50%;transform:translate(50%,-38%);
  width:min(760px,86vw);aspect-ratio:1.9/1;border:9px solid var(--cream);border-radius:50%;
  opacity:.95;rotate:-8deg}
.hero__pastry{position:absolute;top:219px;right:50%;transform:translateX(50%);width:380px;max-width:52vw;z-index:3}
.hero__sticker{position:absolute;z-index:4;animation:bob 5s ease-in-out infinite}
.hero__sticker--a{top:464px;right:112px;width:165px}
.hero__sticker--b{top:217px;left:94px;width:173px;animation-delay:-2.4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
.hero__foot{position:absolute;inset:auto 0 0 0;z-index:4;max-width:1265px;margin:0 auto;
  padding:0 var(--pad) 56px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.hero__foot p{font-size:18px;line-height:1.5;color:var(--cream);max-width:401px;text-align:start}

/* شارة نادي الفُتات — بديل عربي للملصق الإنجليزي */
.badge{display:grid;place-items:center;width:173px;height:139px}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge span{position:relative;font-family:var(--display);font-size:25px;font-weight:800;
  line-height:1.05;color:var(--blue);text-align:center;letter-spacing:0}

/* ------------------------------------------------------------
   2) عن المخبز
   ------------------------------------------------------------ */
.about{background:var(--cream);padding:150px 0 90px}
.about__grid{display:grid;grid-template-columns:548px minmax(0,1fr);gap:0 113px;margin-top:66px;align-items:start}
.about__img{width:100%;border-radius:18px;object-fit:cover}
.about__side{position:relative;padding-top:6px}
.about__sticker{width:132px;margin-bottom:32px;animation:bob 6s ease-in-out infinite}
.about__side p+p{margin-top:24px}
.about__side .btn{margin-top:44px}

/* ------------------------------------------------------------
   3) الأكثر طلبًا
   ------------------------------------------------------------ */
.best{background:var(--cream);padding:90px 0 110px;overflow:hidden}
.best__head{display:grid;grid-template-columns:minmax(0,1fr) 397px;gap:40px;align-items:end}
.best__rail{margin-top:118px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.best__track{display:flex;gap:24px;width:max-content;animation:marq 44s linear infinite}
.best__rail:hover .best__track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}}
.cake{width:382px;flex:none}
.cake__frame{position:relative;height:280px;border-radius:16px;overflow:hidden;background:var(--blue)}
.cake__frame>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cake__shot{position:absolute;top:54px;right:50%;transform:translateX(50%);width:250px;
  transition:transform .6s var(--ease)}
.cake:hover .cake__shot{transform:translateX(50%) scale(1.07) rotate(-2deg)}
.cake .price{display:block;font-family:var(--display);font-size:18px;font-weight:700;
  color:var(--navy);margin-top:22px}
.cake h3{margin-top:16px}
.cake p{font-size:18px;line-height:1.55;color:var(--blue);margin-top:10px;opacity:.85}
.best__cta{display:flex;justify-content:center;margin-top:70px}

/* ------------------------------------------------------------
   4) كيف تطلب
   ------------------------------------------------------------ */
.order{background:var(--blue);padding:150px 0 120px}
.order .h-xl,.order .lead{color:var(--cream)}
.order__head{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:40px;align-items:end}
.order__cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:98px}
.ocard{background:var(--cream);border-radius:22px;padding:28px;display:grid;gap:22px}
.ocard img{width:100%;height:288px;object-fit:cover;border-radius:14px}
.ocard p{font-size:18px;line-height:1.6;color:var(--blue)}
.ocard .btn{justify-self:start}

/* ------------------------------------------------------------
   5) تفضّلوا بالزيارة
   ------------------------------------------------------------ */
.visit{background:var(--cream);padding:150px 0 110px}
.visit__grid{display:grid;grid-template-columns:542px minmax(0,1fr);gap:0 80px;margin-top:66px;align-items:start}
.visit__img{width:100%;height:540px;object-fit:cover;border-radius:20px}
.visit__side .body{margin-top:26px;max-width:451px}
.hours{margin-top:30px;display:grid;gap:12px;max-width:451px}
.hours div{display:grid;grid-template-columns:214px 1fr;gap:24px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px dashed rgba(9,68,186,.25)}
.hours span{font-size:18px;color:var(--blue)}
.hours b{font-family:var(--display);font-size:28px;font-weight:700;color:var(--blue)}
.visit__side .btn{margin-top:40px}

/* ------------------------------------------------------------
   6) شريط الملصقات
   ------------------------------------------------------------ */
.ticker{background:var(--cream);padding:46px 0;overflow:hidden}
.ticker__track{display:flex;align-items:center;gap:60px;width:max-content;animation:marq 30s linear infinite}
.ticker__track img{height:140px;width:auto;object-fit:contain}

/* ------------------------------------------------------------
   7) الأسئلة الشائعة
   ------------------------------------------------------------ */
.faq{background:var(--cream);padding:40px 0 120px}
.faq__grid{display:grid;grid-template-columns:488px minmax(0,1fr);gap:0 72px;align-items:start}
.faq__aside .btn{margin-top:40px}
.faq__item{border-bottom:2px solid rgba(9,68,186,.18)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;text-align:start;font-family:var(--display);font-size:28px;font-weight:700;
  color:var(--blue);letter-spacing:0}
.faq__q i{flex:none;width:30px;height:30px;position:relative;font-style:normal}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;inset:50% 0 auto 0;height:3px;
  border-radius:2px;background:var(--blue);transition:transform .4s var(--ease)}
.faq__q i::after{transform:rotate(90deg)}
.faq__item.is-open .faq__q i::after{transform:rotate(0)}
.faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.faq__a p{font-size:18px;line-height:1.7;color:var(--blue);opacity:.85;padding-bottom:26px;max-width:560px}

/* ------------------------------------------------------------
   8) تابِع الفُتات — مكدّس بطاقات
   ------------------------------------------------------------ */
.crumbs{background:var(--cream);padding:40px 0 130px}
.crumbs__stage{position:relative;height:560px;margin-top:70px;display:grid;place-items:center}
.crumbs__card{position:absolute;width:420px;max-width:72vw;aspect-ratio:1/1;border-radius:22px;
  overflow:hidden;box-shadow:0 18px 40px rgba(9,68,186,.18);
  transition:transform .7s var(--ease),opacity .5s ease;cursor:pointer;background:var(--sky)}
.crumbs__card img{width:100%;height:100%;object-fit:cover}
.crumbs__cta{display:flex;justify-content:center;margin-top:56px}

/* ------------------------------------------------------------
   التذييل
   ------------------------------------------------------------ */
.footer{background:var(--blue);color:var(--cream);padding:64px 0 48px}
.footer__grid{display:grid;grid-template-columns:200px 220px 220px minmax(0,1fr);gap:40px}
.footer h4{font-family:var(--display);font-size:28px;font-weight:700;color:var(--cream);margin-bottom:14px}
.footer li+li{margin-top:9px}
.footer a,.footer li,.footer p{font-size:18px;line-height:1.5;color:var(--cream)}
.footer a{transition:opacity .3s ease}
.footer a:hover{opacity:.7}
.footer__news{display:flex;gap:10px;margin-top:18px;max-width:390px}
.footer__news input{flex:1;height:48px;border:0;border-radius:999px;padding:0 20px;
  font-family:inherit;font-size:16px;color:var(--navy);background:var(--cream)}
.footer__news input::placeholder{color:var(--grey)}
.footer__news button{height:48px;padding:0 22px;border-radius:999px;background:var(--lime);
  color:var(--blue);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em}
.footer__stickers{display:flex;gap:40px;justify-content:center;margin-top:70px;flex-wrap:wrap}
.footer__stickers img{height:110px;width:auto;object-fit:contain}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--w10);font-size:16px;opacity:.8}

/* ------------------------------------------------------------
   الكشف عند التمرير
   ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.word{display:inline-block;opacity:.001;transform:translateY(18px) rotate(3deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.word.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv,.word{opacity:1!important;transform:none!important;transition:none}
  .best__track,.ticker__track,.hero__sticker,.about__sticker{animation:none}
}

/* ------------------------------------------------------------
   استجابة الشاشات
   ------------------------------------------------------------ */
@media (max-width:1100px){
  :root{--pad:40px}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .best__head,.order__head{grid-template-columns:1fr;align-items:start;gap:20px}
  .order__cards{grid-template-columns:1fr}
  .visit__grid{grid-template-columns:1fr;gap:40px}
  .visit__img{height:380px}
  .faq__grid{grid-template-columns:1fr;gap:30px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .hero__sticker--a{right:24px}
  .hero__sticker--b{left:24px}
}
@media (max-width:760px){
  :root{--pad:20px}
  .nav{height:72px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav.is-open .nav__links{display:flex;position:fixed;inset:72px 0 auto 0;flex-direction:column;
    gap:0;background:var(--blue);padding:10px 0}
  .nav.is-open .nav__links a{padding:14px var(--pad);font-size:17px;color:var(--cream)}
  .hero{height:auto;min-height:100svh}
  .hero__inner{padding:96px var(--pad) 0;min-height:0}
  .hero__ring{width:124vw;border-width:6px;transform:translate(50%,-14%) rotate(-8deg)}
  .hero__pastry{top:auto;bottom:16%;width:62vw}
  .hero__sticker{width:92px!important}
  .hero__sticker--a{top:auto;bottom:8%;right:10px}
  .hero__sticker--b{top:168px;left:10px;height:auto}
  .hero__foot{position:relative;z-index:4;padding:30px var(--pad) 44px;
    flex-direction:column;align-items:flex-start;gap:20px}
  .hero__foot p{max-width:none}
  .about,.order,.visit{padding-top:96px}
  .about__grid,.visit__grid{margin-top:34px}
  .lead{font-size:18px}
  .hours div{grid-template-columns:1fr;gap:2px}
  .hours b{font-size:22px}
  .best__rail{margin-top:56px}
  .cake{width:76vw}
  .order__cards{margin-top:48px}
  .ocard img{height:210px}
  .ticker__track img{height:92px}
  .ticker__track{gap:32px}
  .faq__q{font-size:21px}
  .crumbs__stage{height:380px;margin-top:40px}
  .footer__grid{grid-template-columns:1fr}
  .footer__stickers{gap:22px;margin-top:44px}
  .footer__stickers img{height:72px}
}