/* ── Cinematic Hero Styles ── */
/* Extrated from web-hero template */

.ta-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  max-height: 820px;
  min-height: 480px;
  overflow: hidden;
  background: #060E07;
  font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
}

/* Cinematic bars removed to cover full screen */
.ta-bar { display: none; }

/* ── Slides ─────────────────────────────────────────────────────────────────── */
.slides { position: absolute; inset: 0; z-index: 1; }

.slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: slide-fade 36s linear infinite;
  will-change: opacity;
}

.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: slide-kb 36s linear infinite;
  will-change: transform, filter;
}

/* Ken Burns — different transform-origin per slide creates different pan directions */
.s1 img { transform-origin: center center; }
.s2 img { transform-origin: right bottom; }
.s3 img { transform-origin: left top; }
.s4 img { transform-origin: center top; }
.s5 img { transform-origin: right center; }
.s6 img { transform-origin: left bottom; }
.s7 img { transform-origin: center bottom; }
.s8 img { transform-origin: right top; }
.s9 img { transform-origin: left center; }

/* Stagger each slide by 4s */
.s1, .s1 img { animation-delay:  0s; }
.s2, .s2 img { animation-delay:  4s; }
.s3, .s3 img { animation-delay:  8s; }
.s4, .s4 img { animation-delay: 12s; }
.s5, .s5 img { animation-delay: 16s; }
.s6, .s6 img { animation-delay: 20s; }
.s7, .s7 img { animation-delay: 24s; }
.s8, .s8 img { animation-delay: 28s; }
.s9, .s9 img { animation-delay: 32s; }

/* Fade: in at 2.78% (1s), hold to 11.1% (4s), out by 13.9% (5s) */
@keyframes slide-fade {
  0%     { opacity: 0; }
  2.78%  { opacity: 1; }
  11.11% { opacity: 1; }
  13.89% { opacity: 0; }
  100%   { opacity: 0; }
}

/* Ken Burns: scale 1→1.13, blur morph on entry/exit, brightness flare */
@keyframes slide-kb {
  0%     { transform: scale(1.00); filter: blur(14px) brightness(1.65); }
  2.78%  { transform: scale(1.03); filter: blur(0px)  brightness(1.00); }
  13.89% { transform: scale(1.13); filter: blur(0px)  brightness(1.00); }
  15.5%  { transform: scale(1.15); filter: blur(14px) brightness(1.65); }
  100%   { transform: scale(1.15); filter: blur(14px) brightness(1.65); }
}

/* ── Light flare ────────────────────────────────────────── */
.flare {
  position: absolute; inset: 0; z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255,238,165,0.92) 0%,
    rgba(215,168,78,0.42)  16%,
    transparent            52%);
  opacity: 0;
  animation: flare-pulse 36s linear infinite;
}
@keyframes flare-pulse {
  0%,    11.8%, 13.2%, 22.9%, 24.3%, 34.0%, 35.4%, 45.1%, 46.5%,
  56.2%, 57.6%, 67.4%, 68.8%, 78.5%, 79.9%, 89.6%, 91.0%, 100% { opacity: 0; }
  12.5%  { opacity: 0.62; }
  23.6%  { opacity: 0.62; }
  34.7%  { opacity: 0.62; }
  45.8%  { opacity: 0.62; }
  56.9%  { opacity: 0.62; }
  68.1%  { opacity: 0.62; }
  79.2%  { opacity: 0.62; }
  90.3%  { opacity: 0.62; }
}

/* ── Grade ───────────────────────────────────────────────── */
.grade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.grade::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 26%, rgba(0,52,72,0.40) 100%);
}
.grade::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 68% 18%, rgba(195,132,52,0.22) 0%, transparent 52%);
}

.overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4,10,5,0.44) 0%,
    rgba(4,10,5,0.18) 46%,
    rgba(4,10,5,0.62) 100%);
}

.vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.74) 100%);
}

.grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* ── Bokeh ── */
.bokeh { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.b {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,210,0.9) 0%, rgba(200,168,95,0.18) 58%, transparent 100%);
  animation: b-float ease-in-out infinite;
}
.b1  { width:140px; height:140px; left:7%;  top:28%; filter:blur(58px);  opacity:.055; animation-duration:7.2s;  }
.b2  { width:88px;  height:88px;  left:19%; top:64%; filter:blur(37px);  opacity:.048; animation-duration:9.4s;  }
.b3  { width:112px; height:112px; left:41%; top:17%; filter:blur(47px);  opacity:.065; animation-duration:8.1s;  }
.b4  { width:158px; height:158px; left:57%; top:74%; filter:blur(66px);  opacity:.040; animation-duration:11.5s; }
.b5  { width:98px;  height:98px;  left:71%; top:37%; filter:blur(41px);  opacity:.058; animation-duration:10.2s; }
.b6  { width:74px;  height:74px;  left:86%; top:61%; filter:blur(31px);  opacity:.050; animation-duration:8.7s;  }
.b7  { width:122px; height:122px; left:32%; top:81%; filter:blur(51px);  opacity:.044; animation-duration:12.1s; }
.b8  { width:84px;  height:84px;  left:92%; top:21%; filter:blur(35px);  opacity:.055; animation-duration:9.0s;  }
.b9  { width:132px; height:132px; left:64%; top:11%; filter:blur(55px);  opacity:.042; animation-duration:10.8s; }
.b10 { width:78px;  height:78px;  left:13%; top:51%; filter:blur(33px);  opacity:.060; animation-duration:7.6s;  }

@keyframes b-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-13px); }
}

/* ── Content ── */
.ta-content {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(140px, 15vw, 240px) 24px;
  text-align: center;
  gap: 0;
}

@media (max-width: 768px) {
    .ta-hero {
        margin-top: 0 !important; /* Subtle shift down to clear nav pill */
    }
}

/* Navbar transparency utility */
/* Navbar transparency utility */
.nav-transparent {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 1000 !important;
}

/* Move hero up to sit BEHIND the navbar, matching other pages' layout */


.ta-logo {
  width: clamp(180px, 26vw, 400px);
  height: auto;
  filter: drop-shadow(0 6px 34px rgba(0,0,0,0.78));
  animation: logo-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes logo-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

.ta-tagline {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.38em;
  margin-top: 18px;
  font-size: clamp(13px, 2vw, 24px);
  color: #F0EDE8;
  font-style: italic;
  letter-spacing: 0.18em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.88);
}
.ta-tagline .w {
  display: inline-block;
  opacity: 0; transform: translateY(18px);
  animation: word-up 0.55s cubic-bezier(0.25,1,0.5,1) forwards;
}
.ta-tagline .w:nth-child(1) { animation-delay: 0.9s;  }
.ta-tagline .w:nth-child(2) { animation-delay: 1.1s;  }
.ta-tagline .w:nth-child(3) { animation-delay: 1.3s;  }
.ta-tagline .w:nth-child(4) { animation-delay: 1.5s;  }
.ta-tagline .w:nth-child(5) { animation-delay: 1.7s;  }
.ta-tagline .w:nth-child(6) { animation-delay: 1.9s;  }
@keyframes word-up {
  to { opacity: 1; transform: translateY(0); }
}

.ta-divider {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #E2C48A, transparent);
  margin-top: 22px;
  animation: divider-grow 1s ease-out 2.3s forwards;
}
@keyframes divider-grow {
  to { width: clamp(180px, 28vw, 420px); }
}

.ta-borough-label {
  margin-top: 17px;
  font-size: clamp(8px, 0.85vw, 12px);
  color: #C8A96A;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.82);
  opacity: 0;
  animation: fade-up-hero 0.6s ease-out 2.7s forwards;
}

.ta-ticker-wrap {
  margin-top: 11px;
  width: 100vw;
  overflow: hidden;
  opacity: 0;
  animation: fade-up-hero 0.6s ease-out 2.9s forwards;
}
.ta-ticker {
  display: flex;
  width: max-content;
  animation: ticker-run 52s linear infinite;
}
.ta-ticker-item {
  display: flex; align-items: center; gap: 9px;
  padding: 0 20px;
  color: #F0EDE8;
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 0.06em;
  opacity: 0.76;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.82);
}
.ta-ticker-item em { color: #C8A96A; font-style: normal; font-size: 8px; }

@keyframes ticker-run {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ta-cta-hero {
  position: absolute;
  bottom: clamp(44px, 10vw, 96px);
  right: clamp(18px, 5vw, 80px);
  z-index: 20;
  display: inline-block;
  background: #C8A96A;
  color: #060E07;
  padding: 13px 26px;
  border-radius: 4px;
  font-size: clamp(10px, 1.1vw, 14px);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 36px rgba(0,0,0,0.55);
  opacity: 0;
  animation: pop-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 3.1s forwards;
  transition: transform 0.3s ease, background 0.3s ease;
}
.ta-cta-hero:hover {
  transform: scale(1.05);
  background: #E2C48A;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

.ta-url {
  display: none;
}

@keyframes fade-up-hero {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .ta-bar { height: 24px; }
  .ta-borough-label, .ta-ticker-wrap { display: none; }
  .ta-cta-hero { font-size: 11px; padding: 10px 16px; letter-spacing: 0.10em; bottom: 40px; right: 20px; }
  .ta-url { display: none; }
}