/* Depth layer (Oct 17 2026) — tilt, layers, lift, glass, light. Home + Work preview.
   Everything here is off for visitors whose device asks for reduced motion. */
@media (prefers-reduced-motion: no-preference){

  /* 1 · Cards: tilt toward the cursor, lift, glass sheen, deeper shadow */
  html.dp-on .dp-card{
    transform:perspective(1100px) rotateX(var(--dp-rx,0deg)) rotateY(var(--dp-ry,0deg)) translateZ(var(--dp-z,0px))
              rotateX(calc(var(--dp-ent,0) * 16deg)) translateY(calc(var(--dp-ent,0) * 46px)) scale(calc(1 - var(--dp-ent,0) * .05));
    transform-origin:50% 100%;
    transition:transform 900ms cubic-bezier(.16,1,.3,1),box-shadow 500ms ease;
    position:relative;isolation:isolate;will-change:transform}
  html.dp-on .dp-card.dp-hot{transition:transform 180ms ease-out,box-shadow 400ms ease;--dp-z:26px;
    box-shadow:0 38px 70px -28px rgba(40,22,30,.55),0 12px 24px -12px rgba(40,22,30,.25)!important}
  html.dp-on .dp-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(460px circle at var(--dp-mx,50%) var(--dp-my,0%),rgba(255,226,212,.16),rgba(255,226,212,0) 55%),
               radial-gradient(700px circle at calc(100% - var(--dp-mx,50%)) calc(100% - var(--dp-my,0%)),rgba(0,0,0,.10),rgba(0,0,0,0) 55%);
    opacity:0;transition:opacity 400ms ease}
  html.dp-on .dp-card.dp-hot::after{opacity:1}

  /* 2 · Headlines fold up out of the page */
  html.dp-on .dp-fold{transform:perspective(900px) rotateX(calc(var(--dp-ent,0) * -62deg)) translateY(calc(var(--dp-ent,0) * 18px));
    transform-origin:50% 100%;transition:transform 1300ms cubic-bezier(.16,1,.3,1)}

  /* 3 · Photos: a window into depth — they swing slightly as they pass, and the picture moves behind the frame */
  html.dp-on .dp-win{transform:perspective(1600px) rotateX(var(--dp-wr,0deg)) scale(var(--dp-ws,1));transform-origin:50% 50%;will-change:transform;
    box-shadow:0 50px 90px -50px rgba(30,18,23,.55)}

  /* 4 · Dark bands: a soft light follows the cursor */
  html.dp-on .dp-glow{position:relative;isolation:isolate}
  html.dp-on .dp-glow::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(640px circle at var(--dp-mx,70%) var(--dp-my,20%),rgba(224,138,118,.20),rgba(224,138,118,0) 60%),
               radial-gradient(900px circle at 10% 110%,rgba(206,148,166,.12),rgba(206,148,166,0) 60%);
    transition:background 120ms linear}
  html.dp-on .dp-glow>*{position:relative;z-index:1}
}

/* 6 · Photos (17c): curtain reveal, deep parallax, look-around on hover */
@media (prefers-reduced-motion: no-preference){
  html.dp-on .dp-pframe{display:block;overflow:hidden;position:relative}
  html.dp-on img.dp-photo{
    transform:translate3d(var(--dp-ix,0px),calc(var(--dp-py,0px) + var(--dp-iy,0px)),0) scale(calc(var(--dp-is,1) * var(--dp-base,1)));
    transition:transform 700ms cubic-bezier(.16,1,.3,1),filter 600ms ease;will-change:transform}
  html.dp-on img.dp-photo.m-atmo{animation:none}
  html.dp-on .dp-pframe.dp-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1400ms cubic-bezier(.77,0,.18,1)}
  html.dp-on .dp-pframe.dp-wipe img.dp-photo{--dp-is:1.18}
  html.dp-on .dp-pframe.dp-wipe.dp-wiped{clip-path:inset(0 0 0 0)}
  html.dp-on .dp-pframe.dp-wipe.dp-wiped img.dp-photo{--dp-is:1;transition:transform 1900ms cubic-bezier(.16,1,.3,1),filter 600ms ease}
}

/* 17d: food gallery stays still once revealed */
@media (prefers-reduced-motion: no-preference){html.dp-on figure.pg-p img.dp-photo,html.dp-on figure.pg-l img.dp-photo{animation:none!important;scale:1!important;translate:none!important}}
@media (prefers-reduced-motion: no-preference){html.dp-on img.dp-photo.mv-drift{--dp-base:1.07}}

/* 17e · Photos feel 3D: they rise from a tilted plane as they reveal, then rest as raised prints. No hover movement. */
@media (prefers-reduced-motion: no-preference){
  html.dp-on .dp-pframe:not(.dp-win){box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -32px rgba(40,22,30,.45),0 10px 22px -14px rgba(40,22,30,.28)}
  html.dp-on .dp-pframe.dp-wipe:not(.dp-win){transform:perspective(1200px) rotateX(24deg) translateY(56px) scale(.93);transform-origin:50% 100%;
    transition:clip-path 1500ms cubic-bezier(.77,0,.18,1),transform 1900ms cubic-bezier(.16,1,.3,1),box-shadow 1900ms ease}
  html.dp-on .dp-pframe.dp-wipe.dp-wiped:not(.dp-win){transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1)}
  html.dp-on .dp-pframe::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,0) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,.10));}

/* 17e · Text moves slowly: longer, softer arrivals, and headings float a little behind the page */
  html.dp-on.mv-ready .mv-in{transition:opacity 1900ms cubic-bezier(.22,.61,.36,1),translate 2100ms cubic-bezier(.16,1,.3,1),filter 1700ms ease}
  html.dp-on.mv-ready .mv-in:not(.mv-shown){translate:0 38px;filter:blur(4px)}
  html.dp-on.mv-ready .mv-in.mv-shown{filter:none}
  html.dp-on .dp-float{position:relative;top:var(--dp-ty,0px)}
}
@media (max-width:760px){html.dp-on .dp-float{top:0!important}}