/* The gallery uses live template pages in a lightweight CSS 3D scene. */
.hero-art.resume-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  height: 310px;
  margin: 0;
  align-self: center;
  display: block;
}
.scene-aura {
  position: absolute;
  inset: 3% -14% -7% -16%;
  background: radial-gradient(ellipse at 52% 52%, #9b7ed94a, transparent 66%);
  pointer-events: none;
}
.scene-floor {
  position: absolute;
  left: 12%;
  right: 9%;
  bottom: 0;
  height: 28px;
  border-radius: 50%;
  background: #120c22a8;
  filter: blur(15px);
}
.scene-world, .scene-parallax, .scene-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.scene-parallax {
  transform: perspective(1100px) rotateX(calc(2deg + var(--scene-rx, 0deg))) rotateY(calc(-4deg + var(--scene-ry, 0deg)));
  transition: transform 240ms ease-out;
}
.scene-orbit {
  position: absolute;
  inset: 12% 0 9%;
  border: 1px solid #e6d8ff24;
  border-radius: 50%;
  transform: rotate(-12deg);
}
.hero-art .showcase-paper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(110px, 45%, 204px);
  height: auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 18px 46px #10091db3, 0 0 0 1px #ffffff39;
  transform-origin: center;
}
.hero-art .showcase-1 { transform: translate3d(-92%, -47%, -12px) rotate(-17deg); }
.hero-art .showcase-2 { transform: translate3d(-7%, -47%, -8px) rotate(15deg); }
.hero-art .showcase-3 { transform: translate3d(-50%, -50%, 26px) rotate(-2deg); }
@media (max-width: 1100px) {
  .hero-art.resume-scene { height: 272px; }
}
@media (max-width: 720px) {
  .hero-art.resume-scene { height: 172px; }
  .hero-art .showcase-paper { width: 105px; }
}
@media (max-width: 410px) {
  .hero-art.resume-scene { height: 152px; }
  .hero-art .showcase-paper { width: 92px; }
}

/* Decorative motion is brief and follows the device preference. */
html[data-motion='on'] .scene-float { animation: forme-scene-float 3.8s ease-in-out; }
html[data-motion='on'] .scene-floor { animation: forme-floor 3.8s ease-in-out; }
html[data-page-hidden='true'] .scene-float,
html[data-page-hidden='true'] .scene-floor,
.resume-scene[data-scene-visible='false'] .scene-float,
.resume-scene[data-scene-visible='false'] .scene-floor { animation-play-state: paused !important; }
html[data-motion='on'] .motion-route-in { animation: forme-route-enter 320ms cubic-bezier(.2,.7,.2,1) both; }
html[data-motion='on'] .motion-ready { opacity: 0; transform: translate3d(0,18px,0); transition: opacity 430ms ease var(--reveal-delay,0ms), transform 550ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
html[data-motion='on'] .motion-ready.motion-in { opacity: 1; transform: none; }
html[data-motion='on'] .accordion[open] > .accordion-content { animation: forme-section-enter 200ms ease-out both; }
html[data-motion='on'] #modal[open] { animation: forme-dialog-enter 230ms cubic-bezier(.2,.7,.2,1) both; }
html[data-motion='on'] .btn { transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease, background 180ms ease; }
html[data-motion='on'] .nav-item svg, html[data-motion='on'] .brand-mark { transition: transform 250ms cubic-bezier(.2,.7,.2,1); }
html[data-motion='on'] .field > span { transition: transform 180ms, color 180ms; }
html[data-motion='on'] .field:focus-within > span { transform: translateX(2px); color: #3156db; }

@media (hover: hover) and (pointer: fine) {
  html[data-motion='on'] .template-visual { transform: perspective(1100px) rotateX(var(--tile-rx,0deg)) rotateY(var(--tile-ry,0deg)); transform-origin: 50% 50%; transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 220ms; }
  html[data-motion='on'] .template-visual:after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(circle at var(--tile-light-x,50%) var(--tile-light-y,50%),#ffffff63,transparent 65%); opacity: 0; pointer-events: none; transition: opacity 250ms; }
  html[data-motion='on'] .template-visual:hover:after { opacity: .6; }
  html[data-motion='on'] .template-card:hover { box-shadow: 0 15px 36px #294d8f14; border-color: #c7d6f1; }
  html[data-motion='on'] .btn:hover:not(:disabled):not(.preview-mobile-toggle) { transform: translateY(-2px); }
  html[data-motion='on'] .btn.primary:hover { box-shadow: 0 8px 19px #3156db2b; }
  html[data-motion='on'] .btn:active:not(:disabled):not(.preview-mobile-toggle) { transform: translateY(0); }
  html[data-motion='on'] .nav-item:hover svg { transform: translateX(2px); }
  html[data-motion='on'] .brand:hover .brand-mark { transform: translateY(-2px) rotate(-5deg); }
}
html[data-motion='off'] .motion-ready { opacity: 1; transform: none; }
html[data-motion='off'] .scene-parallax { transform: perspective(1000px) rotateX(2deg) rotateY(-4deg); transition: none; }
html[data-motion='off'] .template-visual { transform: none; }

@keyframes forme-scene-float { 50% { transform: translate3d(0,-5px,0) rotateZ(.3deg); } }
@keyframes forme-floor { 50% { transform: scaleX(.88); opacity: .6; } }
@keyframes forme-route-enter { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
@keyframes forme-section-enter { from { opacity: .4; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes forme-dialog-enter { from { opacity: .5; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .scene-float, .scene-floor,
  .motion-route-in, .motion-ready, #modal[open], .accordion-content { animation: none !important; transition: none !important; }
  .motion-ready { opacity: 1 !important; transform: none !important; }
  .scene-parallax, .template-visual { transition: none !important; }
}
@media print {
  .resume-scene { display: none !important; }
  .motion-route-in, .motion-ready { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}