/* =============================================================================
   Baku Lounge — hand-written components and motion
   =============================================================================

   Everything the utility classes cannot express: the İznik arch frame, the
   eight-point star, the marquee, the drifting glows and smoke, and the scroll
   state of the header. All colours resolve through tokens.css.

   The old menu list (.karte-*) lived here. The menu moved to menu-in.com, so
   the component went with it; the previous file is in
   archive/baku-scaffold-2026-09-08/assets/css/components.css.

   Every animation below is switched off under prefers-reduced-motion at the
   end of this file.
   ========================================================================== */

/* ------------------------------------------------------------------ arch */
/* The mihrab / İznik window shape: a full semicircle on top, soft corners at
   the base. border-radius clamps to half the box width, which is exactly what
   makes a 999px radius draw an arch on any portrait frame. The inset brass
   line follows the same curve because it inherits the radius. */

/* :not(.absolute) because this file loads after the utilities: a bare
   position rule here would silently beat Tailwind's `absolute` on the
   overlapping inset frames and drop them back into the flow. */
.arch:not(.absolute) { position: relative; }
.arch {
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px 999px var(--ds-radius-lg) var(--ds-radius-lg);
}

.arch::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(201 162 39 / 0.5);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.arch--video::after { inset: 10px; border-color: rgb(242 169 59 / 0.6); }

/* ------------------------------------------------------- eight-point star */
/* Rub el hizb from two squares, one turned 45°. Colour comes from currentColor
   so it takes whatever text colour its parent sets. */

.star8 {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}
.star8::before,
.star8::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}
.star8::after { transform: rotate(45deg); }

/* --------------------------------------------------------------- header */
/* Solid by default. motion.js marks it data-top while the page sits at the
   very top, which lets the hero photograph run up under it. With JS off the
   attribute is never set and the header simply stays solid. */

#site-header {
  transition: background-color var(--ds-dur-hover) ease, box-shadow var(--ds-dur-hover) ease,
              backdrop-filter var(--ds-dur-hover) ease;
}
#site-header[data-top] {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-link {
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--ds-dur-micro) ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ds-saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ds-dur-hover) var(--ds-ease-out);
}
.nav-link:hover { color: var(--ds-saffron); }
.nav-link:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------- hero */

@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero-in {
  animation: heroIn 0.9s var(--ds-ease-out) both;
  animation-delay: var(--d, 0ms);
}

/* On a phone the eyebrow wraps to two centred lines and the star would be
   left stranded beside them. */
@media (max-width: 639px) {
  .hero-eyebrow .star8 { display: none; }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 10;
  width: 26px;
  height: 42px;
  border: 2px solid rgb(244 239 230 / 0.5);
  border-radius: 999px;
  justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--ds-saffron);
  animation: cue 1.8s var(--ds-ease-out) infinite;
}
@keyframes cue {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* A light sweep across the main call to action every few seconds. */
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
  transform: skewX(-20deg);
  animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 70% { left: -60%; }
  100%    { left: 130%; }
}

/* --------------------------------------------------------------- glows */
/* Soft coloured light behind sections: the amber lamps, the velvet, the red
   walls, the palms. Blurred, low opacity, and drifting slowly. */

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  animation: glowDrift 18s ease-in-out infinite alternate;
}
.glow--saffron { background: var(--ds-saffron); opacity: 0.22; }
.glow--velvet  { background: var(--ds-velvet);  opacity: 0.4; }
.glow--wine    { background: var(--ds-wine);    opacity: 0.45; }
.glow--palm    { background: var(--ds-palm);    opacity: 0.3; }

@keyframes glowDrift {
  from { translate: 0 0;        scale: 1; }
  to   { translate: 40px -30px; scale: 1.15; }
}

/* ------------------------------------------------------------- marquee */

.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  white-space: nowrap;
  list-style: none;
  margin: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------- featured cards */

.feature-card__num {
  position: absolute;
  right: 14px;
  bottom: -18px;
  z-index: 3;
  font-family: var(--ds-font-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ds-saffron);
  text-shadow: 0 6px 24px rgb(5 15 26 / 0.8);
  transition: transform var(--ds-dur-image) var(--ds-ease-out);
}
.feature-card:hover .feature-card__num { transform: translateY(-6px); }
.feature-card .arch {
  transition: box-shadow var(--ds-dur-hover) ease, transform var(--ds-dur-hover) var(--ds-ease-out);
  box-shadow: 0 20px 40px -12px rgb(5 15 26 / 0.7);
}
.feature-card:hover .arch {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -12px rgb(91 18 32 / 0.8);
}

/* -------------------------------------------------------- gallery tiles */

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-container);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ds-ease-out), filter 0.8s var(--ds-ease-out);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(5 15 26 / 0.85), rgb(5 15 26 / 0) 55%);
  pointer-events: none;
}
.tile figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--ds-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ds-primary);
  transition: transform var(--ds-dur-hover) var(--ds-ease-out);
}
.tile:hover img { transform: scale(1.07); filter: saturate(1.15); }
.tile:hover figcaption { transform: translateY(-4px); color: var(--ds-saffron); }

/* ----------------------------------------------------------------- bar */

.float { animation: floatY 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.bar-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--ds-radius-full);
  border: 1px solid rgb(242 169 59 / 0.35);
  background: rgb(44 10 18 / 0.6);
  color: var(--ds-primary);
  font-family: var(--ds-font-body);
  font-size: var(--ds-label-lg-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bar-chip .material-symbols-outlined { color: var(--ds-saffron); }

/* --------------------------------------------------------------- smoke */
/* Three soft white clouds rising slowly through the shisha section. */

.smoke { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.smoke span {
  position: absolute;
  bottom: -20%;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(230 240 235 / 0.09), rgb(230 240 235 / 0) 65%);
  animation: smokeRise 22s ease-in-out infinite;
}
.smoke span:nth-child(1) { left: -10%; animation-delay: 0s; }
.smoke span:nth-child(2) { left: 30%;  animation-delay: -8s; animation-duration: 26s; }
.smoke span:nth-child(3) { left: 65%;  animation-delay: -15s; animation-duration: 30s; }
@keyframes smokeRise {
  0%   { transform: translate3d(0, 20%, 0) scale(0.8); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate3d(8%, -90%, 0) scale(1.4); opacity: 0; }
}

/* --------------------------------------------------------------- hours */

.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--ds-outline-variant);
}
.hours dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The logo in the closing band: its red flames breathe a slow glow, like
   the neon sign in the room. filter is composited, so this costs no layout. */
.logo-glow { animation: logoGlow 4.5s ease-in-out infinite; }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgb(193 55 44 / 0.35)); }
  50%      { filter: drop-shadow(0 0 22px rgb(239 60 50 / 0.75)); }
}

/* ------------------------------------------------------- bottom nav state */

.nav-item[aria-current="true"] {
  color: var(--ds-secondary);
  font-weight: 700;
}

/* ------------------------------------------------- click-to-load map */
/* The facade holds the space the iframe will take, so loading it shifts nothing. */

.map-facade {
  min-height: 420px;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background:
    linear-gradient(rgb(13 31 51 / 0.86), rgb(13 31 51 / 0.92)),
    url("../img/ornament/iznik-field.svg") center / 180px repeat,
    var(--ds-surface-container);
  box-shadow: 0 0 0 1px var(--ds-outline-variant), var(--ds-shadow-card);
}
.map-facade__inner { min-height: 420px; }
.map-facade iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ------------------------------------------------------- scroll parallax */
[data-parallax] { will-change: transform; }

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hero-in, .scroll-cue span, .btn-shine::after, .glow, .marquee__track,
  .float, .smoke span, .logo-glow {
    animation: none !important;
  }
  .hero-in { opacity: 1; transform: none; }
  .smoke { display: none; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__group { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 0.5rem; }
  [data-parallax] { transform: none !important; }
}

/* ------------------------------------------------------- league logos */
/* Official marks on cream tiles: several are dark (Premier League purple,
   Ligue 1 black, UCL navy) and would disappear on the navy page. */

.league-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.league-grid--leagues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .league-grid { gap: 1rem; }
  .league-grid--uefa { max-width: 880px; margin-inline: auto; width: 100%; }
  .league-grid--leagues { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.league-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 0.9rem;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-primary);
  box-shadow: var(--ds-shadow-card);
  transition: transform var(--ds-dur-hover) var(--ds-ease-out), box-shadow var(--ds-dur-hover) ease;
}
.league-tile--big { height: 132px; }
.league-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.league-tile:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-card-hover); }

@media (min-width: 768px) {
  .league-tile { height: 112px; }
  .league-tile--big { height: 168px; padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .league-tile:hover { transform: none; }
}