/* ═══════════════════════════════════════════════════════════
   EBBTIDE INVESTORS — styles.css
═══════════════════════════════════════════════════════════ */


/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --c-bg:           #16283b;
  --c-bg-rgb:       22, 40, 59;
  --c-white:        #ffffff;
  --c-dot:          rgba(255, 255, 255, 0.45);
  --c-dot-active:   rgba(255, 255, 255, 0.95);
  --c-btn:          rgba(255, 255, 255, 0.20);
  --c-btn-hover:    rgba(255, 255, 255, 0.40);
  --c-text-dim:     rgba(255, 255, 255, 0.80);

  --header-h:       88px;
  --header-h-mob:   64px;

  --ease-slide:     750ms cubic-bezier(0.77, 0, 0.18, 1);
  --ease-fade:      400ms ease;
}


/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── Base ───────────────────────────────────────────────── */
html {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(255, 255, 255, 0.2); }

body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}


/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  background: linear-gradient(
    to bottom,
    rgba(var(--c-bg-rgb), 0.72) 0%,
    rgba(var(--c-bg-rgb), 0.00) 100%
  );
}

.logo-link { display: block; line-height: 0; }

.logo-img {
  height: 56px;
  width: auto;
  transition: opacity 0.25s ease;
}
.logo-img:hover { opacity: 0.80; }


/* ══════════════════════════════════════════════════════════
   CAROUSEL WRAPPER
══════════════════════════════════════════════════════════ */
.carousel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-bg);
  overflow: hidden;
}


/* ── Track: all slides in a horizontal row ──────────────── */
.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--ease-slide);
  will-change: transform;
}

.carousel-track.is-dragging {
  transition: none;
}


/* ── Individual Slide ───────────────────────────────────── */
.slide {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* ── Background image ───────────────────────────────────── */
.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.10);
  transform: scale(1);
  transition: transform 8s ease-out;
}

.slide.is-active .slide-bg {
  transform: scale(1.02);
}

/* ── Vignette overlay ───────────────────────────────────── */
.slide-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(var(--c-bg-rgb), 0.45) 100%),
    linear-gradient(to bottom,
      rgba(var(--c-bg-rgb), 0.50) 0%,
      rgba(var(--c-bg-rgb), 0.10) 40%,
      rgba(var(--c-bg-rgb), 0.50) 100%
    );
}


/* ── Slide Copy ─────────────────────────────────────────── */
.slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding: calc(var(--header-h) + 2rem) 3.5rem 4rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease 0.35s, transform 0.65s ease 0.35s;
}

.slide.is-active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

.slide-quote,
.slide-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--c-white);
  max-width: 90%;
  white-space: normal;
  text-wrap: balance;
}

.slide-attribution,
.slide-locations {
  margin-top: 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}


/* ══════════════════════════════════════════════════════════
   ARROW CONTROLS
══════════════════════════════════════════════════════════ */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: var(--c-btn);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    background    var(--ease-fade),
    border-color  var(--ease-fade),
    opacity       var(--ease-fade),
    transform     var(--ease-fade);
}

.carousel:hover .carousel-btn { opacity: 1; }

.carousel-btn:hover {
  background: var(--c-btn-hover);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-50%) scale(1.06);
}

.carousel-btn svg   { width: 20px; height: 20px; transition: transform var(--ease-fade); }
.carousel-btn--prev:hover svg { transform: translateX(-1px); }
.carousel-btn--next:hover svg { transform: translateX(1px); }
.carousel-btn--prev { left: 1.5rem; }
.carousel-btn--next { right: 1.5rem; }


/* ══════════════════════════════════════════════════════════
   DOT NAVIGATION
══════════════════════════════════════════════════════════ */
.carousel-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 0;
  align-items: center;
}

.dot {
  position: relative;
  width: 30px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-dot);
  transform: translate(-50%, -50%);
  transition: background var(--ease-fade), transform var(--ease-fade);
}

.dot--active::before,
.dot:hover::before {
  background: var(--c-dot-active);
  transform: translate(-50%, -50%) scale(1.3);
}


/* ══════════════════════════════════════════════════════════
   KEYBOARD FOCUS
══════════════════════════════════════════════════════════ */
.carousel-btn:focus-visible,
.dot:focus-visible,
.logo-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
  border-radius: 50%;
}
.logo-link:focus-visible { border-radius: 4px; }


/* ══════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .site-header {
    height: var(--header-h-mob);
    justify-content: center;
  }

  .logo-img { height: 41px; }

  .slide-content {
    padding: calc(var(--header-h-mob) + 1.5rem) 1.5rem 5rem;
    align-items: flex-end;
    text-align: right;
  }

  .slide-quote,
  .slide-tagline {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 0.4rem;
    white-space: normal;
  }

  .slide-attribution,
  .slide-locations {
    font-size: 0.7rem;
    margin-top: 0.2rem;
  }

  .carousel-btn {
    width: 38px;
    height: 38px;
    opacity: 1;
  }

  .carousel-btn--prev { left: 0.75rem; }
  .carousel-btn--next { right: 0.75rem; }

  .carousel-dots { bottom: 0.4rem; }
}


/* ══════════════════════════════════════════════════════════
   MOBILE PORTRAIT FOCUS  (≤ 768px, portrait)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {

  .slide-bg[src*="slide1-copenhagen"] { object-position: 48.7% center; }
  .slide-bg[src*="slide6-rovinj"]     { object-position:  3.6% center; }
  .slide-bg[src*="slide2-crissy"]     { object-position: 20.0% center; }
  .slide-bg[src*="slide4-mermaid"]    { object-position: 90.9% center; }
  .slide-bg[src*="slide5-dock"]       { object-position: 98.1% center; }
  .slide-bg[src*="slide3-boat"]       { object-position: 27.5% center; }
}