/* ═══════════════════════════════════════════════════════════════
   HOME.CSS — Stili specifici della homepage
   Hero, Carousel, Stats
   ═══════════════════════════════════════════════════════════════ */

/* ────────── HERO ────────── */
#hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:linear-gradient(155deg,#1c1c1c 0%,#111 80%);position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;bottom:0;right:0;width:100%;height:100%;background:radial-gradient(circle at bottom right,rgba(245,200,0,.18) 0%,transparent 30%);pointer-events:none;z-index:0}
.hero-text{position:relative;z-index:2;padding:120px 56px 80px 60px;display:flex;flex-direction:column;justify-content:center}
@keyframes fUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes maskUp{from{opacity:0;transform:translateY(30px);clip-path:inset(100% 0 -50% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(-50% 0 -50% 0)}}
.hero-line1{font-family:var(--fh);font-size:clamp(44px,5.6vw,84px);font-weight:900;color:var(--white);line-height:1;letter-spacing:1px;opacity:0;animation:maskUp 1s var(--ease) 2s forwards}
.hero-brand{font-family:var(--ff);font-size:clamp(44px,5.6vw,84px);color:var(--yellow);line-height:1;letter-spacing:1px;margin-bottom:28px;opacity:0;animation:maskUp 1s var(--ease) 2.1s forwards}
.hero-sub{font-family:var(--fb);font-size:clamp(15px,1.4vw,17px);color:rgba(255,255,255,.5);font-weight:400;max-width:400px;line-height:1.75;margin-bottom:36px;opacity:0;animation:fUp .7s var(--ease) 2.28s forwards}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fUp .7s var(--ease) 2.42s forwards}

/* ═══════════════════════════════════════════════════
   CAROSELLI — struttura desktop e mobile
   ═══════════════════════════════════════════════════ */

/* Wrapper lato destro dell'hero (desktop) */
.hero-reels{
  height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.reel-outer{
  width:155px;
  height:100%;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.reel-inner{
  position:absolute;
  top:0;
  left:0;
  width:155px;
  display:flex;
  flex-direction:column;
  gap:14px;
  will-change:transform;
}

/* Bande orizzontali mobile */
.mob-reel{
  display:none;
  width:100%;
  height:auto;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.mob-reel .reel-inner{
  position:relative;
  top:auto;left:auto;
  flex-direction:row;
  gap:12px;
  width:max-content;
}

/* ─── Tile (card) ─── */
.tile{
  width:155px;
  aspect-ratio:3/4;
  border-radius:var(--r);
  overflow:hidden;
  flex-shrink:0;
  position:relative;
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  transition:transform .3s var(--ease);
}
.tile:hover{transform:scale(1.05);z-index:2}

/* Icona play */
.tile .play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.tile .play-btn svg{margin-left:3px}

/* Badge views */
.tile .views-badge{
  position:absolute;bottom:9px;left:9px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  border-radius:var(--rb);padding:3px 10px;
  font-family:var(--fb);font-size:11px;font-weight:700;color:var(--white);
  display:flex;align-items:center;gap:5px;
}
.tile .views-badge .tri{color:var(--yellow);font-size:9px}

/* Tile piccola (mobile) */
.tile.sm{width:90px}

/* ────────── STATS ────────── */
.stats-band{background:var(--yellow);padding:20px 60px;display:grid;grid-template-columns:1fr}
.stat-item{text-align:center;padding:0 20px}
.stat-num{font-family:var(--ff);font-size:clamp(52px,10vw,110px);color:var(--black);line-height:1;letter-spacing:-1px}
.stat-label{font-family:var(--fb);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.55);margin-top:10px;font-weight:700}

/* ────────── RESPONSIVE HOME ────────── */
@media(max-width:1024px){
  .hero-text{padding:100px 28px 60px}
}
@media(max-width:768px){
  /* hero: flex column, bande mobile sopra e sotto */
  #hero{grid-template-columns:1fr;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .hero-reels{display:none}
  .hero-text{order:2;padding:24px 20px 28px;flex:1;justify-content:center}
  .mob-reel{display:block}
  #mobReel1{order:1;padding-top:68px;padding-bottom:6px}
  #mobReel2{order:3;padding-top:6px;padding-bottom:20px}
  .stats-band{padding:36px 20px}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column}
}