/* =====================================================================
   DENNIE DELFIN — skin "macOS clean"
   Ispirato a macos.framer.media: vetro smerigliato, wallpaper a gradiente
   morbido, icone squircle, dock e menubar translucidi, finestre pulite.
   Struttura invariata.
   ===================================================================== */

:root{
  --accent:  #0A84FF;          /* blu di sistema macOS */
  --ink:     #1B1D21;
  --ink-soft:#6B7076;
  --panel:   #FFFFFF;
  --glass:   rgba(255,255,255,.62);
  --glass-2: rgba(255,255,255,.28);
  --line:    rgba(0,0,0,.08);
  --hairline:rgba(255,255,255,.55);
  --radius:  14px;
  --shadow:  0 24px 60px rgba(20,24,40,.28), 0 2px 8px rgba(20,24,40,.12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* --- vetro del dock: più trasparente e "sfumato" del pannello finestre --- */
  --dock-glass-top:    rgba(255,255,255,.32);
  --dock-glass-bottom: rgba(255,255,255,.08);
  --dock-border:       rgba(255,255,255,.40);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  height:100vh; overflow:hidden;
  /* wallpaper: foto reale, a copertura intera e sempre centrata */
  background: url('../assets/backgroundofficial.png') center center / cover no-repeat fixed;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.mono{ font-family:"SF Mono","IBM Plex Mono",ui-monospace,monospace; letter-spacing:.01em; font-size:.92em; }
svg{ display:block; }

/* ---------------- COLORI DISCIPLINA (tile squircle) ---------------- */
.foto-grad{    background:linear-gradient(160deg,#4facfe,#2a6fdb); }
.design-grad{  background:linear-gradient(160deg,#a67cff,#6a5cff); }
.musica-grad{  background:linear-gradient(160deg,#ff7eb3,#ff5e8a); }
.pittura-grad{ background:linear-gradient(160deg,#ff9a63,#ff6a3d); }
.about-grad{   background:linear-gradient(160deg,#8e99a6,#5b6572); }
.notes-grad{   background:linear-gradient(160deg,#ffd76b,#f5b21f); }

/* ================= DESKTOP (macOS) ================= */

.desktop{ position:fixed; inset:0; overflow:hidden; }
.desktop-icons{ position:absolute; inset:0; }

.d-icon{ position:absolute; }
.d-icon, .app-icon{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:7px; width:88px;
}
/* squircle Big Sur (per le anteprime file) */
.d-icon .icon-glyph, .app-icon .icon-glyph{
  width:58px; height:58px; border-radius:24%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; padding:6px; overflow:hidden;
  box-shadow:0 8px 18px rgba(20,24,40,.28), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 .5px rgba(0,0,0,.06);
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
/* icone-app: mostrano l'artwork PNG per intero (folder, notes, music, ai, ps) */
.d-icon .app-glyph, .app-icon .app-glyph{
  background:transparent; border-radius:0; overflow:visible; padding:0; box-shadow:none;
  filter:drop-shadow(0 6px 10px rgba(20,24,40,.34));
}
.d-icon:hover .icon-glyph{ transform:translateY(-3px) scale(1.05); }
.d-icon:active .icon-glyph{ transform:scale(.94); }
.d-icon span, .app-icon span{
  font-size:12px; color:#fff; text-align:center; line-height:1.2; font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  padding:1px 6px; border-radius:6px;
}
.d-icon .icon-glyph svg, .app-icon .icon-glyph svg{ width:26px; height:26px; }
.icon-glyph .icon-img{ width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; pointer-events:none; }

/* ---------------- DOCK (vetro smerigliato) ---------------- */
.dock{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:14px; padding:10px 14px;
  background:linear-gradient(180deg, var(--dock-glass-top), var(--dock-glass-bottom));
  backdrop-filter:saturate(200%) blur(30px); -webkit-backdrop-filter:saturate(200%) blur(30px);
  border-radius:22px; border:1px solid var(--dock-border);
  box-shadow:
    0 18px 40px rgba(20,24,40,.30),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.06);
}

/* Icona del dock: SOLO il transform anima qui. Niente filter sull'elemento
   che si sposta: evita l'artefatto per cui, durante l'animazione, si vedeva
   il riquadro squadrato del drop-shadow invece di un'ombra morbida. */
.dock-icon{
  width:48px; height:48px; padding:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:none; cursor:pointer; background:transparent;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.dock-icon:hover{ transform:translateY(-10px) scale(1.12); }
.dock-icon:active{ transform:translateY(-4px) scale(1.04); }

/* Maschera squircle: arrotonda SEMPRE l'icona (anche se il PNG originale è
   quadrato/senza margini trasparenti, es. Instagram) e porta l'ombra qui,
   come box-shadow reale — che segue il bordo arrotondato invece dell'alpha
   dell'immagine, eliminando il difetto della "forma squadrata". */
.dock-icon-mask{
  width:100%; height:100%; border-radius:24%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  box-shadow:0 8px 16px rgba(20,24,40,.30), 0 2px 5px rgba(20,24,40,.20);
}
.dock-icon svg{ width:20px; height:20px; flex-shrink:0; }
.dock-icon .icon-img{ width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none; display:block; }

/* ---------------- FILE ICONS (foto/video/audio) ---------------- */
.file-icon .icon-glyph{
  width:58px; height:58px; border-radius:12px;
  background:#fff; padding:0; overflow:hidden;
  box-shadow:0 8px 18px rgba(20,24,40,.28), inset 0 0 0 .5px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.file-thumb-photo{ width:100%; height:100%; position:relative;
  background:linear-gradient(180deg,#bfe0f5 0%,#bfe0f5 58%,#7cc07a 58%,#7cc07a 100%); }
.file-thumb-photo::after{ content:""; position:absolute; right:8px; top:8px; width:12px; height:12px; border-radius:50%; background:#ffd76b; box-shadow:0 0 8px rgba(255,215,107,.8); }
.file-thumb-video{ width:100%; height:100%; background:#1b1d21; display:flex; align-items:center; justify-content:center; }
.file-thumb-video svg{ width:20px; height:20px; }
.file-thumb-audio{ width:100%; height:100%; background:linear-gradient(160deg,#a67cff,#6a5cff); display:flex; align-items:center; justify-content:center; }
.file-thumb-audio svg{ width:22px; height:22px; }

/* ---------------- QUICK LOOK ---------------- */
.qlook{
  position:fixed; top:50%; left:50%;
  width:min(560px,88vw); max-height:80vh;
  background:var(--glass); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-radius:16px; border:1px solid var(--glass-2);
  box-shadow:var(--shadow);
  z-index:55; display:none; flex-direction:column; overflow:hidden;
  transform:translate(-50%,-50%) scale(.9); opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.qlook.open{ display:flex; }
.qlook.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.qlook-close{
  position:absolute; top:12px; left:12px; width:14px; height:14px; border-radius:50%;
  background:#FF5F57; border:.5px solid rgba(0,0,0,.15); color:transparent; cursor:pointer; font-size:0; z-index:2;
}
.qlook-media{ flex:1; display:flex; align-items:center; justify-content:center; background:#0c0d0f; min-height:260px; }
.qlook-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.qlook-media video{ width:100%; max-height:60vh; display:block; }
.qlook-media.audio-view{ background:linear-gradient(160deg,#a67cff,#6a5cff); flex-direction:column; gap:18px; padding:30px; }
.qlook-media.audio-view svg{ width:56px; height:56px; }
.qlook-media.audio-view audio{ width:100%; max-width:340px; }
.qlook-caption{ padding:11px 16px; font-size:12.5px; color:var(--ink); background:rgba(255,255,255,.5); border-top:1px solid var(--line); text-align:center; }
.dock-icon.text{ font-size:12px; font-weight:600; }

/* ---------------- WINDOWS ---------------- */
.backdrop{ position:fixed; inset:0; background:rgba(15,18,30,.28); backdrop-filter:blur(2px); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.backdrop.show{ opacity:1; pointer-events:auto; }

.window{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.94); opacity:0;
  width:min(660px,88vw); max-height:76vh;
  background:var(--panel); border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 0 0 .5px rgba(0,0,0,.05);
  z-index:50; display:none; flex-direction:column; overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.window.open{ display:flex; }
.window.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.window.wide{ width:min(780px,90vw); }

.window-titlebar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:rgba(250,250,252,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); flex-shrink:0; position:relative;
}
.chrome{ display:flex; gap:8px; }
.chrome button{ width:12px; height:12px; border-radius:50%; border:.5px solid rgba(0,0,0,.12); cursor:pointer; padding:0; }
.dot-red{ background:#FF5F57; } .dot-amber{ background:#FEBC2E; } .dot-green{ background:#28C840; }
.window-title{ font-size:13px; font-weight:600; color:var(--ink); position:absolute; left:50%; transform:translateX(-50%); }
.back-btn{
  display:none; background:none; border:none; cursor:pointer;
  font-size:15px; color:var(--accent); font-weight:500; align-items:center; gap:3px;
}
.window-body{ padding:22px 24px 26px; overflow-y:auto; }
.window-body p{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; max-width:60ch; }

.note-item{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.note-item:last-child{ border-bottom:none; }
.note-date{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:2px; }

.works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:4px; }
.work-card{ border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(20,24,40,.1), inset 0 0 0 .5px rgba(0,0,0,.06); transition:transform .2s ease; }
.work-card:hover{ transform:translateY(-3px); }
.work-thumb{ aspect-ratio:4/5; }
.work-meta{ padding:11px 13px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.work-title{ font-size:14px; font-weight:600; }
.work-tag{ font-size:11px; color:var(--ink-soft); }

/* ---------------- NOTES APP ---------------- */
#win-notes .window-body{ padding:0; }
.notes-app{ display:flex; height:48vh; min-height:340px; }
.notes-list{ width:200px; flex-shrink:0; background:#faf9f5; border-right:1px solid var(--line); overflow-y:auto; }
.notes-list-item{ display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:13px 15px; cursor:pointer; transition:background .15s; }
.notes-list-item:hover{ background:#f2f1ea; }
.notes-list-item .n-title{ font-size:13.5px; font-weight:600; display:block; margin-bottom:3px; }
.notes-list-item .n-preview{ font-size:11.5px; color:var(--ink-soft); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notes-list-item.active{ background:#FFEFBE; }
.notes-detail{ flex:1; padding:22px 24px; overflow-y:auto; }
.notes-detail .n-date{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; display:block; text-align:center; }
.notes-detail .n-body{ font-size:15.5px; line-height:1.7; color:var(--ink); }

/* ---------------- MUSICA APP ---------------- */
.track-list{ display:flex; flex-direction:column; gap:2px; }
.track-row{ display:flex; align-items:center; gap:14px; padding:11px 8px; border-bottom:1px solid var(--line); }
.track-row:last-child{ border-bottom:none; }
.track-num{ width:18px; font-size:12px; color:var(--ink-soft); flex-shrink:0; font-variant-numeric:tabular-nums; }
.track-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; overflow:hidden; background:transparent!important; box-shadow:none; }
.track-icon svg{ width:16px; height:16px; }
.track-icon .icon-img{ width:100%; height:100%; object-fit:contain; }
.track-info{ flex:1; min-width:0; }
.track-name{ font-size:14px; font-weight:600; display:block; }
.track-sub{ font-size:11.5px; color:var(--ink-soft); }
.track-row audio{ height:32px; max-width:160px; }
.music-note{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; padding:12px 14px; background:#f5f5f7; border-radius:10px; }

/* ================= MOBILE (iOS) ================= */
.ios-status, .ios-home, .ios-dock{ display:none; }

@media (max-width:860px){
  .desktop, .dock{ display:none; }
  body{ overflow-y:auto; height:auto; min-height:100vh; }

  .ios-status{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 24px 4px; font-size:14px; font-weight:600; color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .ios-home{ display:block; min-height:100vh; position:relative; padding:28px 20px 120px; }

  /* --- icone: SPARSE, NON RUOTATE, LEGGERMENTE SOVRAPPOSTE --- */
  .app-grid{ display:block; position:relative; height:70vh; min-height:460px; margin-top:6px; }
  .app-icon{ position:absolute; width:80px; gap:7px; transform:translateX(-50%); transition:transform .18s cubic-bezier(.2,.8,.2,1); }
  .app-icon:active{ transform:translateX(-50%) scale(.92); z-index:99; }
  .app-icon .icon-glyph{ width:62px; height:62px; margin:0 auto; }
  .app-icon span{ font-size:11.5px; }

  .ios-dock{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    width:calc(100% - 32px); max-width:420px;
    display:flex; justify-content:space-around; padding:12px 18px;
    background:linear-gradient(180deg, var(--dock-glass-top), var(--dock-glass-bottom));
    backdrop-filter:saturate(200%) blur(30px); -webkit-backdrop-filter:saturate(200%) blur(30px);
    border-radius:28px; border:1px solid var(--dock-border);
    box-shadow:
      0 18px 40px rgba(20,24,40,.34),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1px 0 rgba(255,255,255,.06);
    z-index:25;
  }
  .ios-dock .dock-icon{ width:52px; height:52px; }

  .window{ position:fixed; inset:0; width:100%; max-height:none; border-radius:0; z-index:60; transform:translateY(6%); }
  .window.show{ transform:translateY(0); }
  .window-titlebar{ padding:16px 18px; padding-top:max(16px, env(safe-area-inset-top)); }
  .chrome{ display:none; }
  .back-btn{ display:flex; }
  .window-title{ position:static; transform:none; margin-left:auto; }
  .works-grid{ grid-template-columns:1fr 1fr; }
  .notes-app{ height:calc(100vh - 60px); }
  .notes-list{ width:140px; }
  .notes-list-item .n-preview{ display:none; }
  .track-row{ flex-wrap:wrap; }
  .track-row audio{ order:4; width:100%; max-width:none; margin-top:6px; }
}

@media (prefers-reduced-motion:reduce){
  .app-icon,.d-icon .icon-glyph,.dock-icon,.work-card{ transition:none; }
}