/* ==========================================================
   Home banner (index.html .hero.hs, driven by script.js):
   text and tabs on the left, a photo frame on the right.
   A new photo opens like blinds over the last one.
   ========================================================== */
@property --b { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

.hero.hs { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.5vw, 56px); padding: 96px max(20px, 4vw) 26px; background: #070a12; isolation: isolate; }
.hs-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 12% 35%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%), radial-gradient(40% 50% at 100% 100%, #3d5afe24, transparent 70%); }

/* ---------- Left: text, tabs ---------- */
.hs-copy { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; opacity: var(--fade, 1); }
.hs .bulk-ribbon { position: relative; top: auto; left: auto; right: auto; align-self: flex-start; }
.hs-texts { display: grid; }
.hs-text { grid-area: 1 / 1; }
.hs-text[hidden] { display: block; visibility: hidden; }
.hs-text .eyebrow { margin-bottom: 16px; color: var(--accent); }
.hs-text h1 { font-size: clamp(40px, min(5.2vw, 8.2vh), 90px); }
.hs-text h1 em { font-family: inherit; font-weight: 300; background: linear-gradient(90deg, #ffd23f, var(--accent) 45%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.hs-text .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hs-text .line-in { display: block; transform: translateY(108%); transition: transform .5s var(--ease-cine); }
.loaded .hs-text.active .line-in { transform: none; transition: transform 1s var(--ease-cine) calc(.2s + var(--i, 0) * .12s); }
.hs-text > :not(h1) { opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .4s; }
.loaded .hs-text.active > :not(h1) { opacity: 1; transform: none; transition: opacity .7s calc(.35s + var(--d, 0) * .1s), transform .9s var(--ease-out) calc(.35s + var(--d, 0) * .1s); }
.hs-text > p:not(.eyebrow) { max-width: 520px; margin: 18px 0 24px; color: #c9d0dd; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.7; }
.hs-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.hs-place { padding-left: 16px; border-left: 2px solid var(--accent); font-size: 13px; line-height: 1.5; color: #9aa3b8; }

.hs-nav { display: flex; align-items: flex-end; gap: 18px; }
.hs-tabs { display: flex; flex: 1; gap: 8px; min-width: 0; }
.hs-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 2px 0 0; border: 0; background: none; color: #8f98ad; text-align: left; cursor: pointer; transition: color .3s; }
.hs-tab b { font: 700 12px Outfit, sans-serif; color: #ffffff70; transition: color .3s; }
.hs-tab span { overflow: hidden; font: 600 12.5px Outfit, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.hs-tab i { position: relative; display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: #ffffff1f; overflow: hidden; }
.hs-tab i:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), #ff2d46); transform: scaleX(0); transform-origin: left; }
.hs-tab:hover { color: #fff; }
.hs-tab.active { color: #fff; }
.hs-tab.active b { color: var(--accent); }
.hs-tab.active i:after { transform: scaleX(1); }
.hs-tab.run i:after { animation: hsBar 5s linear forwards; }
.hs.paused .hs-tab.run i:after { animation-play-state: paused; }
@keyframes hsBar { from { transform: scaleX(0); } }
.hs-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.hs-arrows { display: flex; gap: 8px; }
.hs .arrow { position: static; width: 46px; height: 46px; }

/* ---------- Right: photo frame ---------- */
.hs-stage { position: relative; min-height: 0; border-radius: 28px; overflow: hidden; background: #111827; box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--accent) 55%, #000); clip-path: inset(0 0 100% 0 round 28px); translate: 0 var(--py, 0); transition: clip-path 1.4s var(--ease-cine) .1s; }
.loaded .hs-stage { clip-path: inset(0 0 0 0 round 28px); }
.hs-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.hs-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
.hs-slide.active { z-index: 2; visibility: visible; }
.hs-slide.active:not(.settled) { -webkit-mask-image: linear-gradient(90deg, #000 var(--b), transparent var(--b)); mask-image: linear-gradient(90deg, #000 var(--b), transparent var(--b)); -webkit-mask-size: 20% 100%; mask-size: 20% 100%; animation: hsBlinds 1.25s var(--ease-cine) both; }
@keyframes hsBlinds { from { --b: 0%; } to { --b: 100%; } }
.hs-slide.active img { transform: scale(1.02); transition: transform 8s var(--ease-out); }
.hs-slide.leaving { z-index: 1; visibility: visible; }
.hs-slide.leaving img { transform: scale(1.08); filter: brightness(.6); transition: transform 1.25s var(--ease-cine), filter 1.25s; }
.hs-stage:after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(0deg, #070a12b0, transparent 35%), linear-gradient(200deg, color-mix(in srgb, var(--accent) 25%, transparent), transparent 40%); }
.hs-count { position: absolute; z-index: 4; top: 18px; left: 20px; padding: 7px 12px; border-radius: 10px; background: #0a0f1d99; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 13px Outfit, sans-serif; color: #c9d0dd; letter-spacing: .08em; }
.hs-count b { color: var(--accent); }
.hs-next { position: absolute; z-index: 4; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; border-radius: 16px; border: 1px solid #ffffff2e; background: #0a0f1da6; color: #fff; text-align: left; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .3s, transform .4s var(--ease-out); }
.hs-next img { width: 66px; height: 48px; border-radius: 10px; object-fit: cover; }
.hs-next span { display: flex; flex-direction: column; gap: 2px; }
.hs-next small { font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hs-next b { font: 700 14px Outfit, sans-serif; }
.hs-next i { margin-left: 4px; font-style: normal; transition: transform .3s; }
.hs-next:hover { border-color: var(--accent); transform: translateY(-2px); }
.hs-next:hover i { transform: translateX(4px); }

/* ---------- Tablets and phones: photo on top, text below ---------- */
@media (max-width: 900px) {
  .hero.hs { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; gap: 22px; padding: 84px 16px 24px; }
  .hs-stage { order: -1; aspect-ratio: 4 / 3.3; border-radius: 22px; translate: none; }
  .loaded .hs-stage { clip-path: inset(0 0 0 0 round 22px); }
  .hs-copy { gap: 18px; }
  .hs .bulk-ribbon { align-self: stretch; }
  .hs-tabs span { display: none; }
  .hs-next { right: 10px; bottom: 10px; padding: 5px 10px 5px 5px; }
  .hs-next img { width: 48px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-stage, .loaded .hs-stage { clip-path: none; transition: none; translate: none; }
  .hs-slide.active:not(.settled) { animation: none; -webkit-mask-image: none; mask-image: none; }
  .hs-slide img, .hs-slide.active img, .hs-slide.leaving img { transition: none; transform: none; }
  .hs-text .line-in, .hs-text > :not(h1) { transform: none !important; opacity: 1 !important; transition: none !important; }
}