/* /public/assets/css/pages/home.css */
/* Home-only styles. Scoped to body.page--home to avoid conflicts with style.css. */

/*
  Velora UI-first Dark (Flat / Calm / Engineered) — HOME page tuning.

  Goals:
  - no big section plates / vignettes / heavy gradients inside content
  - no glow/halo on kicker/buttons/icons
  - keep micro-interactions (lift 2–4px) + reveal animations
  - hero background stays "systemic" (body layers), home.css only adds minimal dot-mask + layout

  This file intentionally leans on tokens from style.css:
  --bg/--ink/--muted/--card/--border/--borderSoft/--shadow/--shadow2/--a
*/

.page--home .main{ padding-top:0; }

/* ============================================================ */
/* HERO                                                          */
/* ============================================================ */

.page--home .hero--home{
  position:relative;
  padding:64px 0 92px;
  overflow:hidden;

  /* IMPORTANT: no decorative plates/gradients here.
     The systemic background lives on body::before/after in style.css. */
  background: rgba(0,0,0,.001);
}

/* Remove vignette/breath overlay from old design */
.page--home .hero--home::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* Only a very subtle top fade to help header blend (NOT a vignette). */
  background: linear-gradient(180deg, rgba(5,5,5,.70) 0%, rgba(5,5,5,0) 220px);
  opacity:.55;

  transform: translateZ(0);
}

.page--home .hero-eco{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* If you still use an eco image, keep it calm, no "poster" look */
.page--home .hero-eco__img{
  position:absolute;
  right:2%;
  top:46px;
  width:min(980px, 58vw);
  height:auto;
  opacity:.70;
  transform:translateZ(0);

  /* No strong masks; keep it subtle (still fade edges a bit) */
  -webkit-mask-image: radial-gradient(circle at 60% 38%, #000 0%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.22) 68%, transparent 86%);
          mask-image: radial-gradient(circle at 60% 38%, #000 0%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.22) 68%, transparent 86%);

  /* no color tricks / no glow */
  filter:none;

  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference){
  .page--home .hero-eco__img{ animation: homeEcoFloat 18s var(--ease) infinite; }
}

/* Quiet dot field inside hero (light) */
.page--home .hero--home::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:.30;
  mask-image:radial-gradient(circle at 42% 34%, #000 0%, transparent 66%);
  pointer-events:none;
  z-index:0;
}

.page--home .hero--home .container{
  position:relative;
  z-index:2;
}

.page--home .hero-home__grid{
  display:grid;
  grid-template-columns: 1fr;
  justify-items:start;
  text-align:left;
  gap:0;
}

.page--home .hero-home__copy{
  width:min(760px, 68vw);
  margin:0;
  transform: translateX(-56px);
}

/* Reveal stays, but keep it clean (no extra blur) */
.page--home .hero-home__copy > *{
  opacity:0;
  transform: translateY(8px);
  animation: homeReveal .62s var(--ease) forwards;
  will-change: transform, opacity;
}
.page--home .hero-home__copy > .kicker{ animation-delay:.06s; }
.page--home .hero-home__copy > .h1{ animation-delay:.12s; }
.page--home .hero-home__copy > .lead{ animation-delay:.18s; }
.page--home .hero-home__copy > .hero-home__desc{ animation-delay:.24s; }
.page--home .hero-home__copy > .hero-home__actions{ animation-delay:.30s; }

/* kicker: remove halo/glow, use flat pill */
.page--home .kicker{
  margin:0;
  box-shadow:none;
}

/* Headline: remove text-shadow glow */
.page--home .hero-home__copy .h1{
  margin-top:14px;
  margin-bottom:16px;
  max-width:22ch;
  margin-left:0;
  margin-right:0;
  font-weight:780;
  letter-spacing:-.032em;
  text-shadow:none;
}

.page--home .hero-home__copy .lead{
  margin-top:0;
  margin-bottom:16px;
  max-width:64ch;
  margin-left:0;
  margin-right:0;
  font-size:19px;

  /* use system muted token (no extra bright) */
  color:var(--muted);
}

.page--home .hero-home__desc{
  margin-top:0;
  margin-bottom:22px;
  color:rgba(234,234,234,.62); /* matches --muted2 */
  line-height:1.72;
  max-width:78ch;
  margin-left:0;
  margin-right:0;
  font-size:15px;
}

.page--home .hero-home__actions{
  margin-top:0;
  display:flex;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

/* Buttons: do NOT override into glow; only small lift (base rules in style.css already) */
.page--home .btn{
  will-change: transform;
}
.page--home .btn:hover{ transform: translateY(-2px); }
.page--home .btn:active{ transform: translateY(0); }

.page--home .hero-home__right{
  height:300px;
  width:100%;
}

/* ============================================================ */
/* ICON STRIP (keep calm)                                        */
/* ============================================================ */

.page--home .hero-home__strip{
  position:absolute;
  left:50%;
  bottom:22px;
  width:min(980px, calc(100vw - 40px));
  margin:0;
  z-index:4;
  pointer-events:auto;
  opacity:0;
  transform: translateX(-50%) translateY(8px);
  animation: homeStripIn .62s var(--ease) forwards;
  animation-delay:.34s;
}

.page--home .hero-home__strip .divider__inner{
  justify-content:center;
  gap:18px;
}

.page--home .hero-home__strip .divider__line{
  max-width:320px;
  flex:0 1 320px;
  opacity:.70;
}

/* Icons inside strip: no glow/halo, only lift */
.page--home .divider__icons .picon{
  background:rgba(255,255,255,.02);
  border-color:var(--borderSoft);
  box-shadow: none;
  transition:
    transform 160ms var(--ease),
    background 160ms var(--ease),
    border-color 160ms var(--ease);
  will-change: transform;
}
.page--home .divider__icons .picon:hover{
  transform: translateY(-2px) rotate(-1deg);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.page--home .divider__icons .picon:active{
  transform: translateY(0) scale(.99);
}

.page--home .divider__icons .picon img{
  width:28px;
  height:28px;
  opacity:1;
  filter:none;
  transition: transform 160ms var(--ease);
}
.page--home .divider__icons .picon:hover img{
  transform: rotate(2deg) scale(1.02);
}

/* ============================================================ */
/* Products hierarchy (flagship VPN) — keep hierarchy but flat   */
/* ============================================================ */

.page--home #products .plist{
  display:grid;
  gap:12px;
}

/* Flagship row: first product in list (Velora VPN) */
.page--home #products .plist > a.plist__row:first-child{
  border-color: rgba(60,207,208,.24);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow1), var(--anti);
}

/* Stronger title/line for flagship */
.page--home #products .plist > a.plist__row:first-child .plist__name{
  font-size:16px;
  letter-spacing:-.012em;
}
.page--home #products .plist > a.plist__row:first-child .plist__line{
  color: rgba(234,234,234,.74);
}

/* Make flagship icon read as primary (flat accent rim) */
.page--home #products .plist > a.plist__row:first-child .plist__icon{
  border-color: rgba(60,207,208,.30);
  background: rgba(60,207,208,.08);
  box-shadow: var(--shadow2), var(--anti);
}
.page--home #products .plist > a.plist__row:first-child .plist__icon img{
  width:24px;
  height:24px;
  opacity:1;
  filter:none;
}

/* De-emphasize “soon” items (2..n): quieter, flatter */
.page--home #products .plist > a.plist__row:not(:first-child){
  border-color: var(--border);
  background: var(--card);
  box-shadow: var(--shadow2), var(--anti);
}
.page--home #products .plist > a.plist__row:not(:first-child) .plist__name{
  color: rgba(234,234,234,.84);
}
.page--home #products .plist > a.plist__row:not(:first-child) .plist__line{
  color: rgba(234,234,234,.62);
}
.page--home #products .plist > a.plist__row:not(:first-child) .plist__icon{
  border-color: var(--borderSoft);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
.page--home #products .plist > a.plist__row:not(:first-child) .plist__icon img{
  opacity:.92;
}

/* Hover separation: calm, no glow */
.page--home #products .plist > a.plist__row:first-child:hover{
  border-color: rgba(60,207,208,.42);
  box-shadow: var(--shadow2), var(--anti);
  background: rgba(255,255,255,.06);
}
.page--home #products .plist > a.plist__row:not(:first-child):hover{
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--shadow2), var(--anti);
  background: rgba(255,255,255,.05);
}

/* ============================================================ */
/* Velora for Business (biz list) — same card language, no bars  */
/* ============================================================ */

.page--home #business .section__head{ margin-bottom:18px; }
.page--home #business .panel{ padding:20px 20px; }

.page--home .biz{
  display:grid;
  gap:10px;
}

.page--home .biz__row{
  position:relative;
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:14px;
  padding:14px 14px;

  border-radius:16px;
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow2), var(--anti);

  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    background 160ms var(--ease);
  transform: translateZ(0);
}

/* remove decorative left bar */
.page--home .biz__row:before{ content:none; }

.page--home .biz__k{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:13px;
  color: rgba(234,234,234,.86);
  border:1px solid var(--borderSoft);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}

.page--home .biz__t{
  font-weight:900;
  letter-spacing:-.01em;
  color: rgba(234,234,234,.92);
  margin-top:2px;
}
.page--home .biz__d{
  margin-top:6px;
  color: rgba(234,234,234,.62);
  line-height:1.72;
  max-width:78ch;
}

.page--home .biz__row:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

/* Optional highlight (3rd row) — only subtle accent rim, NO glow */
.page--home .biz__row:nth-child(3){
  border-color: rgba(60,207,208,.26);
  background: rgba(255,255,255,.05);
}
.page--home .biz__row:nth-child(3) .biz__k{
  border-color: rgba(60,207,208,.26);
  background: rgba(60,207,208,.08);
  color: rgba(234,234,234,.92);
}
.page--home .biz__row:nth-child(3) .biz__d{
  color: rgba(234,234,234,.74);
}

.page--home #business .actions{ margin-top:16px !important; }

/* business soft button: keep flat */
.page--home #business .btn--soft{
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border-color: var(--borderSoft);
  box-shadow: var(--shadow2);
}
.page--home #business .btn--soft:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* ============================================================ */
/* Keyframes                                                     */
/* ============================================================ */

@keyframes homeReveal{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes homeStripIn{
  from{ opacity:0; transform: translateX(-50%) translateY(8px); }
  to{ opacity:1; transform: translateX(-50%) translateY(0); }
}

@keyframes homeEcoFloat{
  0%{ transform: translate3d(0,0,0); opacity:.70; }
  50%{ transform: translate3d(-8px,-4px,0); opacity:.74; }
  100%{ transform: translate3d(0,0,0); opacity:.70; }
}

/* Removed homeHeroBreath (no breathing vignette) */

/* ============================================================ */
/* Responsive                                                     */
/* ============================================================ */

@media (max-width: 1200px){
  .page--home .hero-home__copy{
    width:min(760px, 78vw);
    transform: translateX(-28px);
  }
  .page--home .hero-eco__img{
    right:0%;
    width:min(960px, 60vw);
  }
}

@media (max-width: 980px){
  .page--home .hero--home{
    padding:56px 0 300px;
  }

  .page--home .hero-eco__img{
    left:50%;
    right:auto;
    top:auto;
    bottom:-26px;
    width:min(980px, 132vw);
    opacity:.62;
    transform:translateX(-50%) translateZ(0);
    -webkit-mask-image: radial-gradient(circle at 50% 76%, #000 0%, rgba(0,0,0,.74) 46%, rgba(0,0,0,.18) 68%, transparent 86%);
            mask-image: radial-gradient(circle at 50% 76%, #000 0%, rgba(0,0,0,.74) 46%, rgba(0,0,0,.18) 68%, transparent 86%);
  }

  .page--home .hero-home__grid{
    justify-items:center;
    text-align:center;
  }

  .page--home .hero-home__copy{
    width:min(820px, 92vw);
    transform:none;
  }

  .page--home .hero-home__actions{
    justify-content:center;
  }

  .page--home .hero-home__right{
    height:0;
  }

  .page--home .hero-home__strip{
    position:relative;
    left:auto;
    bottom:auto;
    width:auto;
    margin-top:18px;
    opacity:1;
    transform:none;
    animation:none;
  }

  .page--home .hero-home__strip .divider__line{ display:none; }

  .page--home .biz__row{
    grid-template-columns: 40px 1fr;
    gap:12px;
    padding:12px 12px;
    border-radius:16px;
  }
  .page--home .biz__k{
    width:40px;
    height:40px;
    border-radius:13px;
  }
}