/* DJ Liviu — FX layer (wow factor). Toate efectele respectă prefers-reduced-motion. */

/* ---------- Tranziții între pagini (View Transitions API) ---------- */
@view-transition { navigation: auto; }
header.djh { view-transition-name: djh-header; }
.djf { view-transition-name: djh-footer; }
::view-transition-old(root){ animation: vtOut .45s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: vtIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut{ to{ opacity:0; transform: translateY(-8px) scale(.992); filter:blur(3px);} }
@keyframes vtIn{ from{ opacity:0; transform: translateY(14px) scale(.996); filter:blur(4px);} }

/* ---------- Meniu: dropdown Servicii (desktop) ---------- */
.menu .mitem{ position:relative; display:inline-flex; align-items:center; }
.menu .mitem>a{ display:inline-flex; align-items:center; gap:6px; }
.menu .chev{ font-size:9px; opacity:.75; transition:transform .3s; }
.menu .mitem:hover .chev, .menu .mitem:focus-within .chev{ transform:rotate(180deg); }
.menu .mitem::after{ content:""; position:absolute; top:100%; left:-12px; right:-12px; height:18px; }
.submenu{
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(8px); min-width:216px;
  background:rgba(16,16,22,.94); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.85); z-index:1100;
}
.menu .mitem:hover .submenu, .menu .mitem:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.submenu a{ display:block; padding:11px 14px; border-radius:9px; font-size:13.5px; font-weight:600; letter-spacing:.2px; color:var(--fog); text-transform:none; transition:background .2s,color .2s; }
.submenu a::after{ display:none !important; }
.submenu a:hover{ background:rgba(246,60,129,.15); color:#fff; }

/* ---------- Meniu mobil: subgrup servicii ---------- */
.mmenu .msub{ display:flex; flex-direction:column; margin:-2px 0 8px; padding-left:16px; border-left:2px solid rgba(246,60,129,.45); }
.mmenu .msub a{ font-family:var(--body); font-size:16px; font-weight:600; letter-spacing:.2px; text-transform:none; color:var(--fog); padding:11px 0; border-bottom:none; }
.mmenu .msub a:hover{ color:#fff; }

/* ---------- Iconițe sociale: fix deformare + footer mobil ---------- */
.soc{ flex-wrap:wrap; }
.soc a{ flex:0 0 44px; color:rgba(255,255,255,.72); }
.soc a:hover{ color:#fff; }
@media (max-width:900px){
  .foot{ flex-direction:column; gap:30px; }
  .foot .fcol{ max-width:none !important; width:100%; }
}

/* ---------- Efecte gated pe reduce ---------- */
@media (prefers-reduced-motion: no-preference){

  /* Light rig „viu": cele 11 culori ale sălii, ciclate lent */
  .bgfx{ animation: hue 34s linear infinite; }
  @keyframes hue{ to{ filter: hue-rotate(360deg);} }

  /* Reveal îmbogățit: fade + rise + blur */
  .reveal{ filter: blur(8px); }
  .reveal.in{ filter: blur(0); }

  /* Parallax pe imaginile hero/phead (scroll-driven nativ) */
  @supports (animation-timeline: scroll()){
    .hero .heroimg, .phead .heroimg{
      animation: heroPar linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes heroPar{ from{ transform: translateY(-3%) scale(1.06);} to{ transform: translateY(14%) scale(1.16);} }
  }

  /* Tilt 3D + ridicare la hover pe tile-uri (doar pointer fin) */
  @media (pointer:fine){
    .bento .tile, .wrap .tile{
      transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
      transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
      transform-style: preserve-3d;
    }
    .bento .tile:hover, .wrap .tile:hover{
      transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
      box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
    }
  }

  /* Sclipire (gloss sweep) peste tile la hover */
  .tile::before{
    content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.22) 50%, transparent 66%);
    transform: translateX(-130%); mix-blend-mode: overlay;
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
  }
  .tile:hover::before{ transform: translateX(130%); }

  /* Scântei ambientale care se ridică */
  .sparks{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .sparks i{
    position:absolute; bottom:-12px; width:4px; height:4px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), transparent 70%);
    opacity:0; animation: spark linear infinite; will-change: transform,opacity;
  }
  @keyframes spark{
    0%{ transform: translateY(0) translateX(0) scale(.6); opacity:0; }
    12%{ opacity:.9; }
    88%{ opacity:.5; }
    100%{ transform: translateY(-106vh) translateX(24px) scale(1); opacity:0; }
  }

  /* Cursor: ring magnetic care urmărește (lerp în JS) */
  .cur-ring{
    position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(246,60,129,.55); z-index:9998; pointer-events:none;
    transform: translate(-50%,-50%); mix-blend-mode:screen; opacity:0; transition:opacity .35s, width .2s, height .2s;
  }
  .cur-ring.big{ width:60px; height:60px; border-color: rgba(70,177,253,.7); }

  /* Ripple pe butoane */
  .btn-primary,.pbtn,.cta,.btn-ghost{ position:relative; overflow:hidden; }
  .rip{ position:absolute; border-radius:50%; background: rgba(255,255,255,.45);
    transform: translate(-50%,-50%) scale(0); pointer-events:none; animation: rip .6s ease-out forwards; }
  @keyframes rip{ to{ transform: translate(-50%,-50%) scale(1); opacity:0; } }

  /* Intrarea numerelor (count-up) — micul „pop” */
  .stat.counting .n{ transform: scale(1.04); transition: transform .3s; }
}

/* View transitions dezactivate la reduce */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation: none !important; }
}

/* ---------- Iconițe sociale: centrare corectă (bat .foot .fcol a{display:block}) ---------- */
.foot .soc{ display:flex; gap:12px; flex-wrap:wrap; }
.foot .soc a{ display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; padding:0; border-radius:50%; color:rgba(255,255,255,.72); }
.foot .soc a:hover{ color:#fff; background:var(--magenta); border-color:var(--magenta); }
.foot .soc svg{ width:18px; height:18px; display:block; }

/* ---------- Prețuri pachete ---------- */
.pkg .price{ font-family:var(--disp); font-weight:900; font-size:34px; line-height:1; margin:2px 0 18px; background:linear-gradient(120deg,var(--magenta),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pkg .price small{ font-size:13px; font-weight:600; color:var(--fog); -webkit-text-fill-color:var(--fog); margin-left:6px; }
.pkgs-2{ grid-template-columns:repeat(2,1fr); max-width:800px; margin-left:auto; margin-right:auto; }
@media(max-width:900px){ .pkgs-2{ grid-template-columns:1fr; } }
.addons{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media(max-width:900px){ .addons{ grid-template-columns:1fr; } }
.addon{ border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:18px 20px; background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.addon .an{ font-weight:600; font-size:14.5px; color:#e2e6ea; }
.addon .ap{ font-family:var(--disp); font-weight:800; color:var(--gold); white-space:nowrap; }
.pricegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
@media(max-width:900px){ .pricegrid{ grid-template-columns:1fr; } }
.pricegroup{ border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:24px; background:var(--panel); }
.pricegroup h4{ font-family:var(--disp); font-weight:700; font-size:18px; margin-bottom:14px; letter-spacing:.3px; }
.priceline{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.07); }
.priceline:last-child{ border-bottom:none; }
.priceline .pl-name{ color:var(--fog); font-weight:600; font-size:14.5px; }
.priceline .pl-val{ font-family:var(--disp); font-weight:800; color:var(--gold); }
/* ---------- Grid „arsenal": 5 carduri aranjate unitar (3 sus + 2 centrate jos) ---------- */
.grid6{ grid-template-columns:repeat(6,1fr); }
.grid6 .feat{ grid-column:span 2; }
.arsenal .grid6 .feat:nth-child(4){ grid-column:2 / span 2; }
.arsenal .grid6 .feat:nth-child(5){ grid-column:4 / span 2; }
@media(max-width:900px){
  .grid6{ grid-template-columns:1fr !important; }
  .grid6 .feat,
  .arsenal .grid6 .feat:nth-child(4),
  .arsenal .grid6 .feat:nth-child(5){ grid-column:auto !important; }
}