/* =============================================================================
   SNEAKERA homepage — section styles. Loads after tokens.css + base.css.
   Order: navbar · hero · sporche · brand sections · full-width · storyboard ·
   midanim · cta-final · footer · responsive.
   ========================================================================== */

/* Navbar + footer chrome now live in base.css (shared across pages). */

/* ============================ HERO ============================ */
.sk-hero { position: relative; background: var(--sk-surface); padding: 140px var(--sk-margin) 40px;
  display: flex; justify-content: center; }
.sk-hero__stage { position: relative; width: 100%; max-width: 1328px;
  min-height: clamp(440px, 50vw, 720px); border-radius: var(--sk-radius-lg);
  background: var(--sk-surface-subtle); border: 1px solid var(--sk-border);
  overflow: clip; display: flex; align-items: center; }
.sk-hero__glow { position: absolute; left: 35%; top: 45%; transform: translate(-50%, -50%);
  width: 120%; height: 130%; pointer-events: none; filter: blur(120px); opacity: 0.55;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--sk-clean) 70%, transparent), transparent 70%) 20% 40%/60% 70% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--sk-restore) 60%, transparent), transparent 70%) 75% 60%/55% 65% no-repeat; }
.sk-hero__content { position: relative; z-index: 2; max-width: 620px;
  padding: clamp(2rem, 5vw, 111px); display: flex; flex-direction: column; gap: var(--sk-space-5); }
.sk-hero__title { color: var(--sk-fg); font-family: var(--sk-font-brand); } /* Fractul → Inter Tight fallback */
.sk-hero__sub { color: var(--sk-fg); max-width: 30ch; }
.sk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); margin-top: var(--sk-space-2); }
.sk-hero__shoe { position: absolute; z-index: 3; right: clamp(-60px, -2vw, 0px); top: 50%;
  width: clamp(420px, 56vw, 1050px); height: auto; transform: translateY(-50%) rotate(-6.3deg);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)); pointer-events: none; }

/* ============================ CONFIGURATORE RESTORE (invito) ============================ */
.sk-config { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem); background: var(--sk-surface); }
.sk-config__bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.75;
  background:
    radial-gradient(900px 520px at 16% 28%, color-mix(in srgb, var(--sk-restore) 30%, transparent), transparent 70%),
    radial-gradient(720px 520px at 92% 82%, color-mix(in srgb, var(--sk-clean) 14%, transparent), transparent 70%); }
.sk-config__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sk-config__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sk-space-5); }
.sk-config__title { font-family: var(--sk-font-brand); font-weight: 800; font-size: var(--sk-text-hero);
  line-height: 1.02; letter-spacing: var(--sk-tracking-headline); color: var(--sk-fg); }
.sk-config__title em { font-style: normal; color: var(--sk-accent); }
.sk-config__sub { font-size: var(--sk-text-lg); color: var(--sk-muted); max-width: 46ch; line-height: 1.5; }
.sk-config__actions { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); }
.sk-config__steps { display: flex; flex-wrap: wrap; gap: var(--sk-space-5); margin-top: var(--sk-space-2); }
.sk-config__steps li { display: flex; align-items: center; gap: var(--sk-space-2); font-size: var(--sk-text-sm); color: var(--sk-muted); }
.sk-config__steps span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--sk-accent); color: var(--sk-accent); font-weight: 700; font-size: var(--sk-text-xs); }
.sk-config__card { display: flex; flex-direction: column; gap: var(--sk-space-3); padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--sk-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
              color-mix(in srgb, var(--sk-surface-subtle) 68%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14), var(--sk-glow); }
.sk-config__card-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--sk-fg); }
.sk-config__step { font-size: var(--sk-text-xs); color: var(--sk-accent); padding: 4px 10px;
  border-radius: var(--sk-radius-pill); background: color-mix(in srgb, var(--sk-accent) 18%, transparent); }
.sk-config__rows { display: flex; flex-direction: column; }
.sk-config__row { display: flex; justify-content: space-between; padding: var(--sk-space-3) 0;
  border-bottom: 1px solid var(--sk-border); color: var(--sk-fg); font-size: var(--sk-text-sm); }
.sk-config__row span:first-child { color: var(--sk-muted); }
.sk-config__free { color: var(--sk-accent); font-weight: 600; }
.sk-config__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sk-space-3); }
.sk-config__total span:first-child { color: var(--sk-muted); }
.sk-config__amount { font-family: var(--sk-font-display); font-weight: 800; font-size: var(--sk-text-2xl); color: var(--sk-fg); }
.sk-config__card-cta { margin-top: var(--sk-space-2); width: 100%; cursor: default; }
@media (max-width: 900px) { .sk-config__inner { grid-template-columns: 1fr; } }

/* ============================ SPORCHE (problema) ============================ */
.sk-sporche { background: #000; padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.sk-sporche__grid { position: relative; display: grid;
  grid-template-columns: minmax(260px, 440px) 1fr; align-items: center;
  gap: var(--sk-space-6); min-height: clamp(340px, 42vw, 620px); }
.sk-sporche__title { font-family: var(--sk-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: var(--sk-tracking-headline);
  color: var(--sk-fg); position: relative; z-index: 2; }
.sk-sporche__img { position: relative; z-index: 1; width: 116%; max-width: none;
  justify-self: end; margin-right: -6%;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7)); }

/* ============================ BRAND SECTIONS (Clean/Protect/Restore) ============================ */
.sk-brandsec { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem); background: #121212; }
[data-theme="clean"].sk-brandsec   { background: radial-gradient(130% 120% at 82% 50%, color-mix(in srgb, var(--sk-clean) 9%, #131313), #0e0e0e); }
[data-theme="protect"].sk-brandsec { background: radial-gradient(130% 120% at 18% 50%, color-mix(in srgb, var(--sk-protect) 8%, #151310), #0e0e0e); }
[data-theme="restore"].sk-brandsec { background: radial-gradient(130% 120% at 82% 50%, color-mix(in srgb, var(--sk-restore) 9%, #131019), #0e0e0e); }
/* vertical liquid-glass reflection stripes (Home v2 "Reflects") */
.sk-brandsec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
  background: repeating-linear-gradient(90deg, transparent 0 66px, rgba(255,255,255,0.03) 66px 68px); }
/* EXACT Figma brand pattern (Blu/Giallo/Viola), tinted to accent via mask, 20% opacity */
.sk-brandsec__pattern, .sk-brandsec::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 0;
  pointer-events: none; width: min(80vw, 1000px); opacity: 0.2; background: var(--sk-accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: auto 100%; mask-size: auto 100%; }
[data-theme="clean"].sk-brandsec::after   { right: -2%; -webkit-mask-position: right center; mask-position: right center;
  -webkit-mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-clean.svg);   mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-clean.svg); }
[data-theme="protect"].sk-brandsec::after { left: -2%;  -webkit-mask-position: left center;  mask-position: left center;
  -webkit-mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-protect.svg); mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-protect.svg); }
[data-theme="restore"].sk-brandsec::after { right: -2%; -webkit-mask-position: right center; mask-position: right center;
  -webkit-mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-restore.svg); mask-image: url(https://sneakera.it/wp-content/uploads/2026/06/pat-restore.svg); }
.sk-brandsec__watermark { display: none; } /* replaced by the brand shape pattern (Home v2) */
.sk-brandsec__grid { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.32fr 1fr; align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); }
.sk-brandsec--reverse .sk-brandsec__grid { grid-template-columns: 1fr 1.32fr; }
.sk-brandsec__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sk-space-5); }
.sk-brandsec__title { color: var(--sk-accent); font-family: var(--sk-font-brand);
  font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1; letter-spacing: var(--sk-tracking-headline); }
.sk-brandsec__sub { font-family: var(--sk-font-display); font-weight: 700;
  font-size: var(--sk-text-2xl); line-height: 1.08; color: var(--sk-fg); }
.sk-brandsec__media { position: relative; }
.sk-brandsec__media img { display: block; filter: drop-shadow(0 30px 55px rgba(0,0,0,0.6)); }
.sk-brandsec__media--bleed-left  img { width: 122%; max-width: none; margin-left: -18%; }
.sk-brandsec__media--bleed-right img { width: 122%; max-width: none; margin-left: -4%; }
.sk-brandsec__media--card { border-radius: var(--sk-radius-card); overflow: hidden;
  aspect-ratio: 740 / 573; border: 1px solid var(--sk-border); }
.sk-brandsec__media--card img { width: 100%; height: 100%; object-fit: cover; object-position: left center; filter: none; }

/* ============================ FULL-WIDTH BAND ============================ */
.sk-fullwidth { background: var(--sk-surface); padding: var(--sk-space-5); }
.sk-fullwidth__card { position: relative; border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card); overflow: hidden; aspect-ratio: 1392 / 1005; width: 100%; }
.sk-fullwidth__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================ STORYBOARD (step1/step2) ============================ */
.sk-story { background: var(--sk-surface); padding-block: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.sk-story__row { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.sk-story--reverse .sk-story__row { flex-direction: row-reverse; }
.sk-story__media { flex: 1 1 56%; border-radius: var(--sk-radius-card); overflow: hidden;
  border: 1px solid var(--sk-border); aspect-ratio: 696 / 660; }
.sk-story__media img { width: 100%; height: 100%; object-fit: cover; }
.sk-story__text { flex: 1 1 40%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sk-space-5); }
.sk-story__title { font-family: var(--sk-font-display); font-weight: 800; font-size: var(--sk-text-3xl);
  line-height: 1; letter-spacing: var(--sk-tracking-subhead); color: var(--sk-accent); }
.sk-story__sub { font-family: var(--sk-font-display); font-weight: 700; font-size: var(--sk-text-2xl);
  color: var(--sk-fg); line-height: 1.08; }

/* ============================ MIDDLE ANIMATION (Restore→Clean) ============================ */
.sk-midanim { background: var(--sk-surface); padding-block: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.sk-midanim__media { flex: 1 1 56%; border-radius: var(--sk-radius-card); overflow: hidden;
  border: 1px solid var(--sk-border); display: grid; grid-template-rows: 1fr 1fr; aspect-ratio: 696 / 760; }
.sk-midanim__photo { width: 100%; height: 100%; object-fit: cover; }
.sk-midanim__steps { flex: 1 1 40%; position: relative; display: grid; align-items: center; }
.sk-midanim__step { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sk-space-5); transition: opacity var(--sk-dur-slow) var(--sk-ease), transform var(--sk-dur-slow) var(--sk-ease); }
.sk-midanim__step.is-next   { opacity: 0; transform: translateY(24px); pointer-events: none; }
.sk-midanim__step.is-active { opacity: 1; transform: none; }
.sk-midanim__title { font-family: var(--sk-font-display); font-weight: 800; font-size: var(--sk-text-3xl);
  line-height: 1; color: var(--sk-accent); }
.sk-midanim__sub { font-family: var(--sk-font-display); font-weight: 700; font-size: var(--sk-text-2xl); color: var(--sk-fg); }

/* ============================ CTA FINAL (staggered cards) ============================ */
.sk-ctafinal { background: var(--sk-surface); padding-block: clamp(3rem, 6vw, 5rem); }
.sk-ctafinal__inner { display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sk-ctafinal__copy { flex: 0 0 clamp(280px, 34%, 524px); display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--sk-space-5); }
.sk-ctafinal__title { color: var(--sk-accent); font-size: var(--sk-text-3xl); line-height: 1;
  letter-spacing: var(--sk-tracking-headline); }
.sk-ctafinal__sub { font-family: var(--sk-font-display); font-weight: 700; font-size: var(--sk-text-2xl); color: var(--sk-fg); }
.sk-ctafinal__grid { flex: 1 1 0; min-width: 0; display: flex; gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: stretch; height: clamp(360px, 38vw, 560px); }
.sk-ctafinal__card { flex: 1; border-radius: var(--sk-radius-card); overflow: hidden;
  border: 1px solid var(--sk-border); position: relative; height: 80%; }
.sk-ctafinal__card img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.sk-ctafinal__card--up   { align-self: flex-start; box-shadow: var(--sk-glow-clean); }
.sk-ctafinal__card--down { align-self: flex-end;   box-shadow: var(--sk-glow-protect); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .sk-sporche__grid { grid-template-columns: 1fr; text-align: left; }
  .sk-sporche__img { width: 100%; margin: 0; justify-self: center; }
  .sk-brandsec__grid, .sk-brandsec--reverse .sk-brandsec__grid { grid-template-columns: 1fr; }
  .sk-brandsec__media--bleed-left img, .sk-brandsec__media--bleed-right img { width: 100%; margin: 0; }
  .sk-story__row, .sk-story--reverse .sk-story__row, .sk-midanim .sk-story__row { flex-direction: column; }
  .sk-story__media, .sk-midanim__media { width: 100%; aspect-ratio: 4 / 3; }
  .sk-midanim__steps { gap: var(--sk-space-6); }
  .sk-midanim__step { grid-area: auto; position: relative; }
  .sk-midanim__step.is-next { opacity: 1; transform: none; pointer-events: auto; }
  .sk-ctafinal__inner { flex-direction: column; align-items: stretch; }
  .sk-ctafinal__grid { height: auto; }
  .sk-ctafinal__card, .sk-ctafinal__card--up, .sk-ctafinal__card--down { align-self: auto; height: auto; aspect-ratio: 3 / 4; }
  .sk-brandsec__watermark { font-size: clamp(3.5rem, 22vw, 7rem); }
}
@media (max-width: 768px) {
  .sk-hero { padding-top: 110px; }
  .sk-hero__stage { min-height: 0; flex-direction: column; align-items: flex-start;
    padding-bottom: clamp(180px, 60vw, 320px); }
  .sk-hero__content { padding: clamp(1.5rem, 7vw, 2.5rem); }
  .sk-hero__shoe { position: absolute; right: 50%; top: auto; bottom: -4%;
    transform: translateX(50%) rotate(-6.3deg); width: min(115%, 560px); }
  .sk-hero__sub { max-width: 100%; }
}