/* Afghan Eats homepage motion & interaction layer — 2026-09-05
   Motion is intentionally applied around restaurant cards, never by moving the click target. */

.premium-home{
  --motion-ease:cubic-bezier(.2,.75,.2,1);
  --motion-soft:cubic-bezier(.22,.61,.36,1);
  --motion-red:#df4337;
  --motion-green:#173f34;
}

.premium-home main{overflow:clip}

/* Header feedback */
.premium-home .header{
  transition:box-shadow .28s ease,background .28s ease,border-color .28s ease;
}
.premium-home .header.is-scrolled{
  background:rgba(255,253,249,.985);
  border-bottom-color:rgba(23,63,52,.1);
  box-shadow:0 10px 34px rgba(23,63,52,.075);
}
.premium-home .brand-emblem{
  transition:transform .28s var(--motion-ease),box-shadow .28s ease;
}
.premium-home .brand-home:hover .brand-emblem{
  transform:rotate(-5deg) scale(1.05);
  box-shadow:0 8px 22px rgba(223,67,55,.2);
}
.premium-home.rtl .brand-home:hover .brand-emblem{transform:rotate(5deg) scale(1.05)}
.premium-home .navlinks a{overflow:hidden}
.premium-home .navlinks a::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:17px;
  height:2px;
  border-radius:999px;
  background:var(--ae-red);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s var(--motion-ease);
}
.premium-home .navlinks a:hover::before,
.premium-home .navlinks a:focus-visible::before{transform:scaleX(1)}

/* Hero atmosphere */
.premium-home .hero{isolation:isolate}
.premium-home .hero::before,
.premium-home .hero::after{
  content:"";
  display:block;
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
  z-index:0;
}
.premium-home .hero::before{
  width:330px;
  height:330px;
  left:-125px;
  top:-155px;
  background:radial-gradient(circle,rgba(244,180,63,.22),rgba(244,180,63,0) 70%);
  animation:aeAmbientFloatA 10s ease-in-out infinite alternate;
}
.premium-home .hero::after{
  width:420px;
  height:420px;
  right:-170px;
  bottom:-235px;
  background:radial-gradient(circle,rgba(223,67,55,.14),rgba(223,67,55,0) 72%);
  animation:aeAmbientFloatB 12s ease-in-out infinite alternate;
}
.premium-home .hero-grid{z-index:1}
@keyframes aeAmbientFloatA{to{transform:translate3d(42px,26px,0) scale(1.08)}}
@keyframes aeAmbientFloatB{to{transform:translate3d(-48px,-24px,0) scale(.94)}}

/* Hero entrance */
.premium-home.motion-ready .hero-copy>*{
  opacity:0;
  transform:translateY(20px);
}
.premium-home.motion-ready.is-page-ready .hero-copy>*{
  opacity:1;
  transform:none;
  transition:opacity .68s var(--motion-soft),transform .68s var(--motion-soft);
}
.premium-home.motion-ready.is-page-ready .hero-copy>:nth-child(1){transition-delay:.06s}
.premium-home.motion-ready.is-page-ready .hero-copy>:nth-child(2){transition-delay:.13s}
.premium-home.motion-ready.is-page-ready .hero-copy>:nth-child(3){transition-delay:.2s}
.premium-home.motion-ready.is-page-ready .hero-copy>:nth-child(4){transition-delay:.27s}
.premium-home .hero-location span[aria-hidden="true"]{
  color:var(--ae-red);
  filter:drop-shadow(0 0 0 rgba(223,67,55,0));
  animation:aeLocationPulse 2.2s ease-out infinite;
}
@keyframes aeLocationPulse{
  0%,55%,100%{filter:drop-shadow(0 0 0 rgba(223,67,55,0))}
  70%{filter:drop-shadow(0 0 7px rgba(223,67,55,.75))}
}

/* Search should feel alive without moving around */
.premium-home .address-box{
  position:relative;
  transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.premium-home .address-box:focus-within{
  border-color:rgba(223,67,55,.44);
  box-shadow:0 12px 34px rgba(23,63,52,.095),0 0 0 4px rgba(223,67,55,.055);
  background:#fff;
}
.premium-home .address-box .btn{
  position:relative;
  overflow:hidden;
  transition:background .2s ease,box-shadow .2s ease,transform .12s ease;
}
.premium-home .address-box .btn:hover{
  transform:none;
  box-shadow:0 8px 20px rgba(223,67,55,.2);
}
.premium-home .address-box .btn:active{transform:scale(.975)}
.premium-home .mode-tabs button{
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease;
}
.premium-home .mode-tabs button:active{transform:scale(.97)}

/* Hero carousel: depth, pointer parallax, and autoplay progress */
.premium-home .hero-carousel{
  --hero-pan-x:0px;
  --hero-pan-y:0px;
  cursor:grab;
  box-shadow:0 24px 68px rgba(23,63,52,.16),0 0 0 1px rgba(255,255,255,.8) inset;
  transition:box-shadow .3s ease;
}
.premium-home .hero-carousel:hover{
  box-shadow:0 30px 78px rgba(23,63,52,.2),0 0 0 1px rgba(255,255,255,.9) inset;
}
.premium-home .hero-carousel.is-dragging{cursor:grabbing}
.premium-home .hero-slide>img{
  transform:scale(1.035) translate3d(var(--hero-pan-x),var(--hero-pan-y),0);
  transition:transform 1.1s var(--motion-soft),filter .5s ease;
  will-change:transform;
}
.premium-home .hero-slide.is-active>img{filter:saturate(1.04) contrast(1.015)}
.premium-home .hero-slide-overlay>div{
  transform:translateY(12px);
  opacity:.85;
  transition:transform .65s var(--motion-ease),opacity .55s ease;
}
.premium-home .hero-slide.is-active .hero-slide-overlay>div{
  transform:none;
  opacity:1;
}
.premium-home .hero-slide-cta span[aria-hidden="true"]{
  display:inline-block;
  transition:transform .22s var(--motion-ease);
}
.premium-home .hero-slide-cta:hover span[aria-hidden="true"]{transform:translateX(5px)}
.premium-home.rtl .hero-slide-cta:hover span[aria-hidden="true"]{transform:rotate(180deg) translateX(5px)}
.premium-home .hero-motion-progress{
  position:absolute;
  z-index:6;
  left:30px;
  right:30px;
  bottom:0;
  height:3px;
  overflow:hidden;
  border-radius:999px 999px 0 0;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}
.premium-home .hero-motion-progress span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#f4b43f,#fff);
  transform:scaleX(0);
  transform-origin:left;
}
.premium-home.rtl .hero-motion-progress span{transform-origin:right}
.premium-home .hero-motion-progress span.is-running{
  animation:aeHeroProgress 3.6s linear forwards;
}
.premium-home .hero-carousel:hover .hero-motion-progress span,
.premium-home .hero-carousel:focus-within .hero-motion-progress span{animation-play-state:paused}
@keyframes aeHeroProgress{to{transform:scaleX(1)}}

/* Scroll reveals */
.premium-home.motion-ready .ae-reveal{
  opacity:0;
  transform:translateY(30px);
}
.premium-home.motion-ready .ae-reveal.is-revealed{
  opacity:1;
  transform:none;
  transition:opacity .72s var(--motion-soft),transform .72s var(--motion-soft);
}
.premium-home.motion-ready .ae-reveal[data-reveal-delay="1"].is-revealed{transition-delay:.06s}
.premium-home.motion-ready .ae-reveal[data-reveal-delay="2"].is-revealed{transition-delay:.12s}
.premium-home.motion-ready .ae-reveal[data-reveal-delay="3"].is-revealed{transition-delay:.18s}
.premium-home.motion-ready .ae-reveal[data-reveal-delay="4"].is-revealed{transition-delay:.24s}

/* Cuisine cards: tactile but stable */
.premium-home .cuisine-photo-card{
  will-change:transform;
  box-shadow:0 10px 28px rgba(23,63,52,.045);
}
.premium-home .cuisine-photo-card:hover{
  transform:translateY(-5px) scale(1.008);
  box-shadow:0 22px 48px rgba(23,63,52,.13);
}
.premium-home .cuisine-photo-card img{transition:transform .5s var(--motion-ease),filter .4s ease}
.premium-home .cuisine-photo-card:hover img{transform:scale(1.07);filter:saturate(1.08)}
.premium-home .cuisine-photo-card b{transition:transform .3s var(--motion-ease)}
.premium-home .cuisine-photo-card:hover b{transform:translateY(-3px)}

/* Restaurant cards: NEVER move the hit target. Visual motion stays inside the image. */
.premium-home .restaurant-card,
.premium-home .restaurant-card:hover,
.premium-home .restaurant-card:focus-within{
  transform:none!important;
}
.premium-home .restaurant-card{
  position:relative;
  isolation:isolate;
  transition:border-color .28s ease,box-shadow .32s ease,background .28s ease!important;
}
.premium-home .restaurant-card:hover,
.premium-home .restaurant-card:focus-within{
  border-color:rgba(23,63,52,.19);
  box-shadow:0 22px 54px rgba(23,63,52,.12)!important;
}
.premium-home .restaurant-image{overflow:hidden;background:#f0eee8}
.premium-home .restaurant-image img{
  transform:scale(1.002);
  transition:transform .55s var(--motion-ease),filter .45s ease;
  will-change:transform;
  pointer-events:none;
}
.premium-home .restaurant-card:hover .restaurant-image img,
.premium-home .restaurant-card:focus-within .restaurant-image img{
  transform:scale(1.055);
  filter:saturate(1.045) contrast(1.015);
}
.premium-home .restaurant-body h3{transition:color .25s ease}
.premium-home .restaurant-card:hover .restaurant-body h3{color:var(--ae-red-dark)}
.premium-home .restaurant-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(340px circle at var(--card-x,50%) var(--card-y,30%),rgba(244,180,63,.09),transparent 58%);
  opacity:0;
  transition:opacity .28s ease;
}
.premium-home .restaurant-card:hover::after{opacity:1}

/* Community CTA */
.premium-home .community-band{position:relative;overflow:hidden}
.premium-home .community-band::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-170px;
  top:-220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,180,63,.13),transparent 70%);
  pointer-events:none;
}
.premium-home .join-strip{position:relative}
.premium-home .join-link{
  position:relative;
  overflow:hidden;
  transition:border-color .28s ease,box-shadow .3s ease,background .28s ease;
}
.premium-home .join-link::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.68) 48%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .65s var(--motion-ease);
  pointer-events:none;
}
.premium-home.rtl .join-link::before{transform:translateX(130%)}
.premium-home .join-link:hover::before{transform:translateX(130%)}
.premium-home.rtl .join-link:hover::before{transform:translateX(-130%)}
.premium-home .join-link:hover{
  border-color:rgba(223,67,55,.22);
  box-shadow:0 18px 40px rgba(23,63,52,.09);
}
.premium-home .join-link>b{
  transition:transform .25s var(--motion-ease),color .25s ease;
}
.premium-home .join-link:hover>b{transform:translateX(6px);color:var(--ae-red)}
.premium-home.rtl .join-link:hover>b{transform:translateX(-6px)}

/* Button ripple */
.premium-home .ae-ripple-host{position:relative;overflow:hidden}
.premium-home .ae-ripple{
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:rgba(255,255,255,.46);
  pointer-events:none;
  transform:scale(0);
  animation:aeRipple .58s ease-out forwards;
}
@keyframes aeRipple{to{transform:scale(18);opacity:0}}

@media(max-width:1000px){
  .premium-home .hero::before{width:250px;height:250px}
  .premium-home .hero::after{width:300px;height:300px}
  .premium-home .hero-motion-progress{left:22px;right:22px}
}

@media(max-width:720px){
  .premium-home .hero::before,
  .premium-home .hero::after{opacity:.58}
  .premium-home.motion-ready .hero-copy>*{transform:translateY(12px)}
  .premium-home.motion-ready .ae-reveal{transform:translateY(18px)}
  .premium-home .hero-motion-progress{left:18px;right:18px}
  .premium-home .restaurant-card::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .premium-home *,
  .premium-home *::before,
  .premium-home *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .premium-home.motion-ready .hero-copy>*,
  .premium-home.motion-ready .ae-reveal{opacity:1!important;transform:none!important}
  .premium-home .hero-slide>img{transform:scale(1.01)!important}
}

/* 2026-09-06 alignment hardening — keep all homepage layers on one responsive grid. */
.premium-home .container{
  width:min(1160px,calc(100% - 40px));
}
.premium-home .nav,
.premium-home .navlinks,
.premium-home .actions,
.premium-home .hero-grid,
.premium-home .hero-copy,
.premium-home .hero-carousel,
.premium-home .section-head,
.premium-home .join-strip,
.premium-home .join-copy,
.premium-home .join-actions,
.premium-home .footer-main,
.premium-home .footer-main>*{
  min-width:0;
}
.premium-home .nav{
  justify-content:flex-start;
}
.premium-home .brand-home{
  flex:0 0 auto;
}
.premium-home .navlinks{
  flex:1 1 auto;
  margin-inline:0!important;
}
.premium-home .actions{
  flex:0 0 auto;
  margin-inline-start:auto;
}
.premium-home .address-box{
  width:100%;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
}
.premium-home .address-box input{
  width:100%;
  min-width:0;
}
.premium-home .restaurant-grid,
.premium-home .cuisines{
  align-items:stretch;
}
.premium-home .restaurant-card{
  height:100%;
}

@media(min-width:1001px){
  .premium-home .hero-grid,
  .premium-home.rtl .hero-grid{
    direction:ltr!important;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    column-gap:48px!important;
    align-items:center;
  }
  .premium-home .hero-copy{
    grid-column:1;
    justify-self:start;
    width:100%;
    max-width:520px;
  }
  .premium-home .hero-carousel{
    grid-column:2;
    width:100%;
    height:360px!important;
    min-width:0;
  }
  .premium-home.rtl .hero-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;
  }
  .premium-home.rtl .hero-carousel{
    grid-column:1;
  }
  .premium-home.rtl .hero-copy{
    grid-column:2;
    justify-self:end;
    direction:rtl;
    text-align:right;
    max-width:520px;
  }
  .premium-home.rtl .hero-order,
  .premium-home.rtl .address-box{
    width:100%;
    max-width:520px;
  }
}

@media(max-width:1000px){
  .premium-home .hero-grid,
  .premium-home.rtl .hero-grid{
    direction:ltr!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .premium-home .hero-copy,
  .premium-home.rtl .hero-copy,
  .premium-home .hero-carousel,
  .premium-home.rtl .hero-carousel{
    grid-column:1!important;
    width:100%!important;
    max-width:none;
  }
  .premium-home.rtl .hero-copy{
    direction:rtl;
    text-align:right;
  }
  .premium-home .hero-carousel{
    height:330px!important;
  }
  .premium-home .footer-main{
    gap:34px 38px;
  }
}

@media(max-width:720px){
  .premium-home .container{
    width:min(1160px,calc(100% - 28px));
  }
  .premium-home .nav{
    height:60px;
    gap:8px;
  }
  .premium-home .brand-home{
    gap:7px;
  }
  .premium-home .brand-emblem{
    width:32px;
    height:32px;
  }
  .premium-home .brand-wordmark{
    font-size:1.06rem;
    white-space:nowrap;
  }
  .premium-home .actions{
    gap:6px;
  }
  .premium-home .lang{
    min-width:42px;
    padding:8px 9px;
  }
  .premium-home .account-link{
    width:42px;
    min-width:42px;
    padding:8px;
    font-size:0;
  }
  .premium-home .account-link::before{
    content:"👤";
    font-size:1rem;
    line-height:1;
  }
  .premium-home .actions .btn-primary{
    min-width:44px;
    padding:8px 9px;
  }
  .premium-home .address-box{
    grid-template-columns:1fr;
    gap:6px;
  }
  .premium-home .hero-carousel{
    height:235px!important;
  }
  .premium-home .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .premium-home .section-head>.btn{
    align-self:flex-start;
  }
  .premium-home.rtl .section-head{
    align-items:stretch;
    text-align:right;
  }
  .premium-home.rtl .section-head>.btn{
    align-self:flex-end;
  }
  .premium-home .join-actions,
  .premium-home .app-downloads{
    grid-template-columns:1fr;
  }
  .premium-home .app-downloads{
    max-width:360px;
  }
  .premium-home .footer-support a{
    overflow-wrap:anywhere;
  }
}

@media(max-width:420px){
  .premium-home .container{
    width:min(1160px,calc(100% - 22px));
  }
  .premium-home .brand-wordmark{
    font-size:.98rem;
  }
  .premium-home .brand-emblem{
    width:30px;
    height:30px;
  }
  .premium-home .actions{
    gap:4px;
  }
  .premium-home .lang,
  .premium-home .account-link{
    min-width:38px;
    width:38px;
    padding:7px;
  }
  .premium-home .actions .btn-primary{
    min-width:40px;
    padding:7px 8px;
  }
  .premium-home .hero h1{
    font-size:clamp(2rem,10vw,2.5rem);
  }
  .premium-home .hero-carousel{
    height:220px!important;
  }
}