/* ΤΟΣΚΑΣ Real Estate — redesign — shared styles
   Small hand-written layer for things Tailwind utilities don't cover cleanly:
   fonts, scroll-reveal transitions, the marquee ribbon, and a few one-off
   effects (gallery hover zoom, custom scrollbar-less mobile nav). */

/* ---------- Fonts (self-hosted — see assets/fonts/) ----------
   Subset to Greek + Latin + digits/punctuation actually used on the site (no
   Cyrillic/Vietnamese), one static file per weight/style — matches what the
   Google Fonts CDN would have served, just vendored locally like js/lucide.js. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-500.woff2') format('woff2');
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; }
.font-serif { font-family: 'Cormorant Garamond', serif; }

/* ---------- Slim scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: #004261 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #004261; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #002d43; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .12s; }
.reveal-d2 { transition-delay: .24s; }
.reveal-d3 { transition-delay: .36s; }
.reveal-d4 { transition-delay: .48s; }

/* ---------- Marquee ribbon ---------- */
.ribbon-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Section tag arrow rule ---------- */
.section-tag::before { content: ''; display: inline-block; width: 1.8rem; height: 1px; background: #b8935a; }
.hero-eyebrow::before { content: ''; display: inline-block; width: 2rem; height: 1px; background: #b8935a; }

/* ---------- Nav underline ---------- */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #b8935a; transition: width .25s; }
.nav-link:hover::after { width: 100%; }

/* ---------- Bullet arrow for map link ---------- */
.map-link::after { content: '→'; }

/* ---------- Property card / gallery image zoom ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .5s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* ---------- Line clamp fallback (in case CDN build lacks it) ---------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(10,9,8,.95); z-index: 9999; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }

/* ---------- Sticky property bar ---------- */
.prop-sticky { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.prop-sticky.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Scroll-top button ---------- */
#scrollTop { opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; }
#scrollTop.visible { opacity: 1; pointer-events: auto; }