/* =====================================================
   JANNAT — iOS 26 Liquid Glass + Scroll Animations
   ===================================================== */

/* ── Custom properties ── */
:root {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-dark: rgba(10, 10, 20, 0.55);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  --glass-blur: blur(22px);
  --aurora1: #7b2ff7;
  --aurora2: #00cfff;
  --aurora3: #ff6ec7;
  --aurora4: #ffb347;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Page load fade ── */
body {
  animation: pageFade 0.6s var(--ease-out) both;
}
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =====================================================
   LIQUID GLASS HEADER
   ===================================================== */
.header {
  background: rgba(18, 18, 22, 0.72) !important;
  backdrop-filter: var(--glass-blur) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.3);
  transition: background 0.4s, box-shadow 0.4s;
}
.header.scrolled {
  background: rgba(10, 10, 14, 0.88) !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.45);
}

/* ── Glass logo shimmer on hover ── */
.logo {
  transition: opacity 0.2s;
  position: relative;
}
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.logo:hover::after { transform: translateX(100%); }

/* ── Search box glow ── */
.search-box { transition: box-shadow 0.3s; }
.search-box:focus-within {
  box-shadow: 0 0 0 2px rgba(123,47,247,0.5), 0 0 20px rgba(123,47,247,0.2);
}

/* =====================================================
   AURORA HERO
   ===================================================== */
.hero {
  position: relative;
  overflow: hidden;
}

/* Aurora layer behind photos */
.aurora-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    125deg,
    #1a0533 0%,
    #0d1a40 25%,
    #001a2c 50%,
    #0d1a40 75%,
    #1a0533 100%
  );
  background-size: 400% 400%;
  animation: auroraShift 12s ease infinite;
}
@keyframes auroraShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating blobs */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: blobFloat 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.aurora-blob.b1 {
  width: 500px; height: 500px;
  background: var(--aurora1);
  top: -100px; left: -80px;
  animation-delay: 0s;
}
.aurora-blob.b2 {
  width: 400px; height: 400px;
  background: var(--aurora2);
  top: 100px; right: -60px;
  animation-delay: -3s;
}
.aurora-blob.b3 {
  width: 350px; height: 350px;
  background: var(--aurora3);
  bottom: -60px; left: 38%;
  animation-delay: -6s;
}
@keyframes blobFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  33%       { transform: translateY(-30px) scale(1.05); }
  66%       { transform: translateY(20px) scale(0.97); }
}

/* Hero photo halves sit above aurora */
.hero-half { z-index: 3; }

/* Hero text overlay — no glass panel */
.hero-overlay {
  z-index: 5;
  animation: heroGlassIn 1s var(--ease-spring) 0.3s both;
}
@keyframes heroGlassIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.88); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.hero-logo {
  animation: logoReveal 1s var(--ease-spring) 0.5s both;
}
@keyframes logoReveal {
  from { opacity: 0; transform: translateY(30px); letter-spacing: 20px; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: 10px; }
}
.hero-tagline {
  animation: fadeUp 0.8s var(--ease-out) 0.85s both;
}
.hero-buttons {
  animation: fadeUp 0.8s var(--ease-out) 1s both;
}

/* Hero button hover */
.hero-btn {
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, background 0.2s;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.92) !important;
}
.hero-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background: #fff !important;
}

/* Promo strip glass */
.promo-strip {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* =====================================================
   SCROLL REVEAL — base states
   ===================================================== */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 0.75s;
  transition-timing-function: var(--ease-out);
  will-change: opacity, transform;
}
[data-anim="fade-up"]    { transform: translateY(48px); }
[data-anim="fade-down"]  { transform: translateY(-48px); }
[data-anim="fade-left"]  { transform: translateX(-60px); }
[data-anim="fade-right"] { transform: translateX(60px); }
[data-anim="scale-in"]   { transform: scale(0.88); filter: blur(4px); }
[data-anim="fade"]       { }

[data-anim].visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  will-change: opacity, transform;
}
[data-stagger].visible > *:nth-child(1)  { transition-delay: 0.05s; }
[data-stagger].visible > *:nth-child(2)  { transition-delay: 0.13s; }
[data-stagger].visible > *:nth-child(3)  { transition-delay: 0.21s; }
[data-stagger].visible > *:nth-child(4)  { transition-delay: 0.29s; }
[data-stagger].visible > *:nth-child(5)  { transition-delay: 0.37s; }
[data-stagger].visible > *:nth-child(6)  { transition-delay: 0.45s; }
[data-stagger].visible > *:nth-child(7)  { transition-delay: 0.53s; }
[data-stagger].visible > *:nth-child(8)  { transition-delay: 0.61s; }
[data-stagger].visible > *:nth-child(n+9){ transition-delay: 0.65s; }
[data-stagger].visible > * { opacity: 1; transform: none; }

/* =====================================================
   LIQUID GLASS INFO TILES
   ===================================================== */
.info-tile {
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.info-tile:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.info-tile::before {
  border-radius: 16px !important;
}
/* Glass shimmer border on hover */
.info-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
  pointer-events: none;
}
.info-tile:hover::after { opacity: 1; }

/* =====================================================
   LIQUID GLASS BRAND TILES
   ===================================================== */
.brand-img {
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
  box-shadow: none;
}
.brand-img {
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s, z-index 0s;
  z-index: 0;
}
.brand-img:hover {
  transform: scale(1.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
  z-index: 10;
  position: relative;
}
.brand-img img {
  transition: transform 0.5s var(--ease-out);
}
.brand-img:hover img { transform: scale(1.08); }
.brand-img span {
  transition: transform 0.3s var(--ease-spring);
}
.brand-img:hover span {
  transform: translateY(-4px);
}

/* =====================================================
   GLASS SECTION TITLES
   ===================================================== */
.centered-title, .links-title, .section-title {
  position: relative;
  display: inline-block;
}
.links-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--aurora1), var(--aurora2));
  border-radius: 2px;
  transition: width 0.6s var(--ease-out);
}
.links-title.visible::after { width: 100%; }

/* =====================================================
   LINKS SECTION — glass hover links
   ===================================================== */
.links-grid a {
  padding: 4px 0;
  position: relative;
  display: inline-block;
  transition: color 0.2s, transform 0.2s var(--ease-spring);
}
.links-grid a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--aurora1), var(--aurora2));
  transition: width 0.3s var(--ease-out);
}
.links-grid a:hover { color: #000; transform: translateX(4px); }
.links-grid a:hover::after { width: 100%; }

/* =====================================================
   OUTLINE BUTTON — liquid hover
   ===================================================== */
.outline-btn {
  position: relative;
  overflow: hidden;
  transition: color 0.3s, transform 0.2s var(--ease-spring);
  z-index: 0;
}
.outline-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.outline-btn:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
.outline-btn:hover::before { transform: scaleX(1); }

/* =====================================================
   PAYMENT ICONS — float in
   ===================================================== */
.icons-row {
  animation: fadeUp 0.8s var(--ease-out) both;
}
.pay {
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.pay:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =====================================================
   FOOTER — glass dark
   ===================================================== */
.footer {
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(123,47,247,0.12), transparent 70%);
  pointer-events: none;
}
.footer-col a {
  transition: color 0.2s, transform 0.2s var(--ease-spring);
  display: inline-block;
}
.footer-col a:hover {
  color: #fff !important;
  transform: translateX(4px);
}

/* =====================================================
   PROMO BUTTONS
   ===================================================== */
.promo-btn {
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring);
}
.promo-btn:hover {
  background: #fff;
  color: #000;
  transform: scale(1.04);
}

/* =====================================================
   GLOBAL UTILITY
   ===================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--aurora1), var(--aurora2));
  border-radius: 3px;
}

/* Selection color */
::selection {
  background: rgba(123,47,247,0.35);
  color: #fff;
}