/* Kokodezh gateway page (index.html) - Erfan's design:
   yellow -> orange -> deep blue blended gradient, big frameless logo,
   "kokodezh fastfood", two square boxes (right: ordering, left: site),
   staged entrance: background, logo, name, boxes slide in from the sides. */

@font-face {
  font-family: "FarMorvarid";
  src: url("assets/fonts/Far_Morvarid.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  overflow-x: clip;
  background: #0a2570;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- background: first thing that appears --- */
.bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    #ffd21a 0%,
    #ffa200 26%,
    #ff7300 44%,
    #8a4a86 59%,
    #123e8f 76%,
    #0a2570 100%);
  animation: gwFade 0.7s ease-out both;
}

.gw {
  position: relative; z-index: 1;
  min-height: 100%;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 16px 18px;
}

/* --- logo: appears second - frameless, spins in and settles ---
   Living logo: the monkey himself is animated inside the artwork
   (logo-anim.webp: he blinks, waves his raised hand, his hat bounces
   and the ladle sparkles). The stage no longer bobs the whole image -
   it only carries a static soft shadow, plus a shine layer masked by
   the logo's own alpha that sweeps a highlight across every few
   seconds. Reduced-motion visitors get the static logo via <picture>. */
.gw-logo-stage {
  position: relative;
  width: min(60vw, 245px);
  line-height: 0;
  filter: drop-shadow(0 10px 16px rgba(10, 20, 60, .38));
}
.gw-logo-pic { display: block; }
.gw-logo {
  display: block;
  width: 100%; height: auto;
  will-change: transform, opacity;
  animation: gwLogoSpin 1s cubic-bezier(.2,.8,.25,1) 0.5s both;
}
.gw-logo-shine {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: url("assets/img/logo.webp");
  mask-image: url("assets/img/logo.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: gwLogoShine 7.5s ease-in-out 2.6s infinite;
}

/* --- name block (Persian, like the first version): appears third --- */
.gw-name {
  margin-top: 12px;
  text-align: center; color: #fff;
  animation: gwUp 0.6s ease-out 1.5s both;
}
.gw-name-main {
  font-family: "FarMorvarid", "Vazirmatn", sans-serif;
  font-size: clamp(44px, 13vw, 64px);
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(10, 20, 60, .45);
}
.gw-name-slogan {
  margin-top: 10px;
  font-size: clamp(17px, 5vw, 22px); font-weight: 700;
  text-shadow: 0 1px 10px rgba(10, 20, 60, .5);
}
.gw-name-tag {
  margin-top: 4px;
  font-size: clamp(12.5px, 3.8vw, 15px); opacity: .95;
  text-shadow: 0 1px 8px rgba(10, 20, 60, .55);
}

/* --- the two square boxes: slide in from the sides last --- */
.gw-choices {
  margin-top: 34px;
  display: flex; gap: 14px;
  width: min(94vw, 430px);
}

.gw-box {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #fff;
  background: rgba(8, 18, 55, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(5, 10, 40, 0.30);
  will-change: transform, opacity;
}
.gw-box:active { transform: scale(.97); }

/* right box (first in RTL flow) enters from the right edge */
.gw-order { animation: gwFromRight 0.65s cubic-bezier(.2,.8,.3,1) 2s both; }
/* left box enters from the left edge */
.gw-site  { animation: gwFromLeft  0.65s cubic-bezier(.2,.8,.3,1) 2s both; }

/* box text fades in after the boxes land */
.gw-box-in {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px; text-align: center;
  animation: gwFade 0.5s ease-out 2.55s both;
}
.gw-icon { font-size: clamp(38px, 11vw, 52px); line-height: 1; }
.gw-title {
  font-family: "FarMorvarid", "Vazirmatn", sans-serif;
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(5, 10, 40, .5);
}
.gw-desc {
  font-size: clamp(12px, 3.4vw, 14px);
  opacity: .92;
}

.gw-site .gw-title { font-size: clamp(23px, 6.6vw, 33px); white-space: nowrap; }

.gw-footer {
  margin-top: auto; padding-top: 26px;
  color: #fff; font-size: 14px; text-align: center;
  text-shadow: 0 1px 6px rgba(5, 10, 40, .6);
  animation: gwFade 0.6s ease-out 2.75s both;
}
.gw-footer a { color: #ffe082; text-decoration: none; font-weight: 700; }

/* --- entrance choreography --- */
@keyframes gwFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gwLogoSpin {
  from { opacity: 0; transform: rotate(-360deg) scale(.35); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* one soft shine sweep, then a long quiet pause before the next */
@keyframes gwLogoShine {
  0%   { background-position: 130% 0; }
  16%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
@keyframes gwUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gwFromRight {
  from { opacity: 0; transform: translateX(58vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes gwFromLeft {
  from { opacity: 0; transform: translateX(-58vw); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg, .gw-logo, .gw-logo-stage, .gw-logo-shine, .gw-name, .gw-order, .gw-site, .gw-box-in, .gw-footer {
    animation: none;
  }
}

/* larger screens: same design, slightly bigger proportions */
@media (min-width: 768px) {
  .gw-logo-stage { width: 300px; }
  .gw-choices { width: 540px; gap: 18px; }
}

/* --- load gate: the choreography stays paused until the page has fully
       loaded (logo + fonts), then plays cleanly in one go --- */
.bg, .gw-logo, .gw-logo-stage, .gw-logo-shine, .gw-name, .gw-order, .gw-site, .gw-box-in, .gw-footer {
  animation-play-state: paused;
}
body.ready .bg, body.ready .gw-logo, body.ready .gw-logo-stage,
body.ready .gw-logo-shine, body.ready .gw-name,
body.ready .gw-order, body.ready .gw-site, body.ready .gw-box-in,
body.ready .gw-footer {
  animation-play-state: running;
}

/* short phone screens (browser chrome / in-app webviews): shrink the
   composition so the whole gateway fits one screen - no scroll needed */
@media (max-width: 767px) and (max-height: 880px) {
  .gw { padding-top: 14px; }
  .gw-logo-stage { width: min(46vw, 190px); }
  .gw-name { margin-top: 4px; }
  .gw-name-main { font-size: clamp(38px, 11vw, 52px); }
  .gw-choices { margin-top: 18px; }
  .gw-footer { padding-top: 14px; }
}