/* La luz describe el espesor de papel y fotografía; el contenido mantiene su plano. */
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) :is(.hero-photo-frame, .gallery-item),
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) #heroSection > .hero-photo-frame {
  box-shadow: 0 1px 0 color-mix(in oklab, var(--text-primary) 25%, transparent),
    0 3px 0 color-mix(in oklab, var(--bg-parchment) 78%, var(--text-primary)),
    0 calc(12px * var(--material-strength)) calc(28px * var(--material-strength)) oklch(16% .02 60 / .22);
}
body[data-material-depth] .material-depth-surface {
  position: relative; transform: perspective(1100px) rotateX(var(--material-rx, 0deg)) rotateY(var(--material-ry, 0deg));
  transform-origin: center; backface-visibility: hidden;
}
.material-depth-surface::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--material-light-x, 50%) var(--material-light-y, 50%), white, transparent 75%);
  opacity: var(--material-gloss, 0);
}
.material-depth-active { will-change: transform; }
body[data-design-layout="nocturne"][data-material-depth] #heroSection > .hero-photo-frame { box-shadow: none; border-radius: 0; }
body[data-design-layout="letter"]:is([data-material-depth="paper"], [data-material-depth="interactive"]) #heroSection {
  background: var(--bg-parchment);
  box-shadow: 2px 3px 0 var(--bg-parchment), 3px 4px 0 var(--atelier-rule), 0 16px 40px oklch(20% .02 60 / .07);
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) :is(.envelope-classic-card, .origami-envelope-chassis, .french-gatefold-chassis) {
  box-shadow: 0 2px 0 color-mix(in oklab, var(--bg-parchment) 78%, var(--text-primary)), 0 6px 0 color-mix(in oklab, var(--bg-parchment) 88%, var(--text-primary)), 0 24px 50px oklch(12% .02 60 / .24);
  border-radius: 2px;
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .origami-envelope-chassis {
  background: var(--bg-parchment); border-color: var(--atelier-rule); backdrop-filter: none;
  height: clamp(290px, 52dvh, 360px); perspective: 1200px;
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .envelope-body-pocket {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 3;
  background: var(--bg-parchment); clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) :is(.envelope-crease-left, .envelope-crease-right) {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg-parchment) 49.7%, color-mix(in oklab, var(--bg-parchment) 86%, var(--text-primary)) 50%, var(--bg-parchment) 51%);
  clip-path: polygon(0 0, 52% 52%, 0 100%);
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .envelope-crease-right { transform: scaleX(-1); }
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .envelope-tri-flap-3d {
  height: 42%; border-top: 1px solid var(--atelier-rule);
  background: linear-gradient(180deg, var(--bg-parchment), color-mix(in oklab, var(--bg-parchment) 90%, var(--text-primary)));
  backface-visibility: visible;
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .envelope-letter-card {
  border-radius: 1px; background: var(--bg-parchment); border: 1px solid var(--atelier-rule);
  box-shadow: 0 -3px 12px oklch(16% .02 60 / .13); color: var(--text-primary);
}
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) :is(.letter-monogram, .letter-tag, .letter-gold-crest, .flap-apex-seal) { color: var(--text-primary); }
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .btn-actuator-flap-seal {
  position: absolute; top: calc(42% - 36px); left: calc(50% - 36px); width: 72px; height: 72px; margin: 0;
  background: var(--bg-parchment); color: var(--text-primary); border-color: var(--atelier-rule);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), 0 3px 0 var(--atelier-rule), 0 8px 18px oklch(16% .02 60 / .18);
}
.material-envelope-monogram { display: none; }
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .material-envelope-monogram { display: inline; font: 400 27px/1 var(--font-script); }
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .btn-actuator-flap-seal .flap-btn-text { display: none; }
body:is([data-material-depth="paper"], [data-material-depth="interactive"]) .origami-envelope-chassis .envelope-prompt {
  position: absolute; bottom: 25px; left: 28px; right: 28px; z-index: 4;
  color: var(--text-primary); text-shadow: none; animation: none; font: 400 12px/1.6 var(--font-sans); letter-spacing: .1em;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  body[data-material-depth] .material-depth-surface { transform: none; }
  .material-depth-surface::after { display: none; }
}