/* ============================================================
   REGUS MARINE – animations.css
   Preloader · Wave dividers · Tilt · AOS · Decorative layers
   ============================================================ */

/* ── Preloader ─────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-logo {
  width: 90px; height: 90px;
  animation: preloader-pulse 1.5s ease infinite;
}
@keyframes preloader-pulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(201,162,39,0.6)); }
}

.preloader-bar-wrap {
  width: 220px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.preloader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-600));
  background-size: 200% 100%;
  border-radius: 2px;
  animation: preloader-progress 1.8s ease forwards, shimmer-bar 1s linear infinite;
}
@keyframes preloader-progress { 0%{width:0%} 100%{width:100%} }
@keyframes shimmer-bar { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.preloader-text {
  font-family: var(--font-h);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate-500);
  animation: preloader-dots 1.4s ease infinite;
}
@keyframes preloader-dots {
  0%,100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ── Wave SVG Dividers ─────────────────────────────────────── */
.wave-divider {
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 60px;
  overflow: hidden; line-height: 0;
  z-index: 2; pointer-events: none;
}
.wave-divider svg { display: block; }
.wave-divider.top-wave { bottom: auto; top: -2px; transform: rotateX(180deg); }

/* ── Animated Gradient Border ─────────────────────────────── */
@keyframes border-spin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.gradient-border {
  position: relative;
  border-radius: var(--r-md);
}
.gradient-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--gold-600), var(--gold-300), var(--navy-400),
    var(--gold-300), var(--gold-600));
  background-size: 300% 100%;
  animation: border-spin 4s linear infinite;
  z-index: -1;
}

/* ── Shimmer Effect on Gold Elements ──────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-gold {
  background: linear-gradient(90deg,
    var(--gold-500) 0%, var(--gold-200) 40%,
    var(--gold-500) 60%, var(--gold-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ── Typing Cursor ─────────────────────────────────────────── */
.cursor-blink::after {
  content: '|';
  color: var(--gold-400);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Card Tilt (CSS-only shimmer on hover) ────────────────── */
.tilt-card {
  transition: transform 0.3s var(--ease);
  transform-style: preserve-3d;
}
.tilt-card:hover { transform: perspective(900px) rotateY(-2deg) rotateX(2deg) scale(1.02); }

/* ── Floating Animation ────────────────────────────────────── */
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}
.float-anim { animation: float 4s ease-in-out infinite; }
.float-anim-slow { animation: float 6s ease-in-out infinite; }

/* ── Glow Pulse ────────────────────────────────────────────── */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(201,162,39,0.15); }
  50%      { box-shadow: 0 0 50px rgba(201,162,39,0.45); }
}
.glow-pulse { animation: glow-pulse 3s ease infinite; }

/* ── Number Counter Glow ───────────────────────────────────── */
@keyframes num-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.counter.counted { animation: num-pop 0.4s ease both; }

/* ── Section entrance animations ──────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ── Section Image styles ──────────────────────────────────── */
.img-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.img-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,162,39,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.img-frame:hover img { transform: scale(1.04); }

/* Corner decorations on image frame */
.img-frame .corner-tl,
.img-frame .corner-br {
  position: absolute; width: 50px; height: 50px;
  border-color: var(--gold-500); border-style: solid; z-index: 3;
  opacity: 0.6;
}
.img-frame .corner-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.img-frame .corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 4px; }

/* Badge overlay on image */
.img-badge {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  background: rgba(5,16,31,0.88);
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: var(--r-sm);
  padding: 0.65rem 1rem;
  backdrop-filter: blur(12px);
  z-index: 4;
}
.img-badge .b-num { font-family: var(--font-h); font-size: 1.5rem; font-weight: 900; color: var(--gold-300); line-height: 1; }
.img-badge .b-lbl { font-size: 0.72rem; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.15rem; }

/* Floating label on top-right of image */
.img-float-tag {
  position: absolute;
  top: 1.5rem; right: -1rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  color: var(--navy-800);
  font-family: var(--font-h);
  font-size: 0.75rem; font-weight: 800;
  padding: 0.4rem 1.2rem;
  border-radius: var(--r-full);
  box-shadow: 0 6px 24px rgba(201,162,39,0.45);
  animation: float 3.5s ease-in-out infinite;
  white-space: nowrap; z-index: 4;
}

/* ── Orbit ring (decorative) ───────────────────────────────── */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.12);
  pointer-events: none;
  animation: orbit-spin 20s linear infinite;
}
@keyframes orbit-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── Horizontal scroll ticker ──────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  padding: 0.9rem 0;
  background: linear-gradient(90deg, var(--navy-900), rgba(13,43,94,0.5), var(--navy-900));
  border-top: 1px solid rgba(201,162,39,0.12);
  border-bottom: 1px solid rgba(201,162,39,0.12);
  position: relative; z-index: 1;
}
.ticker-inner {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ticker-move 30s linear infinite;
}
.ticker-inner:hover { animation-play-state: paused; }
@keyframes ticker-move { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-h); font-size: 0.82rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.7); white-space: nowrap;
  transition: color 0.3s;
}
.ticker-item:hover { color: var(--gold-300); }
.ticker-dot { color: var(--gold-400); font-size: 0.6rem; }

/* ── Stats bar / progress bars ─────────────────────────────── */
.prog-bar-wrap { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.prog-item { display: flex; flex-direction: column; gap: 0.4rem; }
.prog-head { display: flex; justify-content: space-between; font-size: 0.83rem; color: var(--slate-300); }
.prog-track { height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  border-radius: 3px;
  transition: width 1.5s ease;
}

/* ── Image grid mosaic ─────────────────────────────────────── */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 1rem;
}
.mosaic .m1 { grid-column: 1; grid-row: 1 / 3; }
.mosaic .m2 { grid-column: 2; grid-row: 1; }
.mosaic .m3 { grid-column: 2; grid-row: 2; }
.mosaic-img {
  width: 100%; height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.mosaic-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.7s ease; }
.mosaic-img:hover img { transform: scale(1.06); }
.mosaic-img .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,16,31,0.6), transparent);
}

/* ── Animated background mesh ──────────────────────────────── */
.mesh-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,162,39,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
}

/* ── Highlight card (services section) ────────────────────── */
.svc-card.featured {
  grid-column: span 2;
  display: flex; gap: 1.5rem; align-items: center;
  padding: 1.75rem 2rem; text-align: left;
  background: linear-gradient(135deg, rgba(22,53,120,0.65), rgba(13,43,94,0.7));
  border-color: rgba(201,162,39,0.3);
}
.svc-card.featured .svc-icon { flex-shrink: 0; width: 80px; height: 80px; font-size: 2rem; }
.svc-card.featured h3 { font-size: 1.1rem; }
.svc-card.featured p  { font-size: 0.88rem; max-width: 480px; }

/* ── scroll-to-top button ──────────────────────────────────── */
#scrolltop {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-800); font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 6px 24px rgba(201,162,39,0.45);
  cursor: pointer; border: none;
  opacity: 0; transform: translateY(16px);
  transition: all 0.4s var(--ease);
  z-index: 800;
}
#scrolltop.show { opacity: 1; transform: translateY(0); }
#scrolltop:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 30px rgba(201,162,39,0.6); }

/* ── Notification bar (top of page) ───────────────────────── */
#topbar {
  background: linear-gradient(90deg, var(--gold-600), var(--gold-500), var(--gold-600));
  background-size: 200% 100%;
  animation: shimmer-bar 4s linear infinite;
  color: var(--navy-900);
  text-align: center;
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  letter-spacing: 0.05em;
  position: relative; z-index: 1001;
}
#topbar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#topbar-close {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--navy-800); font-size: 1rem; cursor: pointer; line-height: 1;
}

/* ── Responsive adjustments ────────────────────────────────── */
@media (max-width: 768px) {
  .mosaic { grid-template-columns: 1fr; grid-template-rows: 200px 200px 200px; }
  .mosaic .m1 { grid-row: 1; }
  .mosaic .m2 { grid-row: 2; }
  .mosaic .m3 { grid-row: 3; }
  .svc-card.featured { flex-direction: column; text-align: center; grid-column: span 1; }
  .img-float-tag { right: 0.5rem; }
  #scrolltop { bottom: 1.5rem; right: 1.5rem; }
}