/* Homepage hero slider.
   Layers (z): photos 0 · scrim / light sweep / bokeh / gold glow 1 · text + form 2 · controls 3. */

.hero-slider { --hs-num: clamp(96px, 9vw, 144px); } /* size of the slide symbol */
.hs-bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slider .hero-media::before { display: none; } /* replaced by .hs-scrim, tuned for readable text */

/* ---------- readability: a dark scrim under the text, whatever the photo ---------- */
.hs-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,16,11,.92) 0%, rgba(6,16,11,.76) 34%, rgba(6,16,11,.34) 62%, rgba(6,16,11,.14) 100%),
    linear-gradient(0deg, rgba(6,16,11,.80) 0%, rgba(6,16,11,0) 40%),
    linear-gradient(180deg, rgba(6,16,11,.38) 0%, rgba(6,16,11,0) 24%);
}
@media (max-width: 959px) { /* text sits over the whole photo on tablet/phone: darker, even */
  .hs-scrim { background: linear-gradient(180deg, rgba(6,16,11,.74) 0%, rgba(6,16,11,.58) 46%, rgba(6,16,11,.88) 100%); }
}

/* ---------- baseline (works with no motion): cross-fade ---------- */
.hs-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.hs-bg.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hs-bg.is-leaving { opacity: 1; visibility: visible; z-index: 1; } /* stays underneath while the next one arrives; JS removes it */

.hs-copy { display: grid; }
.hs-text { grid-area: 1 / 1; position: relative; max-width: 780px; opacity: 0; visibility: hidden; pointer-events: none; }
.hs-text.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease .15s; }
.hs-text.is-leaving { visibility: visible; opacity: 0; transition: opacity .3s ease; }

/* symbol above the headline: a gold medallion with a drawing inside, sized by --hs-num */
.hs-sym { display: block; width: var(--hs-num); height: var(--hs-num); margin-bottom: var(--sp-4); overflow: visible; pointer-events: none;
  fill: none; stroke: #F2C566; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.hs-sym .ring { fill: rgba(6,16,11,.5); stroke: rgba(242,197,102,.75); stroke-width: 1.3; }
.hs-sym .o { stroke: rgba(242,197,102,.6); stroke-width: 1.5; stroke-dasharray: 1 5.2; }
.hs-sym .f { fill: rgba(242,197,102,.16); }
.hs-sym .d { stroke-width: 1.05; stroke: rgba(242,197,102,.85); }

/* ---------- typography ---------- */
.hs-title {
  font-size: var(--hero); line-height: var(--lh-tight); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
[data-lang="te"] .hs-title { font-size: calc(var(--hero) * .85); line-height: 1.25; }
.hs-title::after { content: ""; display: block; width: 96px; height: 4px; border-radius: 2px; background: var(--grad-warm); margin-top: var(--sp-5); transform-origin: left; box-shadow: 0 0 18px rgba(217,164,65,.6); }
.hs-text .desc {
  max-width: 50ch; margin-top: var(--sp-5); font-size: var(--lead); line-height: var(--lh-body);
  color: rgba(255,255,255,.96); text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.hs-text .hero-actions { margin-top: var(--sp-6); }
.hs-text .hero-actions .btn { padding: var(--sp-4) var(--sp-7); }

/* ---------- ambience: bokeh + light sweep (motion-only, below) ---------- */
.hs-bokeh, .hs-sweep { display: none; }

/* ---------- controls ---------- */
.hero-slider .hero-content { padding-bottom: calc(var(--sp-7) + 60px); }
.hs-controls { position: absolute; left: 0; right: 0; bottom: var(--sp-5); z-index: 3; }
.hs-controls .container { display: flex; align-items: center; gap: var(--sp-3); }
.hs-dots { display: flex; gap: var(--sp-3); flex: 1; min-width: 0; }
.hs-dot { background: none; border: 0; padding: 16px 0; width: clamp(34px, 8vw, 72px); cursor: pointer; }
.hs-bar { display: block; position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.32); }
.hs-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F2C566, var(--color-accent)); transform: scaleX(0); transform-origin: left; }
.hs-dot.is-active .hs-bar::after { animation: hs-progress var(--hs-dur, 6500ms) linear forwards; }
.hero-slider.is-paused .hs-dot.is-active .hs-bar::after { animation-play-state: paused; }
@keyframes hs-progress { to { transform: scaleX(1); } }

.hs-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hs-btn:hover, .hs-btn:focus-visible { background: var(--color-accent); color: var(--green-900); border-color: var(--color-accent); transform: scale(1.06); }

/* "Up next" preview card (desktop) */
.hs-ups { display: none; }
@media (min-width: 1024px) {
  .hs-ups { display: block; position: relative; width: 260px; height: 66px; flex: none; margin-right: var(--sp-2); }
  .hs-up {
    position: absolute; inset: 0; display: flex; align-items: center; gap: var(--sp-3); padding: 7px 14px 7px 7px; cursor: pointer; text-align: left; color: #fff;
    background: rgba(6,16,11,.55); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-xl);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transform: translateX(22px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color var(--dur) var(--ease);
  }
  .hs-up.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .35s; }
  .hs-up:hover { border-color: var(--color-accent); }
  .hs-up-img { width: 64px; height: 52px; flex: none; border-radius: 9px; background: var(--color-primary-light) center / cover no-repeat; }
  .hs-up-t { display: grid; min-width: 0; }
  .hs-up-t small { font-size: var(--xs); letter-spacing: .08em; text-transform: uppercase; color: #F2C566; font-weight: 700; }
  .hs-up-t b { font-weight: 600; font-size: var(--small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- motion (only for visitors who haven't asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hs-rise     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes hs-in-left  { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }
  @keyframes hs-word     { from { opacity: 0; transform: translateY(.7em) rotate(4deg); } to { opacity: 1; transform: none; } }
  @keyframes hs-focus    { from { opacity: 0; filter: blur(14px); letter-spacing: .12em; } to { opacity: 1; filter: none; letter-spacing: -.01em; } }
  @keyframes hs-pop      { 0% { opacity: 0; transform: scale(.6) translateY(14px); } 100% { opacity: 1; transform: none; } }
  @keyframes hs-draw     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hs-spin     { to { transform: rotate(360deg); } }
  @keyframes hs-line     { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes hs-kenburns { from { transform: scale(1.02); } to { transform: scale(1.15) translate(-1.5%, -1%); } }
  @keyframes hs-sweep    { 0% { transform: skewX(-18deg) translateX(0); opacity: 0; } 18% { opacity: 1; } 100% { transform: skewX(-18deg) translateX(440%); opacity: 0; } }
  @keyframes hs-float    { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translateY(-120vh) scale(1.25); opacity: 0; } }

  /* 1 · zoom: long cross-fade while the photo keeps drifting in */
  .hs-bg[data-motion="zoom"] { transition: opacity 1.3s ease; }
  .hs-bg[data-motion="zoom"].is-active, .hs-bg[data-motion="zoom"].is-leaving { animation: hs-kenburns 11s ease-out both; }

  /* 2 · slide: pushes in from the right; whatever it covers drifts left more slowly (parallax) */
  .hs-bg[data-motion="slide"] { opacity: 1; translate: 100% 0; transition: translate 1.1s cubic-bezier(.77, 0, .18, 1); }
  .hs-bg[data-motion="slide"].is-active, .hs-bg[data-motion="slide"].is-leaving { translate: 0 0; }
  .hero-slider[data-next="slide"] .hs-bg.is-leaving { translate: -28% 0; transition: translate 1.1s cubic-bezier(.77, 0, .18, 1); }

  /* 3 · iris: opens like an eye from the centre while settling back from a zoom */
  .hs-bg[data-motion="iris"] { opacity: 1; clip-path: circle(0% at 50% 55%); scale: 1.25; transition: clip-path 1.4s cubic-bezier(.65, 0, .2, 1), scale 2.2s ease-out; }
  .hs-bg[data-motion="iris"].is-active, .hs-bg[data-motion="iris"].is-leaving { clip-path: circle(150% at 50% 55%); scale: 1; }

  /* 4 · blur: comes into focus, un-tilting as it fades in */
  .hs-bg[data-motion="blur"] { filter: blur(22px) saturate(1.4); scale: 1.12; rotate: 2deg; transition: opacity 1.2s ease, filter 1.5s ease, scale 1.8s ease-out, rotate 1.8s ease-out; }
  .hs-bg[data-motion="blur"].is-active, .hs-bg[data-motion="blur"].is-leaving { filter: none; scale: 1; rotate: 0deg; }

  /* subtle pointer parallax on the photos (fine pointers only; JS sets --px/--py) */
  .hero-slider.has-parallax .hs-bgs { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06); transition: transform .7s ease-out; }

  /* a soft golden light passes over the photo at every change */
  .hs-sweep { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .hs-sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; opacity: 0; background: linear-gradient(100deg, transparent, rgba(242,197,102,.26), rgba(255,255,255,.16), transparent); }
  .hs-sweep.go::before { animation: hs-sweep 1.4s cubic-bezier(.4, 0, .2, 1); }

  /* drifting golden bokeh */
  .hs-bokeh { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .hs-bokeh i { position: absolute; left: var(--x); bottom: -14%; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(242,197,102,.5), rgba(242,197,102,0) 70%); animation: hs-float var(--d) linear var(--dl) infinite; }

  /* the gold bar under every headline draws itself; the big number rises into place */
  .hs-text.is-active .hs-title::after { animation: hs-draw .8s cubic-bezier(.2, .7, .2, 1) .7s both; }
  /* the medallion draws first, then the picture; fills fade in once the lines are down */
  .hs-text.is-active .hs-sym *:not(.o) { stroke-dasharray: 100; animation: hs-line 1.6s cubic-bezier(.4, 0, .2, 1) .3s both; }
  .hs-text.is-active .hs-sym .ring { animation-delay: .1s; animation-duration: 1.2s; }
  .hs-text.is-active .hs-sym path:nth-of-type(2n) { animation-delay: .5s; }
  .hs-text.is-active .hs-sym path:nth-of-type(3n) { animation-delay: .7s; }
  .hs-sym .f { transition: fill .9s ease 1.3s; }
  .hs-text:not(.is-active) .hs-sym .f { fill: rgba(242,197,102,0); transition: none; }
  .hs-sym .o { transform-box: fill-box; transform-origin: center; animation: hs-spin 60s linear infinite; }

  /* text, per slide style */
  .hs-text[data-motion="zoom"].is-active > *,
  .hs-text[data-motion="iris"].is-active > :not(.hs-title),
  .hs-text[data-motion="blur"].is-active > :not(.hs-title):not(.hero-actions) { animation: hs-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hs-text[data-motion="slide"].is-active > * { animation: hs-in-left .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hs-text.is-active > :nth-child(2) { animation-delay: .12s; }
  .hs-text.is-active > :nth-child(3) { animation-delay: .27s; }
  .hs-text.is-active > :nth-child(4) { animation-delay: .42s; }
  .hs-text.is-active > :nth-child(5) { animation-delay: .56s; }

  .hs-text[data-motion="iris"].is-active .w { display: inline-block; animation: hs-word .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--i, 0) * 110ms); }
  .hs-text[data-motion="blur"].is-active .hs-title { animation: hs-focus 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hs-text[data-motion="blur"].is-active .hero-actions .btn { animation: hs-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .75s; }
  .hs-text[data-motion="blur"].is-active .hero-actions .btn + .btn { animation-delay: .9s; }
}

/* reduced motion: no autoplay animation, the active dot just shows as filled */
@media (prefers-reduced-motion: reduce) {
  .hs-dot.is-active .hs-bar::after { animation: none; transform: scaleX(1); }
  .hs-pause { display: none; }
}


/* ---------- phone feedback: button on each slide + popup form (phones only) ---------- */
.hs-feedback-wrap { display: none; }
.hs-feedback { background: rgba(6,16,11,.5); border-color: rgba(242,197,102,.6); color: #F2C566; gap: var(--sp-2); }
.hs-feedback:hover, .hs-feedback:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--green-900); }

dialog.fb-dialog { border: 0; padding: 0; background: transparent; width: min(94vw, 460px); max-height: 92vh; overflow: visible; }
dialog.fb-dialog::backdrop { background: rgba(6,16,11,.78); backdrop-filter: blur(3px); }
.fb-card {
  position: relative; max-height: 90vh; overflow-y: auto; padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--radius-xl);
  border-top: 4px solid var(--color-accent); color: #fff;
  background:
    radial-gradient(circle at 90% 0%, rgba(217,164,65,.28), transparent 50%),
    radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.8px) 0 0 / 22px 22px,
    var(--grad-primary);
  box-shadow: var(--shadow-lift);
}
.fb-close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); }
.fb-close:hover { background: rgba(255,255,255,.26); }
.fb-card .hero-form { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; max-width: none; animation: none; }
.fb-card .hero-form h2 { padding-right: 44px; }

/* ---------- tablet ---------- */
@media (max-width: 959px) {
  .hero-slider { --hs-num: clamp(88px, 13vw, 124px); }
  .hero-slider .hero-form { max-width: 560px; }
  .hs-text .desc { max-width: 60ch; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .hero-slider { --hs-num: 84px; }
  .hero-slider .hero-form { display: none; } /* the form opens from the per-slide button instead */
  .hs-feedback-wrap { display: block; margin-top: var(--sp-3); }
  .hs-feedback { width: 100%; padding: var(--sp-4) var(--sp-5); }
  .hero-slider .hero-content { padding-bottom: calc(var(--sp-6) + 56px); }
  .hs-title::after { margin-top: var(--sp-4); width: 72px; }
  .hs-text .hero-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); } /* full-width buttons */
  .hs-text .hero-actions .btn { width: 100%; padding: var(--sp-4) var(--sp-5); }
  .hs-btn { width: 40px; height: 40px; }
  .hs-prev, .hs-next { display: none; } /* swipe instead */
  .hs-bokeh i:nth-child(n+5) { display: none; }
}

/* phones: the 4th slide's title ("Places in Yellanda") stays on one line; the size shrinks just enough to fit */
@media (max-width: 640px) {
  .hs-text:nth-of-type(4) .hs-title { white-space: nowrap; font-size: min(var(--hero), 8.4vw); }
  [data-lang="te"] .hs-text:nth-of-type(4) .hs-title { font-size: min(calc(var(--hero) * .85), 8.4vw); }
}

/* hero: no "Up next" card and no pause / previous / next buttons (the slide dots stay) */
html:not(.yl-app) .hs-ups, html:not(.yl-app) .hs-controls .hs-btn { display: none !important; }

/* two-colour hero headlines */
.hs-title em { font-style: normal; color: var(--gold-light, #F2C566); }

/* Telugu hero buttons: larger text, as Telugu letters look small at the English size */
html[data-lang="te"] .hero-actions .btn, html[data-lang="te"] .hero-actions .btn span { font-size: 1.1875rem; line-height: 1.35; }
html[data-lang="te"] .hero-actions .btn { min-height: 54px; }
@media (max-width: 640px) { html[data-lang="te"] .hero-actions .btn, html[data-lang="te"] .hero-actions .btn span { font-size: 1.0625rem; } }
html[data-lang="te"] .hs-feedback, html[data-lang="te"] .hs-feedback span, html[data-lang="te"] .hs-feedback-wrap .btn, html[data-lang="te"] .hs-feedback-wrap .btn span { font-size: 1.1875rem !important; line-height: 1.35; }
html[data-lang="te"] .hs-feedback { min-height: 54px; }
@media (max-width: 640px) { html[data-lang="te"] .hs-feedback, html[data-lang="te"] .hs-feedback span { font-size: 1.0625rem !important; } }