/* =====================================================================
   Hacienda Kapok — custom styles
   Fonts, brand effects, and motion ported from the design source.
   Tailwind utilities live in css/tailwind.css (compiled separately).
   ===================================================================== */

/* === Brand typefaces (official, uploaded) =========================== */
@font-face {
  font-family: 'Aqunite';
  src: url('../assets/fonts/Aqunite.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aqunite Textured';
  src: url('../assets/fonts/Aqunite-Textured.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/fonts/HelveticaNeueBoldCond.otf') format('opentype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #2A1F18;
  background: #F8EFE8;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  letter-spacing: 0.005em;
}
.font-display          { font-family: 'Aqunite', Georgia, serif; }
.font-display-textured { font-family: 'Aqunite Textured', 'Aqunite', Georgia, serif; }
/* Aqunite is a hand-cut display — let it breathe. */
h1.font-display, h2.font-display { letter-spacing: 0.005em; }

/* Liquid glass — used for nav + buttons */
.liquid-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.12);
  transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
}
.liquid-glass-dark {
  background: rgba(20, 16, 12, 0.35);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 36px rgba(0, 0, 0, 0.35);
}

/* Fade rise — triggered when .in-view is added by IntersectionObserver */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise,
.animate-fade-rise-delay,
.animate-fade-rise-delay-2 { opacity: 0; will-change: opacity, transform; }
.in-view.animate-fade-rise         { animation: fade-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.in-view.animate-fade-rise-delay   { animation: fade-rise .9s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.in-view.animate-fade-rise-delay-2 { animation: fade-rise .9s cubic-bezier(.2,.7,.2,1) .4s forwards; }

/* Tour scene caption — subtle re-rise when active scene changes */
@keyframes tour-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);  }
}
.anim-tour-rise { animation: tour-rise .9s cubic-bezier(.2,.7,.2,1) both; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Hero — cinematic reveal of the background video */
@keyframes hero-video-in {
  from { opacity: 0; transform: scale(1.06); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1.0);  filter: blur(0);   }
}
.hero-media {
  opacity: 0;
  animation: hero-video-in 2.6s cubic-bezier(.2,.7,.2,1) .15s forwards;
  will-change: opacity, transform, filter;
}
/* Soft drift after reveal so the frame breathes even on a looping clip */
@keyframes hero-drift {
  0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
  100% { transform: scale(1.04) translate3d(0, -0.5%, 0); }
}
.hero-media.hero-drift {
  animation:
    hero-video-in 2.6s cubic-bezier(.2,.7,.2,1) .15s forwards,
    hero-drift 28s ease-in-out 2.8s infinite alternate;
}
/* Poster still — visible instantly (no fade), with the same slow breathing drift */
.hero-poster {
  opacity: 1;
  animation: hero-drift 28s ease-in-out 0s infinite alternate;
}

/* Motion typography — letters rise as a unified line */
@keyframes line-rise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
.hero-line { opacity: 0; animation: line-rise 1.4s cubic-bezier(.19,.74,.21,1) forwards; }
.hero-line-1 { animation-delay: 1.0s; }
.hero-line-2 { animation-delay: 1.35s; }
.hero-line-3 { animation-delay: 1.95s; }
.hero-line-4 { animation-delay: 2.35s; }
.hero-line-5 { animation-delay: 2.75s; }

/* Editorial video frame — calm reveal + sustained micro-zoom */
@keyframes editorial-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes editorial-zoom {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}
.editorial-video {
  opacity: 0;
  animation: editorial-reveal 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
.editorial-video-media {
  animation: editorial-zoom 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Bounce hint */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(10px); opacity: .5; }
}
.scroll-hint { animation: scroll-bounce 2.2s ease-in-out infinite; }

/* Sepia for legacy image */
.sepia-soft { filter: sepia(.55) contrast(1.02) saturate(.9) brightness(.95); }

/* Subtle paper grain for warm-stone backgrounds */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(184,113,60,.08) 1px, transparent 1px),
    radial-gradient(rgba(45,78,71,.05) 1px, transparent 1px),
    radial-gradient(rgba(216,138,133,.05) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px, 11px 11px;
  background-position: 0 0, 1px 1px, 2px 3px;
  mix-blend-mode: multiply;
  opacity: .7;
}

/* Masterplan lot hover */
.lot {
  fill: rgba(192, 160, 112, 0.10);
  stroke: rgba(192, 160, 112, 0.45);
  stroke-width: 1;
  transition: fill .25s ease, stroke .25s ease;
  cursor: pointer;
}
.lot:hover { fill: rgba(216, 138, 133, 0.55); stroke: #F3D7CF; }

/* Map dots ping */
@keyframes ping-soft {
  0% { transform: scale(1); opacity: .55; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}
.ping-soft { animation: ping-soft 2.4s cubic-bezier(0,0,.2,1) infinite; }

/* Parallax wrapper */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .parallax-bg { background-attachment: scroll; }
}

/* Pretty text wrapping for paragraphs */
p, h1, h2, h3 { text-wrap: pretty; }

/* Cover-fit YouTube background iframes (container-query units) */
.video-cover { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.video-cover iframe {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  width: max(100cqw, 177.778cqh);
  height: max(100cqh, 56.25cqw);
}

/* Lucide icons — match the design's lighter stroke */
svg.lucide { stroke-width: 1.6; }

/* Refined underlined form field with floating gold label */
.hk-field { position: relative; }
.hk-field input {
  display: block; width: 100%;
  padding: 1.75rem 0 0.75rem;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(243,228,220,0.25);
  color: #F3E4DC; font-size: 1.125rem; font-weight: 300;
  transition: border-color .3s ease;
}
.hk-field input:focus { outline: none; }
.hk-field label {
  position: absolute; left: 0; pointer-events: none;
  top: 1.5rem; font-size: 1rem; color: rgba(243,228,220,0.55); letter-spacing: 0.01em;
  transition: all .5s cubic-bezier(.2,.7,.2,1);
}
.hk-field input:focus ~ label,
.hk-field input:not(:placeholder-shown) ~ label {
  top: 0; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: #D4A574;
}
.hk-field .hk-underline {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: #D4A574; transition: width .7s cubic-bezier(.2,.7,.2,1);
}
.hk-field input:focus ~ .hk-underline { width: 100%; }

/* Reduced motion — show end-state without animating */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .animate-fade-rise, .animate-fade-rise-delay, .animate-fade-rise-delay-2,
  .hero-line, .hero-media, .editorial-video { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}