/* =========================================================
   Lumina Voyages — Design System
   Coastal-luxe: ocean & teal, warmed by coral. Light, airy, modern.
   ========================================================= */

:root {
  /* --- Surfaces & ink (cool-warm whites, deep teal-slate ink) --- */
  --bg:            oklch(0.985 0.006 220);
  --bg-2:          oklch(0.965 0.010 215);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.975 0.008 215);
  --ink:           oklch(0.28 0.035 235);
  --ink-2:         oklch(0.46 0.028 232);
  --ink-3:         oklch(0.62 0.022 230);
  --hairline:      oklch(0.90 0.012 225);
  --hairline-2:    oklch(0.84 0.016 224);

  /* --- Ocean / coastal palette --- */
  --ocean-deep:    oklch(0.42 0.095 235);
  --ocean:         oklch(0.55 0.110 228);
  --ocean-bright:  oklch(0.66 0.115 222);
  --teal:          oklch(0.74 0.085 196);
  --teal-soft:     oklch(0.93 0.040 196);
  --ocean-tint:    oklch(0.95 0.024 222);

  /* --- Warm accent (coral / sand) --- */
  --coral:         oklch(0.72 0.140 38);
  --coral-deep:    oklch(0.64 0.150 36);
  --coral-soft:    oklch(0.94 0.045 50);
  --sand:          oklch(0.93 0.030 78);
  --gold:          oklch(0.80 0.110 78);

  /* --- Type --- */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* --- Shadows (soft, coastal light) --- */
  --sh-sm: 0 1px 2px oklch(0.5 0.05 235 / 0.06), 0 2px 6px oklch(0.5 0.05 235 / 0.05);
  --sh-md: 0 4px 14px oklch(0.45 0.06 235 / 0.08), 0 2px 6px oklch(0.45 0.06 235 / 0.05);
  --sh-lg: 0 18px 50px oklch(0.40 0.07 235 / 0.13), 0 6px 18px oklch(0.40 0.07 235 / 0.07);
  --sh-xl: 0 30px 80px oklch(0.38 0.08 235 / 0.18), 0 10px 30px oklch(0.38 0.08 235 / 0.09);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --maxw: 1240px;

  /* --- Theme-adaptive surfaces --- */
  --nav-bg:    oklch(0.99 0.004 220 / 0.88);
  --search-bg: oklch(1 0 0 / 0.93);
  --footer-bg: oklch(0.17 0.026 234);
}

/* =========================================================
   Dark mode overrides
   ========================================================= */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            oklch(0.12 0.014 235);
  --bg-2:          oklch(0.10 0.012 235);
  --surface:       oklch(0.16 0.016 235);
  --surface-2:     oklch(0.19 0.018 235);
  --ink:           oklch(0.93 0.006 220);
  --ink-2:         oklch(0.74 0.012 225);
  --ink-3:         oklch(0.54 0.015 228);
  --hairline:      oklch(0.21 0.014 230);
  --hairline-2:    oklch(0.27 0.016 228);
  --ocean-tint:    oklch(0.18 0.025 222);
  --coral-soft:    oklch(0.21 0.040 50);
  --teal-soft:     oklch(0.18 0.030 196);
  --sand:          oklch(0.28 0.022 78);
  --sh-sm: 0 1px 2px oklch(0 0 0 / 0.28), 0 2px 6px oklch(0 0 0 / 0.22);
  --sh-md: 0 4px 14px oklch(0 0 0 / 0.35), 0 2px 6px oklch(0 0 0 / 0.22);
  --sh-lg: 0 18px 50px oklch(0 0 0 / 0.50), 0 6px 18px oklch(0 0 0 / 0.28);
  --sh-xl: 0 30px 80px oklch(0 0 0 / 0.60), 0 10px 30px oklch(0 0 0 / 0.32);
  --nav-bg:    oklch(0.11 0.014 235 / 0.94);
  --search-bg: oklch(0.17 0.020 235 / 0.97);
  --footer-bg: oklch(0.08 0.012 235);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

::selection { background: var(--coral-soft); color: var(--coral-deep); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocean);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* --- Layout helpers --- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  transition: transform 0.45s var(--spring), box-shadow 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--coral); color: white; box-shadow: 0 6px 18px oklch(0.72 0.14 38 / 0.32); }
.btn-primary:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 12px 28px oklch(0.68 0.15 37 / 0.4); }

.btn-ocean { background: var(--ocean); color: white; box-shadow: 0 6px 18px oklch(0.55 0.11 228 / 0.3); }
.btn-ocean:hover { background: var(--ocean-deep); transform: translateY(-2px); box-shadow: 0 12px 28px oklch(0.5 0.11 230 / 0.4); }

.btn-ink { background: var(--ink); color: white; }
.btn-ink:hover { background: oklch(0.22 0.035 235); transform: translateY(-2px); }

.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-1px); }

.btn-soft { background: var(--ocean-tint); color: var(--ocean-deep); }
.btn-soft:hover { background: var(--teal-soft); }

.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* =========================================================
   Chips / Badges
   ========================================================= */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 0.82rem; font-weight: 600;
  background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: all 0.3s var(--ease);
  cursor: pointer; white-space: nowrap;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--ocean); color: var(--ocean); }
.chip.active { background: var(--ink); color: white; box-shadow: none; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge-coral { background: var(--coral-soft); color: var(--coral-deep); }
.badge-ocean { background: var(--ocean-tint); color: var(--ocean-deep); }
.badge-teal  { background: var(--teal-soft); color: oklch(0.42 0.07 200); }
.badge-glass { background: oklch(1 0 0 / 0.85); color: var(--ink); backdrop-filter: blur(8px); box-shadow: var(--sh-sm); }

/* =========================================================
   Cards & placeholders
   ========================================================= */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

/* Scenic photo wrapper — replaces gradient placeholders */
.scenic-wrap { position: relative; overflow: hidden; background: var(--ocean-tint); }
.scenic-wrap .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Hero background: Santorini aerial via Unsplash */
.th-santorini { background-image: url("https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?auto=format&fit=crop&w=1600&q=80"); background-size: cover; background-position: center; }

/* soft glow blob used decoratively */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; z-index: 0; }

/* =========================================================
   Forms
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.input, .select, textarea.input {
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink);
  background: var(--surface); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: box-shadow 0.25s var(--ease); outline: none;
}
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, textarea.input:focus { box-shadow: inset 0 0 0 2px var(--ocean); }
.select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23456' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* =========================================================
   Motion / reveal
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: 0.08s; }
  .reveal-d2 { transition-delay: 0.16s; }
  .reveal-d3 { transition-delay: 0.24s; }
  .reveal-d4 { transition-delay: 0.32s; }
}

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slideOver { from { transform: translateX(100%); } to { transform: translateX(0); } }

.anim-fade-up { animation: fadeUp 0.6s var(--ease-out) both; }
.anim-scale-in { animation: scaleIn 0.5s var(--ease-out) both; }

/* star rating */
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }

/* divider */
.hr { height: 1px; background: var(--hairline); border: 0; width: 100%; }

/* toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--ink); color: white; padding: 14px 22px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.9rem; z-index: 200; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 10px;
  transition: transform 0.5s var(--spring);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* skeleton shimmer */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-2) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

/* =========================================================
   Dark mode: fix hardcoded white backgrounds
   ========================================================= */
/* Glass badges that use hardcoded white */
[data-theme="dark"] .badge-glass {
  background: oklch(0.22 0.025 235 / 0.88);
  color: var(--ink);
}

/* Sticky tab bar in detail page — replaces inline oklch(1 0 0 / 0.85) */
.sticky-tabs {
  background: var(--nav-bg) !important;
}

/* Save button uses hardcoded white bg */
[data-theme="dark"] .save-btn {
  background: oklch(0.22 0.025 235 / 0.9) !important;
}

/* Print styles */
@media print {
  header, footer, .save-btn, .book-aside, .order-summary { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  a { text-decoration: underline; color: #000; }
}

/* Better focus styles for accessibility */
:focus-visible {
  outline: 2.5px solid var(--ocean-bright);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--ocean-bright);
  outline-offset: 2px;
}

/* Mobile nav hamburger / drawer */
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
}
.mobile-nav-overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.1 0.02 235 / 0.55);
  backdrop-filter: blur(4px);
}
.mobile-nav-panel {
  position: relative;
  width: min(340px, 90vw);
  background: var(--surface);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xl);
  animation: slideOver 0.35s var(--ease-out) both;
  overflow-y: auto;
}
.hamburger-btn {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .hamburger-btn { display: flex !important; }
}

/* Improve mobile input & button tap targets */
@media (max-width: 720px) {
  .btn { min-height: 44px; }
  .input, .select { min-height: 44px; font-size: 16px; } /* 16px prevents iOS zoom */
  .chip { padding: 10px 16px; }
}

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

/* =========================================================
   Enhanced Reveal Animations — directional variants
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
  .reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
  .reveal-scale { opacity: 0; transform: scale(0.88);       transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
  .reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; transform: none; }

  /* Stagger delays for grid children */
  .stagger > *:nth-child(1) { transition-delay: 0.00s; }
  .stagger > *:nth-child(2) { transition-delay: 0.09s; }
  .stagger > *:nth-child(3) { transition-delay: 0.18s; }
  .stagger > *:nth-child(4) { transition-delay: 0.27s; }
  .stagger > *:nth-child(5) { transition-delay: 0.36s; }
  .stagger > *:nth-child(6) { transition-delay: 0.45s; }
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.11 228 / 0.4); }
  50%       { box-shadow: 0 0 0 14px oklch(0.55 0.11 228 / 0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1.5deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-30px) translateX(12px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
}
@keyframes countUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { width: 0; } to { width: 60px; } }
@keyframes borderPulse {
  0%, 100% { border-color: oklch(0.55 0.11 228 / 0.3); }
  50%       { border-color: oklch(0.55 0.11 228 / 0.9); }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0) translateY(-100%); opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 0; }
}

/* =========================================================
   Glassmorphism utility
   ========================================================= */
.glass {
  background: oklch(1 0 0 / 0.12);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid oklch(1 0 0 / 0.18);
}
[data-theme="dark"] .glass {
  background: oklch(0.18 0.018 235 / 0.65);
  border-color: oklch(1 0 0 / 0.08);
}

/* =========================================================
   Gradient text
   ========================================================= */
.gradient-text {
  background: linear-gradient(135deg, var(--ocean-bright), var(--teal), var(--coral));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

/* =========================================================
   Scroll progress bar (top of page)
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ocean), var(--teal), var(--coral));
  z-index: 9999;
  transform-origin: left;
  transition: width 0.1s linear;
}

/* =========================================================
   Enhanced Tour Card hover
   ========================================================= */
.card {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 28px 60px oklch(0.40 0.07 235 / 0.18), 0 10px 24px oklch(0.40 0.07 235 / 0.10);
}
.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--ocean-tint), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.card:hover .card-glow::after { opacity: 1; }

/* =========================================================
   Animated counter numbers
   ========================================================= */
.stat-number {
  display: inline-block;
  animation: countUp 0.6s var(--ease-out) both;
}

/* =========================================================
   Hero particles
   ========================================================= */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleDrift linear infinite;
}

/* =========================================================
   Section eyebrow underline animation
   ========================================================= */
.eyebrow-line::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--ocean), var(--coral));
  border-radius: 2px;
  margin-top: 8px;
  width: 0;
  animation: lineGrow 0.8s var(--ease-out) 0.3s forwards;
}
.reveal.in .eyebrow-line::after { animation: lineGrow 0.8s var(--ease-out) forwards; }

/* =========================================================
   Magnetic button shimmer
   ========================================================= */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.25), transparent);
  transform: skewX(-20deg);
  transition: none;
}
.btn-shimmer:hover::before {
  left: 160%;
  transition: left 0.6s var(--ease);
}

/* =========================================================
   Destination tile hover
   ========================================================= */
.dest-tile {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.dest-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 24px 50px oklch(0.3 0.05 235 / 0.3);
  z-index: 2;
}

/* =========================================================
   Stats animated underline
   ========================================================= */
.stat-item {
  position: relative;
  cursor: default;
  transition: transform 0.3s var(--spring);
}
.stat-item:hover { transform: translateY(-4px); }

/* =========================================================
   Why Lumina feature icon glow on hover
   ========================================================= */
.why-icon {
  transition: transform 0.4s var(--spring), background 0.3s var(--ease), box-shadow 0.4s;
}
.why-icon:hover, .why-item:hover .why-icon {
  transform: scale(1.15) rotate(-6deg);
  background: var(--ocean-tint);
  box-shadow: 0 8px 24px oklch(0.55 0.11 228 / 0.25);
}

/* =========================================================
   Category card shimmer border on hover
   ========================================================= */
.cat-card {
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--ocean) 0%, var(--teal) 50%, var(--coral) 100%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  z-index: 0;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cat-card:hover::before { opacity: 1; }

/* =========================================================
   Floating scroll indicator in hero
   ========================================================= */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: oklch(1 0 0 / 0.7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: floaty 2.5s ease-in-out infinite;
}
.scroll-hint-line {
  width: 1.5px;
  height: 40px;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.8), transparent);
  transform-origin: top;
  animation: scrollLine 1.5s ease-in-out infinite;
}