/* =========================================================
   HOVER EFFECTS — PROJECTS / HOSTING / DESIGN TOOLS
   Layout unchanged; only hover experience improved
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  /* ---------------- Projects ---------------- */

  #projects .project-card{
    position:relative;
    overflow:hidden;
    transform-style:preserve-3d;
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease,
      background .35s ease;
  }

  #projects .project-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(42,226,255,.10),transparent 30%,transparent 70%,rgba(82,120,255,.10));
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:0;
  }

  #projects .project-card::after{
    content:"";
    position:absolute;
    top:-30%;
    left:-20%;
    width:36%;
    height:180%;
    transform:rotate(20deg) translateX(-220%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transition:transform .8s ease;
    pointer-events:none;
    z-index:1;
  }

  #projects .project-card:hover{
    transform:translateY(-10px);
    box-shadow:
      0 24px 42px rgba(0,0,0,.20),
      0 0 30px rgba(42,226,255,.10) !important;
    border-color:rgba(42,226,255,.42) !important;
  }

  #projects .project-card:hover::before{
    opacity:1;
  }

  #projects .project-card:hover::after{
    transform:rotate(20deg) translateX(420%);
  }

  #projects .project-card > *{
    position:relative;
    z-index:2;
  }

  #projects .project-thumb{
    transition:transform .35s ease, filter .35s ease;
  }

  #projects .project-card:hover .project-thumb{
    transform:scale(1.03);
    filter:saturate(1.1) brightness(1.04);
  }

  #projects .project-thumb i{
    transition:
      transform .35s ease,
      filter .35s ease,
      color .35s ease;
  }

  #projects .project-card:hover .project-thumb i{
    transform:translateY(-4px) scale(1.08);
    filter:drop-shadow(0 0 10px rgba(255,255,255,.12));
  }

  #projects .project-title h4,
  #projects .project-title span,
  #projects .project-body p{
    transition:color .3s ease, transform .3s ease;
  }

  #projects .project-card:hover .project-title h4{
    color:#f4fcff !important;
    transform:translateX(2px);
  }

  #projects .project-card:hover .project-title span{
    color:#76e6ff !important;
  }

  #projects .project-card:hover .project-body p{
    color:#c4d8e6 !important;
  }

  #projects .mini-tech span{
    transition:
      transform .28s ease,
      box-shadow .28s ease,
      border-color .28s ease,
      background .28s ease;
  }

  #projects .project-card:hover .mini-tech span{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 10px 18px rgba(0,0,0,.14);
  }

  #projects .project-card:hover .mini-tech span:nth-child(1){
    box-shadow:0 0 18px rgba(42,226,255,.18);
  }

  #projects .project-card:hover .mini-tech span:nth-child(2){
    box-shadow:0 0 18px rgba(139,92,246,.18);
  }

  #projects .project-card:hover .mini-tech span:nth-child(3){
    box-shadow:0 0 18px rgba(57,230,170,.18);
  }

  #projects .project-actions a,
  #projects .project-actions button{
    position:relative;
    overflow:hidden;
    transition:
      transform .25s ease,
      box-shadow .25s ease,
      border-color .25s ease,
      background .25s ease,
      color .25s ease;
  }

  #projects .project-actions a::before,
  #projects .project-actions button::before{
    content:"";
    position:absolute;
    top:-80%;
    left:-30%;
    width:28%;
    height:250%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
    transform:rotate(22deg) translateX(-250%);
    transition:transform .7s ease;
    pointer-events:none;
  }

  #projects .project-actions a:hover,
  #projects .project-actions button:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 22px rgba(0,0,0,.16);
  }

  #projects .project-actions a:hover::before,
  #projects .project-actions button:hover::before{
    transform:rotate(22deg) translateX(500%);
  }

  /* ---------------- Hosting Flow ---------------- */

  #hosting .flow-item{
    position:relative;
    overflow:hidden;
    transition:
      transform .32s ease,
      box-shadow .32s ease,
      border-color .32s ease,
      background .32s ease;
  }

  #hosting .flow-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(42,226,255,.08),transparent 45%,rgba(82,120,255,.08));
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }

  #hosting .flow-item:hover{
    transform:translateY(-8px) scale(1.03);
    border-color:rgba(42,226,255,.34) !important;
    box-shadow:
      0 16px 28px rgba(0,0,0,.16),
      0 0 24px rgba(42,226,255,.10);
  }

  #hosting .flow-item:hover::before{
    opacity:1;
  }

  #hosting .flow-icon{
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease,
      background .35s ease;
  }

  #hosting .flow-item:hover .flow-icon{
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 0 24px rgba(42,226,255,.18);
  }

  #hosting .flow-icon i{
    transition:transform .35s ease, filter .35s ease;
  }

  #hosting .flow-item:hover .flow-icon i{
    transform:scale(1.1);
    filter:drop-shadow(0 0 12px rgba(255,255,255,.14));
  }

  #hosting .flow-item span,
  #hosting .flow-item small{
    transition:color .3s ease, transform .3s ease;
  }

  #hosting .flow-item:hover span{
    color:#f2fbff !important;
    transform:translateY(-1px);
  }

  #hosting .flow-item:hover small{
    color:#c3d9ea !important;
  }

  #hosting .flow-arrow{
    transition:transform .28s ease, color .28s ease, text-shadow .28s ease;
  }

  #hosting .flow-item:hover + .flow-arrow{
    transform:scale(1.12);
    color:#76e5ff !important;
    text-shadow:
      0 0 8px rgba(42,226,255,.48),
      0 0 18px rgba(82,120,255,.24);
  }

  /* ---------------- Design Tools ---------------- */

  #design .tool-pod{
    position:relative;
    overflow:hidden;
    transition:
      transform .32s ease,
      box-shadow .32s ease,
      border-color .32s ease,
      background .32s ease;
  }

  #design .tool-pod::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(42,226,255,.08),transparent 45%,rgba(82,120,255,.08));
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }

  #design .tool-pod::after{
    content:"";
    position:absolute;
    top:-70%;
    left:-32%;
    width:26%;
    height:230%;
    transform:rotate(20deg) translateX(-250%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transition:transform .75s ease;
    pointer-events:none;
  }

  #design .tool-pod:hover{
    transform:translateY(-8px);
    border-color:rgba(42,226,255,.34) !important;
    box-shadow:
      0 18px 30px rgba(0,0,0,.16),
      0 0 24px rgba(42,226,255,.08);
  }

  #design .tool-pod:hover::before{
    opacity:1;
  }

  #design .tool-pod:hover::after{
    transform:rotate(20deg) translateX(500%);
  }

  #design .tool-pod .tool-brand-icon,
  #design .tool-pod .tool-brand-fa{
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      filter .35s ease;
  }

  #design .tool-pod:hover .tool-brand-icon,
  #design .tool-pod:hover .tool-brand-fa{
    transform:translateY(-4px) scale(1.10);
    filter:drop-shadow(0 0 12px rgba(255,255,255,.10));
  }

  #design .tool-pod span:last-child{
    transition:color .3s ease, letter-spacing .3s ease;
  }

  #design .tool-pod:hover span:last-child{
    color:#f2fbff;
    letter-spacing:.3px;
  }

  /* Individual design tool hover glow */
  #design .tool-pod:nth-child(1):hover{
    box-shadow:0 18px 30px rgba(0,0,0,.16), 0 0 24px rgba(49,168,255,.16);
  }

  #design .tool-pod:nth-child(2):hover{
    box-shadow:0 18px 30px rgba(0,0,0,.16), 0 0 24px rgba(162,89,255,.16);
  }

  #design .tool-pod:nth-child(3):hover{
    box-shadow:0 18px 30px rgba(0,0,0,.16), 0 0 24px rgba(0,196,204,.16);
  }

  #design .tool-pod:nth-child(4):hover{
    box-shadow:0 18px 30px rgba(0,0,0,.16), 0 0 24px rgba(24,164,151,.16);
  }
}

/* Reduced-motion / touch-safe */
@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse){
  #projects .project-card,
  #projects .project-thumb,
  #projects .project-thumb i,
  #projects .mini-tech span,
  #projects .project-actions a,
  #projects .project-actions button,
  #hosting .flow-item,
  #hosting .flow-icon,
  #hosting .flow-icon i,
  #hosting .flow-arrow,
  #design .tool-pod,
  #design .tool-pod .tool-brand-icon,
  #design .tool-pod .tool-brand-fa{
    transition:none !important;
  }
}