/* Custom styles for The Ecosailor */

/* Alpine.js cloak support */
[x-cloak] {
  display: none !important;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prose overrides for article body */
.prose img {
  border-radius: 0.75rem;
}

.prose blockquote {
  border-left-color: #0284c7;
  font-style: italic;
}

/* Justify ONLY long-form article prose — never card excerpts, meta, captions
   or footer text (justify on short/clamped lines creates ugly word-gaps). */
.prose p,
.text-justify-body {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* But keep figure captions, lead/intro paragraphs and small print ragged-right */
.prose figcaption,
.prose .lead,
.prose p.lead {
  text-align: left;
  hyphens: manual;
}
/* Default is justify (above). If an explicit alignment IS provided — via an
   inline style or a WordPress alignment class — respect it instead. The editor
   has no alignment control, so authored paragraphs always fall back to justify. */
.prose p.has-text-align-left,
.prose p[style*="text-align:left"],
.prose p[style*="text-align: left"] { text-align: left; }
.prose p.has-text-align-center,
.prose p[style*="text-align:center"],
.prose p[style*="text-align: center"] { text-align: center; }
.prose p.has-text-align-right,
.prose p[style*="text-align:right"],
.prose p[style*="text-align: right"] { text-align: right; }

/* ---- Typography rhythm ---- */
h1, h2, h3, h4 {
  text-wrap: balance; /* avoids lonely last-word orphans on headings */
}
.font-serif {
  letter-spacing: -0.01em;
}
/* Tighten big display headings a touch for a sharper editorial feel */
.text-3xl, .text-4xl, .text-5xl,
.lg\:text-\[2\.75rem\] {
  letter-spacing: -0.02em;
}
/* Comfortable measure + rhythm for article bodies */
.prose {
  --tw-prose-body: #374151;
  line-height: 1.8;
}
.prose p {
  margin-top: 1.15em;
  margin-bottom: 1.15em;
}

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

/* Focus styles for accessibility — softer ring instead of a hard outline */
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35);
  border-radius: 0.375rem;
}

/* Wagtail userbar positioning */
.w-userbar {
  z-index: 9999 !important;
}

/* ---- Modern micro-interactions ---- */

/* Card lift on hover */
.card-hover {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.12),
              0 6px 12px -4px rgba(0, 0, 0, 0.08);
}

/* Image zoom on hover */
.img-zoom img,
.img-zoom > div {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.img-zoom:hover img,
.img-zoom:hover > div {
  transform: scale(1.06);
}

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent underline animation */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.3s ease;
}
.hover-underline:hover::after {
  width: 100%;
}

/* Section heading bar accent */
.section-heading {
  position: relative;
  padding-left: 1rem;
}
.section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0284c7, #38bdf8);
}

/* Badge pulse for "Breaking" / "New" */
.badge-pulse {
  animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Fade-in on scroll (pair with Alpine intersect) */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reading progress bar */
.reading-progress {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  height: 3px;
  transition: width 0.1s linear;
}

/* Ticker animation */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Category pill hover */
.category-pill {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}
.category-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(2, 132, 199, 0.35);
}

/* ============================================================
   POLISH PASS — scroll reveal, header, hero, logo, page-load
   All motion is gated behind prefers-reduced-motion (see bottom).
   ============================================================ */

/* ---- Logo: never squeeze, gentle hover ---- */
.site-logo {
  height: 2.5rem;          /* h-10 baseline */
  width: auto;
  max-width: 190px;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.site-logo:hover {
  transform: scale(1.04);
}
.site-logo-footer {
  height: 2.5rem;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* ---- Sticky header: subtle shrink + stronger elevation on scroll ---- */
.site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header .nav-row {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px -12px rgba(12, 18, 34, 0.22);
}
.site-header.is-scrolled .nav-row {
  height: 3.5rem; /* 56px, down from 64px */
}
.site-header.is-scrolled .site-logo {
  height: 2.15rem;
}

/* ---- Animated nav underline (active + hover) ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Variants */
.reveal-left  { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-scale { transform: scale(0.96); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  transform: none;
}

/* ---- Page load fade-in (whole document) ----
   Guarded behind `.js` so no-JS users never get a blank page. */
.js body {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.js body.page-loaded {
  opacity: 1;
}
/* Same safety for reveal: only hide when JS can bring it back */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---- Hero: slow Ken-Burns drift on the lead image ---- */
@keyframes ken-burns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}
.ken-burns {
  animation: ken-burns 18s ease-out forwards;
}
/* Pause the slow drift while hovering the lead (the group:hover zoom takes over) */
.group:hover .ken-burns {
  animation-play-state: paused;
}

/* ---- Animated gradient for hero / CTA bands ---- */
@keyframes gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.gradient-animate {
  background-size: 200% 200%;
  animation: gradient-pan 12s ease infinite;
}

/* ---- Article drop cap ---- */
.article-prose > p:first-of-type::first-letter {
  float: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 3.6rem;
  line-height: 0.82;
  font-weight: 700;
  padding: 0.1em 0.12em 0 0;
  margin-right: 0.02em;
  color: #0369a1;
}

/* ---- Reading progress bar (fixed, top of viewport) ---- */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #f43f5e);
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
  transition: width 0.12s linear;
}

/* ---- Soft shimmer on the "More / View all" links ---- */
.hover-underline {
  transition: color 0.2s ease;
}

/* ---- Accent top-border reveal on cards ---- */
.card-hover {
  position: relative;
}
.card-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.card-hover:hover::before {
  transform: scaleX(1);
}

/* ---- Respect reduced-motion: disable all non-essential animation ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  body { opacity: 1 !important; }
  .ken-burns { animation: none !important; }
}

/* ---- Tasteful rotation accents (auto-disabled by the reduced-motion block above) ---- */
/* Gentle continuous wobble — good for small badges/ribbons */
@keyframes wobble-tilt {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
.wobble-tilt { animation: wobble-tilt 3.5s ease-in-out infinite; transform-origin: center; }

/* Idle float + slight tilt — good for a hero/magazine cover (no hover transform on the same element) */
@keyframes float-tilt {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
.float-tilt { animation: float-tilt 6s ease-in-out infinite; }

/* Hover tilt — straightens/leans an element on hover (transition only, no idle conflict) */
.tilt-hover { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.tilt-hover:hover { transform: rotate(-1.5deg) scale(1.02); }

/* Slow continuous spin — for decorative ring/SVG accents only */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 22s linear infinite; }