/* =========================================================
   BULVAR — Gate / Brand Selector
   Two-panel chooser: Bulvar Simit (top) / Bulvar Bakery (bottom)
   ========================================================= */

:root{
  --simit-dark:   #3a0d07;
  --simit-mid:    #7a2410;
  --simit-light:  #e8821c;
  --simit-ink:    #2a0f08;

  --bakery-dark:  #17110a;
  --bakery-mid:   #4a3413;
  --bakery-light: #d8ac53;
  --bakery-ink:   #f4ead8;

  --cream: #fdf6ec;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  height:100%;
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.gate{
  font-family:'Manrope', sans-serif;
  background:#0d0603;
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}

.gate-grain{
  position:fixed; inset:0;
  z-index:30;
  pointer-events:none;
  opacity:.05;
  background-image:url('../img/grain.png');
  background-size:220px 220px;
  mix-blend-mode:overlay;
}

.gate-stage{
  position:relative;
  height:100dvh;
  width:100vw;
  display:flex;
  flex-direction:column;
}

/* ---------- panels ---------- */
.panel{
  position:relative;
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none;
  color:var(--cream);
  cursor:pointer;
  transition:flex-grow .65s var(--ease);
}

.panel__bg{
  position:absolute; inset:-2% -2%;
  z-index:0;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.panel--simit .panel__bg{
  background-color:var(--simit-dark);
  background-image:
    linear-gradient(135deg, rgba(58,13,7,.34) 0%, rgba(122,36,16,.24) 45%, rgba(232,130,28,.20) 100%),
    url('../img/gate-simit.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.panel--bakery .panel__bg{
  background-color:var(--bakery-dark);
  background-image:
    radial-gradient(circle at 88% 88%, rgba(216,172,83,.20) 0%, rgba(74,52,19,.26) 26%, rgba(23,17,10,.34) 58%),
    url('../img/gate-bakery.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}

.panel__spot{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 70%);
}
.panel:hover .panel__spot{ opacity:1; }

.panel__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:2rem;
  text-align:center;
  transform:translateY(0);
  transition:transform .6s var(--ease);
}

.panel__logo{
  width:clamp(96px, 11vw, 168px);
  height:auto;
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.05) inset, 0 10px 30px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.14);
  transition:transform .6s var(--ease);
}
.panel:hover .panel__logo{ transform:scale(1.05) rotate(-2deg); }

.panel__tagline{
  font-size:clamp(.85rem, 1.1vw, 1.05rem);
  letter-spacing:.02em;
  opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.panel__tagline--simit{ font-family:'Fredoka', sans-serif; font-weight:500; }
.panel__tagline--bakery{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(.95rem, 1.25vw, 1.2rem); }

.panel__cta{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.7em 1.3em;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s ease, color .3s ease;
  margin-top:6px;
  backdrop-filter:blur(2px);
}
.panel__cta svg{ transition:transform .35s var(--ease); }
.panel:hover .panel__cta, .panel:focus-visible .panel__cta{
  opacity:1; transform:translateY(0);
}
.panel:hover .panel__cta svg{ transform:translateX(4px); }
.panel--simit .panel__cta:hover, .panel--simit:hover .panel__cta{ background:rgba(253,246,236,.12); }
.panel--bakery:hover .panel__cta{ background:rgba(253,246,236,.12); }

.panel:focus-visible{ outline:2px solid var(--cream); outline-offset:-6px; }

/* hover expand — desktop with fine pointer only */
@media (hover:hover) and (pointer:fine){
  .gate-stage:has(.panel--simit:hover) .panel--simit{ flex-grow:1.55; }
  .gate-stage:has(.panel--simit:hover) .panel--bakery{ flex-grow:.65; }
  .gate-stage:has(.panel--bakery:hover) .panel--bakery{ flex-grow:1.55; }
  .gate-stage:has(.panel--bakery:hover) .panel--simit{ flex-grow:.65; }
  .gate-stage:has(.panel:hover) .panel:not(:hover) .panel__content{ transform:translateY(0) scale(.94); opacity:.75; }
  .gate-stage:has(.panel:hover) .panel:not(:hover) .panel__bg{ filter:brightness(.7) saturate(.85); }
}

/* idle breathing motion when nothing is hovered (keeps it alive) */
@media (hover:none){
  .panel__logo{ animation:breathe 5s ease-in-out infinite; }
  .panel--bakery .panel__logo{ animation-delay:.4s; }
}
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}

@media (max-width:640px){
  .panel__logo{ width:clamp(84px, 24vw, 120px); }
}

/* ---------- page-leave transition ---------- */
.gate-veil{
  position:fixed; inset:0;
  z-index:50;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
}
.gate-veil.is-active{ opacity:1; }
.gate-veil--simit{ background:radial-gradient(circle at var(--ox,50%) var(--oy,50%), var(--simit-light), var(--simit-dark) 70%); }
.gate-veil--bakery{ background:radial-gradient(circle at var(--ox,50%) var(--oy,50%), var(--bakery-light), var(--bakery-dark) 70%); }

@media (prefers-reduced-motion:reduce){
  .panel, .panel__bg, .panel__content, .panel__logo, .panel__cta, .gate-veil{ transition:none !important; animation:none !important; }
}