/* Main styles for Hala Bag Store landing page */
:root{
  --gold:#d4a017;
  --overlay:rgba(0,0,0,0.58);
  --glass-bg:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.14);
}

/* To use Aeonik Pro, add the font files to assets and uncomment / update the @font-face below:
@font-face {
  font-family: 'Aeonik Pro';
  src: url('../assets/AeonikPro-Regular.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

html,body{
  height:100%;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

/* Show store poster image while video is loading */
body{
  background-image: url('store-bg-static.jpg');
  background-size:cover;
  background-position:center;
}

/* Background video stretches full viewport */
#bg-video{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:-2;
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease, visibility .6s ease;
}

#bg-video.ready{opacity:1;visibility:visible}

.video-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:-1;
}

.hero-content{
  min-height:100vh;
  padding-top:40px;
  padding-bottom:40px;
  z-index:0;
}

/* Logo */
.hala-text-logo{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight:800;
  letter-spacing:2px;
  margin:0;
  font-size:42px;
  animation:fadeUp 700ms ease forwards;
}
.hala-gold{color:var(--gold);}
.hala-white{color:#fff;font-size:14px;display:inline-block;margin-left:8px;font-weight:700}

/* Contact cards (glassmorphism) */
.contact-card{
  width:100%;
  max-width:520px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:18px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  color:#fff;
  transition:transform .28s ease, box-shadow .28s ease;
  animation:fadeUp 700ms ease forwards;
}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(0,0,0,0.35)}
.icon-circle{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
}

/*border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.06);*/

/* TikTok boxes */
.tiktok-row{max-width:1200px}
.tiktok-row{transition:transform .32s ease}
.tiktok-box{
  width:320px;height:200px;border-radius:18px;background:#ececec10;border:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;transition:transform .28s ease, box-shadow .28s ease;animation:fadeUp 700ms ease forwards;
}
.tiktok-box:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,0.28)}

.preview-video{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}

/* overlay shown on hover (desktop) */
.box-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .22s ease;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45));font-size:22px}
.tiktok-box:hover .box-overlay{opacity:1}

.box-overlay{z-index:3}

/* mobile arrows more prominent */
.arrow{width:64px;height:64px;border-radius:999px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.12);box-shadow:0 8px 20px rgba(0,0,0,0.35);font-size:1.4rem}
.arrow i{font-size:1.4rem}
.arrow{z-index:6}

/* modal sizing to fit viewport */
.modal-dialog{max-width:900px}
.modal-body video{max-height:calc(100vh - 160px);object-fit:contain;width:100%}

/* staggered animation delays for tiktok boxes */
.tiktok-box:nth-child(1){animation-delay:0.6s}
.tiktok-box:nth-child(2){animation-delay:0.9s}
.tiktok-box:nth-child(3){animation-delay:1.2s}

/* CTA */
.btn-tiktok{border-radius:999px;padding:10px 36px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.18);transition:transform .18s ease,box-shadow .18s ease}
.btn-tiktok:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.22)}

/* TikTok themed button */
.btn-tiktok{
  background:linear-gradient(90deg,#010101 0%, #111 50%);
  color:#fff;border:0;padding:10px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:.6rem}
.btn-tiktok svg{display:block}
.btn-tiktok svg{width:18px;height:18px}
.tiktok-icon{width:22px;height:22px;filter:invert(1) brightness(2)}

/* WhatsApp button */
.btn-whatsapp{background:#25D366;color:#fff;border:0;padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:.6rem}
.btn-whatsapp:hover{filter:brightness(.95)}

/* Title and rotating word */
.page-title{font-family:'Outfit', 'Helvetica Neue', Arial, sans-serif;font-size:30px;font-weight:800;margin:0}
.dynamic-word{color:var(--gold);display:inline-block;min-width:110px}
.fade-out{opacity:0;transition:opacity .35s ease}
.fade-in{opacity:1;transition:opacity .35s ease}

/* Decorative lines */
.decor-lines .line{display:block;background:rgba(255,255,255,0.28);height:10px;border-radius:999px}
.decor-lines .line-1{width:58%}
.decor-lines .line-2{width:46%}
.decor-lines .line-3{width:30%}

/* Footer */
.site-footer{position:relative}

/* Arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;border-radius:999px;width:52px;height:52px;display:none!important;align-items:center;justify-content:center}
.left-arrow{left:8px}
.right-arrow{right:8px}

/* Animations */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* Animation delays for primary elements */
.hala-text-logo{animation-delay:0.2s}
.contact-card{animation-delay:0.4s}
.btn-tiktok{animation:fadeUp 700ms ease .9s both}

/* Responsive adjustments */
@media (max-width:767px){
  .hala-text-logo{font-size:32px}
  .tiktok-box{width:100%;height:150px}
  .decor-lines .line{height:8px}
  .arrow.d-none.d-md-flex{display:none!important}
}

/* Mobile carousel view: when JS adds .mobile-view */
.tiktok-row.mobile-view{overflow:hidden}
.tiktok-row.mobile-view .tiktok-box{min-width:100%;flex:0 0 100%;max-width:100%}
.tiktok-row.mobile-view{gap:0}

/* Limit description width for readability */
.store-desc{max-width:900px;margin-left:auto;margin-right:auto}

@media (min-width:768px){
  .contact-row .col-md-4{max-width:360px}
}

/* Ensure no horizontal overflow */
body,html{overflow-x:hidden}