/* I Divine Coffee – global styles.
   Component styles live inline in index.html, copied 1:1 from the approved design.
   This file holds globals, keyframes, hover states and the < 860px breakpoint. */

html,body{height:100%;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FDF7F2;color:#2B1A10;font-family:Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#5A2A12}
a:hover{color:#2B1A10}
input::placeholder,textarea::placeholder{color:inherit;opacity:.55}
:focus-visible{outline:3px solid #E0782E;outline-offset:3px}
@keyframes idc-steam{0%{opacity:0;transform:translateY(6px) scaleY(.6)}30%{opacity:.9}100%{opacity:0;transform:translate(4px,-28px) scaleY(1.3)}}
@keyframes idc-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}

/* Hover states (the design marks these as !important overrides of the inline styles) */
.hv-navlink:hover{background:rgba(90,42,18,0.07)!important}
.hv-brown:hover{background:#2B1A10!important}
.hv-brown-cream:hover{background:#2B1A10!important;color:#FDF7F2!important}
.hv-green:hover{background:#25663A!important}
.hv-green-white:hover{background:#25663A!important;color:#FFFFFF!important}
.hv-caramel:hover{background:#F6C795!important}
.hv-caramel-dark:hover{background:#F6C795!important;color:#2B1A10!important}
.hv-peach:hover{background:#F6E3D6!important}
.hv-social:hover{background:#F2B37A!important}
.hv-lift:hover{transform:translateY(-6px)!important;box-shadow:0 30px 50px -28px rgba(90,42,18,0.55)!important}

/* Responsive switches – breakpoint < 860px (matches window.innerWidth < 860) */
.desk-nav{display:flex}
.mob-ctrl{display:none}
.mob-menu{display:none}
.fab{display:none}
.hero{padding-bottom:80px}
@media (max-width:859.98px){
  .desk-nav{display:none}
  .mob-ctrl{display:flex}
  .mob-menu.open{display:flex}
  .fab{display:grid}
  .hero{padding-bottom:clamp(280px,48vh,440px)}
}

/* Pinned hero: the hero sticks while the spacer scrolls past, so the 3D scroll animation
   (camera orbit + cart drive) finishes before the next section arrives. */
.hero-track{position:relative}
.hero-pin-spacer{height:140vh}
@media (prefers-reduced-motion: reduce){.hero-pin-spacer{height:0}}

/* ── Phone layout (< 860px) ──
   Hero fills one screen: copy on top, the 3D cart framed in the space below it (see IdcHero in cart3d.js). */
@media (max-width:859.98px){
  .hero{min-height:100vh;min-height:100svh;padding-bottom:clamp(200px,30svh,360px)}
  .hero-inner{padding-top:clamp(92px,13svh,128px)!important}
  .hero-copy{gap:16px!important}
  .hero-form .hero-btn{flex:1 1 100%!important;justify-content:center}
  .site-footer{padding-bottom:104px!important}  /* room for the floating WhatsApp button */
}
@media (max-width:420px){
  .hdr-bar{gap:8px!important;padding-left:10px!important}
  .hdr-brand{gap:8px!important}
  .hdr-brand img{width:38px!important;height:38px!important}
  .hdr-brand span{font-size:17px!important}
  .mob-order{padding:0 14px!important}
  .hero-h1{font-size:clamp(30px,8.6vw,34px)!important}
}
@media (max-width:374px){
  .hdr-brand img{width:34px!important;height:34px!important}
  .hdr-brand span{font-size:15px!important}
  .mob-order{padding:0 12px!important;font-size:13px!important}
}

/* Hero copy: one short entrance, then the text stays still (the cart carries the motion). */
@keyframes idc-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:idc-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
/* Pincode location icon: a soft ring every few seconds. */
@keyframes idc-ping{0%{transform:scale(.4);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}}
.pin-icon::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1.5px solid #E0782E;opacity:0;animation:idc-ping 3.2s ease-out 1.2s infinite;pointer-events:none}
@media (prefers-reduced-motion: reduce){.hero-copy>*,.pin-icon::after{animation:none}}