/* ═══════════════════════════════════════════════════════════
   JULY'S FOOD — HERO V2 (index-02.html preview)
   Cinematic full-bleed slider · Ken Burns zoom · line reveals ·
   gold progress rail · next-slide preview · premium framing
   ═══════════════════════════════════════════════════════════ */

.hero2{
  position:relative;
  min-height:calc(100vh - 118px);
  background:#3A2E50;
  color:var(--cream);
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------- slides ----------
   grid-stacking (grid-area 1/1) instead of absolute positioning:
   the hero grows with its tallest slide, so nothing gets cut
   off on small screens */
.hero2-slides{display:grid;flex:1}
.hero2-slide{
  grid-area:1/1;position:relative;display:flex;width:100%;
  opacity:0;visibility:hidden;z-index:1;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.hero2-slide.is-active{opacity:1;visibility:visible;z-index:2}

/* background photo + slow cinematic zoom */
.hero2-bg{position:absolute;inset:0;overflow:hidden}
.hero2-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.12);
}
.hero2-slide.is-active .hero2-bg img{animation:h2kenburns 9s var(--ease) forwards}
@keyframes h2kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}

/* purple cinematic overlay — keeps text readable, brand mood */
.hero2-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(51,41,70,.92) 0%,rgba(58,46,80,.72) 42%,rgba(74,58,99,.35) 75%,rgba(51,41,70,.55) 100%),
    linear-gradient(0deg,rgba(42,33,60,.85) 0%,transparent 34%);
}
/* subtle grain texture */
.hero2-slide::before{
  content:'';position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:2;
  background-image:radial-gradient(rgba(255,244,226,.09) 1px,transparent 1px);
  background-size:26px 26px;
}

/* ---------- copy + visual (2 columns) ---------- */
.hero2-inner{
  position:relative;z-index:3;
  width:min(1240px,92%);margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;
  align-items:center;
  padding:70px 0 150px;
}
.hero2-copy{max-width:640px}

/* staggered line reveals — replay on every slide change */
.hero2-inner .rv{
  opacity:0;transform:translateY(38px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hero2-slide.is-active .rv{opacity:1;transform:translateY(0)}
.hero2-slide.is-active .hero2-copy .rv:nth-child(1){transition-delay:.25s}
.hero2-slide.is-active .hero2-copy .rv:nth-child(2){transition-delay:.4s}
.hero2-slide.is-active .hero2-copy .rv:nth-child(3){transition-delay:.55s}
.hero2-slide.is-active .hero2-copy .rv:nth-child(4){transition-delay:.72s}
.hero2-slide.is-active .hero2-visual{transition-delay:.65s}

/* ---------- right-side visual ---------- */
.hero2-visual{display:grid;place-items:center}

/* slide 1: logo orb — approved purple box, logo colours untouched */
.hero2-logo-orb{position:relative;width:min(380px,72vw);aspect-ratio:1}
.hero2-main-logo{
  width:62%;margin:19% auto;
  padding:26px;
  background:linear-gradient(145deg,#5B4879 0%,#4A3A63 55%,#3A2E50 100%);
  border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,218,120,.22);
  animation:orbFloat 7s ease-in-out infinite;
  line-height:0;
}
.hero2-main-logo img{width:100%;display:block}

/* slides 2 & 3: framed photo over the cinematic background */
.hero2-photo{
  width:min(430px,80vw);aspect-ratio:4/3.4;
  border-radius:var(--radius);overflow:hidden;position:relative;
  border:1.5px solid rgba(255,218,120,.55);
  box-shadow:0 40px 90px rgba(30,22,42,.55), inset 0 0 0 1px rgba(255,244,226,.08);
  animation:orbFloat 7s ease-in-out infinite;
}
.hero2-photo img{width:100%;height:100%;object-fit:cover;display:block}

.hero2-kicker{
  display:flex;align-items:center;gap:14px;
  font-size:.78rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:24px;
}
.hero2-kicker .kicker-line{background:var(--gold);width:52px}

.hero2-title{
  font-family:var(--serif);font-weight:600;line-height:1.02;
  font-size:clamp(3rem,7.6vw,6rem);color:var(--cream);
  margin-bottom:26px;
}
.hero2-title em{color:var(--gold);position:relative;white-space:nowrap}
.hero2-title em::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:13px;z-index:-1;
  background:linear-gradient(90deg,rgba(255,218,120,.30),rgba(255,218,120,.05));
  border-radius:7px;
}

.hero2-sub{
  max-width:520px;font-size:1.08rem;font-weight:300;line-height:1.7;
  color:rgba(255,244,226,.88);margin-bottom:38px;
}
.hero2-actions{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- thin gold frame ---------- */
.hero2-frame{
  position:absolute;inset:22px;z-index:4;pointer-events:none;
  border:1px solid rgba(255,218,120,.20);border-radius:26px;
}
/* corner accents */
.hero2-frame::before,.hero2-frame::after{
  content:'';position:absolute;width:34px;height:34px;
  border-color:rgba(255,218,120,.6);border-style:solid;
}
.hero2-frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:26px 0 0 0}
.hero2-frame::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 26px 0}

/* ---------- bottom control bar ---------- */
.hero2-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  width:min(1240px,92%);margin-inline:auto;
  display:flex;align-items:center;gap:26px;
  padding:20px 0 26px;
}
.hero2-count{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--cream);
  display:flex;align-items:baseline;gap:8px;min-width:74px;
}
.hero2-count b{font-size:1.7rem;font-weight:600;color:var(--gold)}
.hero2-count span{opacity:.55;font-size:.95rem}

.hero2-progress{
  flex:1;height:2px;border-radius:2px;background:rgba(255,244,226,.16);
  overflow:hidden;
}
.hero2-progress span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
.hero2-progress span.run{animation:h2prog var(--h2-dur,7s) linear forwards}
@keyframes h2prog{from{width:0}to{width:100%}}

.hero2-arrows{display:flex;gap:12px}
.hero2-arrow{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,244,226,.06);border:1px solid rgba(255,218,120,.4);
  color:var(--gold);font-size:1rem;
  backdrop-filter:blur(6px);
  transition:background .35s,color .35s,transform .35s var(--ease);
}
.hero2-arrow:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px)}

/* next-slide preview */
.hero2-thumb{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  background:rgba(255,244,226,.06);border:1px solid rgba(255,244,226,.18);
  border-radius:60px;padding:7px 22px 7px 7px;
  backdrop-filter:blur(6px);
  transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.hero2-thumb:hover{border-color:rgba(255,218,120,.55);background:rgba(255,244,226,.1);transform:translateY(-3px)}
.hero2-thumb img{
  width:58px;height:58px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(255,218,120,.5);
}
.hero2-thumb .ht-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.hero2-thumb small{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600;
}
.hero2-thumb b{
  font-family:var(--serif);font-size:.98rem;font-weight:600;color:var(--cream);
  max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero2{min-height:0}
  .hero2-inner{grid-template-columns:1fr;gap:28px;padding:40px 0 130px;text-align:center}
  .hero2-copy{max-width:100%;order:2}
  .hero2-visual{order:1}
  .hero2-kicker{justify-content:center}
  .hero2-sub{margin-inline:auto}
  .hero2-actions{justify-content:center}
  .hero2-logo-orb{width:min(210px,52vw)}
  .hero2-photo{width:min(320px,74vw);aspect-ratio:16/9}
  .hero2-thumb{display:none}
  .hero2-frame{inset:12px;border-radius:20px}
}
@media (max-width:640px){
  .hero2-title{font-size:clamp(2.3rem,10.5vw,3.2rem)}
  .hero2-sub{font-size:.95rem;margin-bottom:28px}
  .hero2-inner{padding:34px 0 118px}
  .hero2-controls{gap:14px;padding:14px 0 18px}
  .hero2-count{min-width:56px}
  .hero2-count b{font-size:1.35rem}
  .hero2-arrow{width:42px;height:42px;font-size:.85rem}
  .hero2-kicker{letter-spacing:.2em;font-size:.68rem}
  .hero2-logo-orb{width:min(180px,48vw)}
  .hero2-photo{width:min(280px,78vw)}
}