/* Environnement 3D (Meishin-ji) : le render final en grand, cadré d'or.
   Au survol, une lanterne suit le curseur et révèle la passe clay + lumière sous le render.
   Un clic ouvre la page breakdown (meishinji.html). */
.sando { display: block; color: inherit; text-decoration: none; }
.sando + .sando { margin-top: clamp(32px, 6vw, 72px); }
.sando-cadre { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b140f;
  border: 1px solid var(--or-doux); box-shadow: 0 40px 70px rgba(0,0,0,.5); --x: 50%; --y: 50%; --r: 0px; }
.sando-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 2.4s cubic-bezier(.22,.61,.36,1); }
.sando:hover .sando-cadre img { transform: scale(1.06); }
/* la passe clay, visible seulement dans le cercle de la lanterne */
.sando-clay { -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 62%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 62%, transparent 100%); }

.sando-cadre.lanterne { --r: clamp(90px, 13vw, 170px); }
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.sando-cadre { transition: --r .7s cubic-bezier(.22,.61,.36,1); }
.sando-voile { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,14,10,.88) 0%, rgba(8,14,10,.55) 34%, rgba(8,14,10,0) 62%), linear-gradient(0deg, rgba(8,14,10,.6), transparent 40%); }
.sando-coin { position: absolute; width: 26px; height: 26px; border: 1px solid var(--or); opacity: .8; pointer-events: none; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.sando-coin.hg { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.sando-coin.hd { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.sando-coin.bg { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.sando-coin.bd { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.sando:hover .sando-coin.hg { transform: translate(-5px, -5px); }
.sando:hover .sando-coin.hd { transform: translate(5px, -5px); }
.sando:hover .sando-coin.bg { transform: translate(-5px, 5px); }
.sando:hover .sando-coin.bd { transform: translate(5px, 5px); }
.sando-kanji { position: absolute; top: 34px; right: 40px; writing-mode: vertical-rl; font-family: var(--f-jp); font-size-adjust: none; font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: .35em; color: rgba(246,242,234,.82); text-shadow: 0 2px 12px rgba(0,0,0,.6); pointer-events: none; }
.sando-astuce { position: absolute; top: 22px; left: 50%; transform: translate(-50%, -6px); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(246,242,234,.75); background: rgba(8,14,10,.6); padding: 6px 12px; border: 1px solid rgba(209,170,94,.25); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none; white-space: nowrap; }
.sando-cadre.lanterne .sando-astuce { opacity: 1; transform: translate(-50%, 0); }
.sando-texte { position: absolute; left: clamp(20px, 4vw, 52px); bottom: clamp(20px, 4vw, 48px); max-width: min(440px, 52%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.sando-sur { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.sando-titre { font-family: var(--f-nom); font-size-adjust: none; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1; color: var(--blanc); }
.sando-lede { font-size: .82rem; line-height: 1.7; color: rgba(246,242,234,.72); }
.sando-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; align-self: flex-start; padding: 11px 16px 11px 12px;
  border: 1px solid var(--or-doux); background: rgba(8,14,10,.55); color: var(--creme); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  transition: background .4s, color .4s, border-color .4s; }
.sando-cta svg { width: 30px; height: 24px; fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round; transition: stroke .4s; }
.sando-cta i { font-style: normal; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.sando:hover .sando-cta, .sando:focus-visible .sando-cta { background: var(--or); color: #10180f; border-color: var(--or); }
.sando:hover .sando-cta svg, .sando:focus-visible .sando-cta svg { stroke: #10180f; }
.sando:hover .sando-cta i { transform: translateX(6px); }
.sando:focus-visible { outline: none; }
.sando:focus-visible .sando-cadre { outline: 1px solid var(--or); outline-offset: 6px; }

@media (max-width: 760px) {
  .sando-cadre { aspect-ratio: 4 / 5; }
  .sando-cadre img { object-position: 58% 50%; }
  .sando-voile { background: linear-gradient(0deg, rgba(8,14,10,.92) 0%, rgba(8,14,10,.6) 45%, rgba(8,14,10,0) 70%); }
  .sando-texte { max-width: none; right: 20px; }
  .sando-kanji { top: 24px; right: 22px; }
  .sando-astuce { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sando-cadre, .sando-cadre img, .sando-coin { transition: none; }
}