/* Registered artwork shares a fixed hinge. The base stays planted in the palace. */
.sg-gate {
  /* Oversized art must clip without letting focus scroll the planted box. */
  position: fixed; inset: 0; z-index: 90; overflow: hidden; overflow: clip;
  background: #f2e7d2; isolation: isolate; color: #694917;
}
.sg-gate[hidden] { display: none !important; }
.sg-world { position: absolute; inset: 0; transform-origin: 50% 42%; }
.sg-palace { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter:blur(var(--sg-camera-blur,0px)) brightness(var(--sg-camera-brightness,1)); }
/* Only the palace loses focus. The planted box and rising diamond stay sharp. */
.sg-world::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:var(--sg-atmosphere,0);
  background:radial-gradient(ellipse at 50% 34%,#f7dfa624,transparent 56%),radial-gradient(ellipse at 50% 42%,transparent 34%,#5f421f38 100%);
}
/* The highlight is registered to the settled diamond, then continued by the
   entry veil. A soft exposure bloom has no hard circular edge. */
.sg-gate::after {
  content:''; position:absolute; z-index:3; pointer-events:none;
  left:var(--sg-light-x,50%); top:var(--sg-light-y,30%); width:100vmax; height:100vmax;
  background:radial-gradient(closest-side,#fff4d7 0%,#f8e1a8 36%,#efcb7e 52%,#d6a25780 78%,#d6a25700 100%);
  opacity:calc(.52 * var(--sg-bloom,0));
  transform:translate(-50%,-50%) scale(calc(.035 + .315 * var(--sg-bloom,0)));
}
.sg-object {
  position: absolute; left: 50%; top: 63%; width: min(74vw, 40svh, 430px);
  aspect-ratio: 2 / 3; transform: translate(-50%, -50%);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; outline-offset: 8px;
}
.sg-object:active { cursor: grabbing; }
.sg-object[aria-disabled="true"] { cursor: default; }
/* Soft floor shadow plus contacts registered to the three photographed feet. */
.sg-object::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 21.5%; top: 55.5%; width: 55%; height: 11%; border-radius: 50%;
  background: radial-gradient(ellipse,rgba(78,45,20,.28),rgba(87,54,28,.13) 42%,transparent 72%);
  transform: rotate(-18deg); filter: blur(3px);
}
.sg-object::after {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 6.5% 1.15% at 31.15% 69.86%,rgba(64,35,15,.62),rgba(74,43,21,.32) 42%,transparent 100%),
    radial-gradient(ellipse 4.5% .9% at 83.2% 55.4%,rgba(64,35,15,.46),transparent 100%),
    radial-gradient(ellipse 4.25% .8% at 19.2% 49.7%,rgba(64,35,15,.42),transparent 100%);
  filter: blur(.6px);
}
.sg-base, .sg-front, .sg-lid, .sg-lid-face, .sg-reflection, .sg-lid-reflection, .sg-contact {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.sg-base { z-index: 2; }
.sg-lid {
  z-index: 5;
}
/* Native camera crop, registered to the original 1024 × 1536 box coordinates. */
.sg-lid-3d { position: absolute; z-index: 5; left: 17.96875%; top: -7.291667%; width: 75%; height: 66.666667%; opacity: 0; pointer-events: none; }
.sg-lid-3d canvas { display: block; width: 100%; height: 100%; }
.sg-lid-ready .sg-lid-3d { opacity: 1; }
.sg-lid-ready .sg-lid { opacity: 0 !important; visibility: hidden; }
.sg-lid-revealed .sg-lid, .sg-lid-revealed .sg-lid-3d { z-index: 2; }
/* Reuse the actual front wall as an occluder: the ring sits inside the velvet,
   behind the curved rim, before rising clear of the box. No drawn geometry. */
.sg-front {
  z-index: 4;
  clip-path: polygon(0 36%,19% 36%,21% 42%,27% 48%,33% 51.7%,43% 50.5%,55% 48.2%,67% 45.2%,76% 41.8%,80% 38.5%,83% 34.5%,100% 34.5%,100% 100%,0 100%);
}
.sg-reflection, .sg-lid-reflection { z-index: 0; opacity: .035; filter: blur(3px); transform-origin: 50% 69.8%; }
.sg-reflection { transform: scaleY(-1); }
.sg-lid-reflection { transform: scaleY(-1); }
.sg-contact { display: none; }
.sg-ring-lift {
  position: absolute; z-index: 3; left: 28%; top: 26%; width: 44%; aspect-ratio: 1;
  pointer-events: none; transform-origin: 50% 80%;
  /* The gate's pauseable RAF drives both travel and scale. The transform never
     starts a second clock when the fully open lid is finally painted. */
  transform: translateY(calc(12% * (1 - var(--sg-flight-progress,0)) + var(--ring-rise-y,-220%) * var(--sg-flight-progress,0))) scale(calc(.85 + 1.05 * var(--sg-flight-progress,0)));
}
.sg-ring-3d, .sg-ring-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-ring-3d { opacity: 0; }
.sg-ring-3d canvas { display: block; width: 100%; height: 100%; }
.sg-ring-fallback { object-fit: contain; transform: scale(1.9); }
.sg-ring-ready .sg-ring-3d { opacity: 1; }
.sg-ring-ready .sg-ring-fallback { opacity: 0; }
.sg-ring-glint {
  position: absolute; z-index: 6; left: 37.85871%; top: 23.89591%; width: 26%; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  background: radial-gradient(circle,#fff 0 3%,#fff9d5cc 8%,#ffe0a955 24%,transparent 60%);
  filter: drop-shadow(0 0 2px #ffedb5);
}
.sg-ring-glint::before,.sg-ring-glint::after {
  content: ''; position: absolute; inset: 47% 0; border-radius: 50%;
  background: linear-gradient(90deg,transparent,#fff8dd 32%,#fff 50%,#fff8dd 68%,transparent);
}
.sg-ring-glint::after { transform: rotate(90deg); }
.sg-object.sg-touched .sg-lid-reflection { opacity: 0; transition: opacity 350ms ease; }
.sg-mast {
  position: absolute; top: max(7svh, env(safe-area-inset-top)); left: 6%; right: 6%;
  text-align: center; pointer-events: none; transition: opacity 350ms ease;
}
.sg-wordmark, .sg-dedication, .sg-hint, .sg-open, .sg-skip, .sg-status {
  font-family: 'Jost', sans-serif; font-weight: 500;
}
.sg-wordmark { margin: 0; font-size: clamp(10px, 2.6vw, 13px); line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; }
.sg-names {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .04em .14em;
  margin: clamp(12px, 3svh, 30px) 0 6px; font-family: 'Mrs Saint Delafield', cursive;
  font-weight: 400; font-size: clamp(56px, 11vw, 102px); line-height: 1.05; color: #643c17;
}
.sg-names span { max-width: 100%; overflow-wrap: anywhere; }
.sg-names em { font-family: 'Cormorant Garamond', Georgia, serif; font-size: .44em; font-weight: 400; }
.sg-dedication { margin: 0; text-transform: uppercase; font-size: 10px; line-height: 1.7; letter-spacing: .2em; }
.sg-actions {
  position: absolute; left: 16px; right: 16px; bottom: max(7svh, calc(env(safe-area-inset-bottom) + 24px));
  text-align: center; transition: opacity 300ms ease;
}
.sg-hint { margin: 0 0 8px; font-size: 10px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; }
.sg-open {
  color: #694917; background: #fcf6e9; border: 1px solid #b99b63; border-radius: 0;
  min-height: 43px; padding: 10px 24px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.sg-open:disabled, .sg-skip:disabled { cursor: wait; }
.sg-skip {
  position: absolute; right: max(20px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top));
  padding: 9px 0; color: #694917; background: transparent; border: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
}
.sg-status { min-height: 18px; margin: 7px 0 0; font-size: 10px; letter-spacing: .025em; }
.sg-gate.sg-opening .sg-mast, .sg-gate.sg-opening .sg-actions { opacity: 0; pointer-events: none; }
.sg-gate.sg-opening .sg-ring-lift { will-change: transform; }
.sg-gate.sg-opening .sg-ring-glint { animation: sgGemGlint 750ms 5950ms ease-in-out both; }
.sg-gate.sg-opening .sg-palace { will-change:filter; }
.sg-gate.sg-transition .sg-world { transform: none; }
.sg-gate.sg-transition::after { opacity:0; }
.sg-gate.sg-leaving { opacity: 0; transition: opacity 650ms ease; pointer-events: none; }
@keyframes sgGemGlint {
  0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-12deg); }
  42% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(0deg); }
  65% { opacity: .8; transform: translate(-50%,-50%) scale(.85) rotate(8deg); }
}
.sg-gate.sg-paused * { animation-play-state: paused !important; }
@media (min-width: 900px) {
  .sg-palace { object-position: 50% 54%; }
  .sg-mast { top: 8svh; }
  .sg-names { margin-top: 15px; }
}
@media (max-height: 650px) and (orientation: landscape) {
  .sg-mast { top: 6svh; }
  .sg-names { font-size: 48px; margin: 8px 0 0; }
  .sg-object { top: 62%; width: 34svh; }
  .sg-actions { bottom: 3svh; }
  .sg-hint, .sg-dedication { display: none; }
  .sg-status { min-height: 0; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-gate *, .sg-gate.sg-leaving { animation: none !important; transition: none !important; }
}