/* 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: hidden;
  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;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 16px 18px;
}

/* --- logo: appears second - frameless, spins in and settles --- */
.gw-logo {
  width: min(60vw, 245px); height: auto;
  will-change: transform, opacity;
  animation: gwLogoSpin 1s cubic-bezier(.2,.8,.25,1) 0.5s both;
}

/* --- 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-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); }
}
@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-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 { 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-name, .gw-order, .gw-site, .gw-box-in, .gw-footer {
  animation-play-state: paused;
}
body.ready .bg, body.ready .gw-logo, 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;
}