/* ============================================================
   SITE SEEING - The Viewfinder
   A golden-hour scenic overlook. One object, not a row of things:
   a coin-operated brass viewfinder the visitor dials through to
   see standalone web projects. Distinct from every other biome -
   warm daylight amber/rose instead of night, brass/verdigris metal
   instead of wood or stone. Nested inside #destPanel like Castle/
   Peak/Village (NOT bypassing it like Forest - that bypass caused
   a real bug once already; this scene relies on destPanel's own
   show/opacity system exactly like every other panel-based biome).
   ============================================================ */
.siteseeing-scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease;
  overflow:hidden;
  font-family:'Spectral', serif;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%23ff9e6b%22%20stroke-width%3D%221.6%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%226%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2218%22%20x2%3D%2212%22%20y2%3D%2222%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%226%22%20y2%3D%2212%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%2218%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23ff9e6b%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 12 12, auto;
}

.ss-topbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 34px;
}
.ss-title{
  margin:0; font-weight:400;
  font-family:'Cinzel', serif; font-size:22px; letter-spacing:.04em;
  color:#fbe9dd;
}
.ss-title strong{ color:#ff9e6b; }
.ss-return{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:.06em;
  color:#fbe9dd; background:rgba(58,36,24,.55); border:1px solid rgba(255,177,92,.35);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.ss-return:hover, .ss-return:focus-visible{
  background:rgba(255,158,107,.22); border-color:#ff9e6b;
}
.ss-return:active{ transform:scale(.95); }

/* ---------- OVERLOOK BACKDROP ---------- */
.ss-overlook{
  position:relative; flex:1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ss-horizon{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    #1e1030 0%, #3c1f42 16%, #6b3a4e 32%, #a94d4a 48%, #d6683f 62%, #ffa855 74%, #ffcf94 86%, #ffe9cf 100%);
}
.ss-horizon::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:60%;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,208,140,.4), rgba(255,208,140,0) 70%);
  pointer-events:none;
}
.ss-valley{
  position:absolute; left:0; right:0; bottom:0; height:48%; z-index:0;
}
.ss-valley svg{ display:block; width:100%; height:100%; overflow:visible; }
.ss-ridge-far{ fill:#8a5c72; opacity:.55; }
.ss-ridge-mid{ fill:#5c3650; opacity:.85; }
.ss-ridge-near{ fill:#2a1826; opacity:1; }
.ss-river{
  fill:none; stroke:url(#ssRiverGrad); stroke-width:3.2; stroke-linecap:round; opacity:.55;
}
.ss-river-glint{
  fill:none; stroke:#fff6e2; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:14 340; stroke-dashoffset:0;
  animation:ssRiverGlint 4.5s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,240,210,.8));
}
@keyframes ssRiverGlint{ from{ stroke-dashoffset:354; } to{ stroke-dashoffset:0; } }
.ss-sun{
  position:absolute; left:50%; top:42%; width:200px; height:200px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff8e6 0%, #ffe2ac 42%, rgba(255,216,172,0) 72%);
  border-radius:50%;
  filter:blur(1px);
  animation:ssSunPulse 8s ease-in-out infinite;
}
.ss-sun-glow{
  position:absolute; left:50%; top:50%; width:520px; height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,214,150,.35) 0%, rgba(255,180,110,.14) 45%, rgba(255,180,110,0) 75%);
  border-radius:50%;
  pointer-events:none;
}
@keyframes ssSunPulse{ 0%,100%{ filter:blur(1px) brightness(1); } 50%{ filter:blur(1.5px) brightness(1.08); } }

/* ---------- THE VIEWFINDER DEVICE ---------- */
.ss-viewfinder{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:60px;
}

.ss-vf-plaque{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:.08em;
  color:#ffe9cf; background:rgba(46,28,20,.55); border:1px solid rgba(255,177,92,.3);
  border-radius:6px; padding:6px 16px; margin-bottom:14px;
  text-transform:uppercase;
}

.ss-vf-frame{
  position:relative;
  width:min(72vw, 560px); aspect-ratio: 2 / 1;
}
.ss-vf-lens{
  position:absolute; inset:0;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><circle cx="70" cy="50" r="49" fill="white"/><circle cx="130" cy="50" r="49" fill="white"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><circle cx="70" cy="50" r="49" fill="white"/><circle cx="130" cy="50" r="49" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:#0c0810;
  overflow:hidden;
}
.ss-vf-view{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease;
}
.ss-vf-view.ss-vf-active{ opacity:1; visibility:visible; }
.ss-vf-idle-horizon{
  position:absolute; inset:-10%;
  background:linear-gradient(180deg,
    #1e1030 0%, #4a2540 26%, #a94d4a 50%, #ffa855 70%, #ffe9cf 100%);
}
.ss-vf-idle-sun{
  position:absolute; left:50%; top:38%; width:22%; height:38%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff8e6 0%, #ffe2ac 40%, rgba(255,216,172,0) 72%);
  border-radius:50%;
}
.ss-vf-idle-hill{
  position:absolute; left:-8%; right:-8%; bottom:-10%; height:38%;
  background:linear-gradient(180deg, #3a2436, #1e1220);
  clip-path:polygon(0% 100%, 0% 55%, 14% 35%, 30% 52%, 48% 28%, 66% 50%, 82% 32%, 100% 46%, 100% 100%);
}
.ss-vf-idle-birds{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55;
}
.ss-vf-idle-birds path{
  fill:none; stroke:rgba(58,30,20,.75); stroke-width:1.6; stroke-linecap:round;
}
.ss-vf-iframe{ border:0; width:100%; height:100%; background:#0c0810; }
.ss-vf-gallery{ background:#0c0810; }
.ss-vf-gallery img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ss-vf-gnext{
  position:absolute; right:14%; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(20,12,10,.55); color:#ffe9cf; border:1px solid rgba(255,216,172,.4);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease;
}
.ss-vf-gnext:hover{ background:rgba(255,158,107,.35); }
.ss-vf-gnext:active{ transform:translateY(-50%) scale(.9); }

.ss-vf-vignette{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 50%, transparent 55%, rgba(8,4,6,.75) 100%);
}

.ss-vf-iris{
  position:absolute; inset:0; z-index:5;
  background:#0c0810;
  border-radius:50%;
  transform:scale(2.4);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.7,0,.3,1), opacity .32s ease;
}
.ss-vf-iris.ss-vf-iris-closed{
  transform:scale(0.02);
  opacity:1;
}

.ss-vf-rim{
  position:absolute; inset:-3%;
  width:106%; height:106%;
  pointer-events:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));
}
.ss-vf-rim-circle{
  fill:none;
  stroke:url(#ssBrassGrad);
  stroke-width:5;
}

.ss-vf-enter{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  color:#2a1638; background:#ffb15c; border:1px solid #7a5230;
  border-radius:999px; padding:8px 20px; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transition:background .2s ease, transform .15s ease;
  z-index:6;
}
.ss-vf-enter:hover{ background:#ffcf94; transform:translateX(-50%) translateY(-2px); }
.ss-vf-enter:active{ transform:translateX(-50%) scale(.95); }

.ss-vf-stand{
  width:26px; height:64px; margin-top:26px;
  background:linear-gradient(90deg, #6b4a2e, #a97c4f 45%, #6b4a2e);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.ss-vf-base{
  width:120px; height:16px; margin-top:-2px;
  background:linear-gradient(180deg, #7a5230, #4a3320);
  border-radius:8px/6px;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}

/* ---------- DIALS ---------- */
.ss-vf-dial{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d8a86b, #8a5f38 70%, #5c3d24);
  border:2px solid #3d2a18;
  color:#2a1638; font-size:22px; font-weight:700;
  cursor:pointer; z-index:6;
  box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.3);
  transition:transform .15s ease;
}
.ss-vf-dial:hover{ filter:brightness(1.1); }
.ss-vf-dial:active{ transform:translateY(-50%) scale(.9) rotate(20deg); }
.ss-vf-dial-prev{ left:-14px; }
.ss-vf-dial-next{ right:-14px; }
@media (max-width: 640px){
  .ss-vf-dial-prev{ left:-8px; width:42px; height:42px; }
  .ss-vf-dial-next{ right:-8px; width:42px; height:42px; }
}

/* ---------- COIN SLOT (one-time flavor animation) ---------- */
.ss-vf-coinslot{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:26px; height:8px; border-radius:2px;
  background:#2a1a10; box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
  z-index:6;
}
.ss-vf-coin{
  position:absolute; left:50%; top:-40px; width:20px; height:20px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #d8a03c 70%, #a97c1a);
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 0 1px #7a5b12;
}
.ss-vf-coin.ss-vf-coin-drop{
  animation: ssCoinDrop 900ms cubic-bezier(.6,0,.4,1) 1;
}
@keyframes ssCoinDrop{
  0%{ opacity:1; top:-40px; transform:translateX(-50%) rotate(0deg); }
  70%{ opacity:1; top:2px; transform:translateX(-50%) rotate(340deg); }
  85%{ opacity:1; top:2px; transform:translateX(-50%) scaleY(.3) rotate(340deg); }
  100%{ opacity:0; top:2px; transform:translateX(-50%) scaleY(.1) rotate(340deg); }
}

/* ---------- CAPTION ---------- */
.ss-vf-caption{
  margin-top:22px; text-align:center; max-width:420px;
}
.ss-vf-caption-title{
  font-family:'Cinzel', serif; font-size:20px; color:#fbe9dd; letter-spacing:.02em;
}
.ss-vf-caption-sub{
  font-family:'Spectral', serif; font-style:italic; font-size:14px;
  color:rgba(251,233,221,.75); margin-top:4px;
}
.ss-vf-caption-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px;
}
.ss-vf-caption-tags span{
  font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:.05em;
  color:#ffd8ac; background:rgba(255,158,107,.12); border:1px solid rgba(255,177,92,.3);
  border-radius:999px; padding:4px 11px;
}

/* ---------- EXPANDED "AT THE EYEPIECE" OVERLAY ---------- */
.ss-expand-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,8,10,.92);
  opacity:0; visibility:hidden; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s ease;
}
.ss-expand-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.ss-expand-close{
  position:absolute; top:24px; right:28px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(58,36,24,.7); color:#ffe9cf; border:1px solid rgba(255,177,92,.4);
  font-size:18px; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.ss-expand-close:hover{ background:#ff9e6b; color:#2a1638; }
.ss-expand-close:active{ transform:scale(.9); }
.ss-expand-frame{
  position:relative;
  width:min(88vw, 1000px); height:min(80vh, 640px);
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 6px rgba(169,124,79,.45), 0 0 0 8px rgba(0,0,0,.5);
  background:#0c0810;
}
.ss-expand-frame iframe{ border:0; width:100%; height:100%; background:#0c0810; }
.ss-expand-frame .ss-vf-gallery{ position:absolute; inset:0; }
.ss-expand-frame .ss-vf-gallery img{ object-fit:contain; background:#0c0810; }

/* ---------- AMBIENT: GOD RAYS ---------- */
.ss-rays{
  position:absolute; left:50%; top:50%; width:640px; height:640px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:ssRaysRotate 70s linear infinite;
}
.ss-ray{
  position:absolute; left:50%; top:50%; width:9px; height:48%; margin-left:-4.5px;
  background:linear-gradient(180deg, rgba(255,245,222,.85), rgba(255,214,150,.18) 55%, rgba(255,214,150,0));
  transform-origin:50% 0%;
  animation:ssRaysBreathe 5s ease-in-out infinite;
  filter:blur(.5px);
}
.ss-ray:nth-child(1){ transform:rotate(0deg); }
.ss-ray:nth-child(2){ transform:rotate(45deg); animation-delay:-.6s; }
.ss-ray:nth-child(3){ transform:rotate(90deg); animation-delay:-1.2s; }
.ss-ray:nth-child(4){ transform:rotate(135deg); animation-delay:-1.8s; }
.ss-ray:nth-child(5){ transform:rotate(180deg); animation-delay:-2.4s; }
.ss-ray:nth-child(6){ transform:rotate(225deg); animation-delay:-3s; }
.ss-ray:nth-child(7){ transform:rotate(270deg); animation-delay:-3.6s; }
.ss-ray:nth-child(8){ transform:rotate(315deg); animation-delay:-4.2s; }
@keyframes ssRaysRotate{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ssRaysBreathe{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

/* ---------- AMBIENT: CLOUDS / BIRDS / BALLOON / DUST / EPHEMERA ---------- */
.ss-cloud-layer, .ss-bird-layer, .ss-balloon-layer, .ss-dust-layer, .ss-ephemera-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.ss-cloud-layer{
  transform:translate(var(--ss-px, 0px), var(--ss-py, 0px));
  will-change:transform;
}
.ss-valley, .ss-sun{ will-change:transform; }
.ss-cloud-svg{
  position:absolute; top:0; left:0; pointer-events:none; will-change:transform;
  overflow:visible;
}
.ss-cloud-svg path{ fill:url(#ssCloudGrad); }
.ss-cloud-svg.far path{ fill:url(#ssCloudGradFar); }

.ss-flyer{ position:absolute; pointer-events:none; will-change:transform; }
.ss-flyer svg{ display:block; width:100%; height:100%; overflow:visible; }
.ss-flyer .wing{ transform-box:view-box; }
.ss-flyer .wing-l{ transform-origin:12px 6px; animation:flapBirdL .4s cubic-bezier(.4,0,.2,1) infinite; }
.ss-flyer .wing-r{ transform-origin:12px 6px; animation:flapBirdR .4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ssFlyAcross{
  from{ transform:translate(-8vw,0) scale(1); }
  to{ transform:translate(108vw,-4vh) scale(.9); }
}
@keyframes ssFlyAcrossRev{
  from{ transform:translate(108vw,0) scale(1) scaleX(-1); }
  to{ transform:translate(-8vw,-3vh) scale(.85) scaleX(-1); }
}

.ss-balloon{ position:absolute; pointer-events:none; opacity:.85; }
.ss-balloon svg{ display:block; width:100%; height:100%; }
@keyframes ssBalloonDrift{
  from{ transform:translateX(-14vw) translateY(0); }
  to{ transform:translateX(114vw) translateY(-3vh); }
}

.ss-dust{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,170,.95), rgba(255,177,92,0));
  will-change:transform,opacity;
}

.ss-ephemera{
  position:absolute; bottom:6%; width:26px; height:18px;
  opacity:0; pointer-events:none;
  background:linear-gradient(160deg,#fbe9dd,#e8c9a8);
  border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.ss-ephemera.postcard::after{
  content:''; position:absolute; inset:3px; border:1px dashed rgba(120,80,50,.4);
}
.ss-ephemera.ticket{ width:20px; height:12px; background:linear-gradient(160deg,#ffe9cf,#d8a86b); }
@keyframes ssEphemeraTumble{
  0%{ opacity:0; transform:translate(-10vw,0) rotate(0deg); }
  8%{ opacity:.9; }
  92%{ opacity:.85; }
  100%{ opacity:0; transform:translate(110vw,-6vh) rotate(540deg); }
}

/* ---------- FOREGROUND: GRASS / REEDS ---------- */
.ss-grass{
  position:absolute; left:0; right:0; bottom:0; height:38px; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 4%; pointer-events:none;
}
.ss-reed{
  display:block; width:3px; height:26px;
  background:linear-gradient(180deg, #6b4228, #2e1c14);
  border-radius:3px 3px 0 0;
  transform-origin:bottom center;
  animation:ssReedSway 3.4s ease-in-out infinite;
  opacity:.85;
}
.ss-reed:nth-child(odd){ height:32px; animation-duration:3.9s; }
.ss-reed:nth-child(3n){ height:20px; animation-duration:2.8s; }
.ss-reed:nth-child(2n){ animation-delay:-1.1s; }
.ss-reed:nth-child(5n){ animation-delay:-2s; }
@keyframes ssReedSway{
  0%,100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(5deg); }
}
.ss-bloom{
  display:block; width:3px; height:22px; position:relative;
  background:linear-gradient(180deg, #5c3a22, #2e1c14);
  transform-origin:bottom center;
  animation:ssReedSway 3.6s ease-in-out infinite;
}
.ss-bloom::after{
  content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe2ac, #ff9e6b 65%, #c9633f);
  box-shadow:0 0 4px rgba(255,158,107,.6);
}
.ss-bloom:nth-child(3n){ animation-delay:-1.6s; }

/* ---------- VIEWFINDER DEVICE: IDLE SWAY WRAPPER ---------- */
.ss-vf-device{
  display:flex; flex-direction:column; align-items:center;
  animation:ssDeviceSway 6.5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes ssDeviceSway{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-1.5px) rotate(.15deg); }
}

/* ---------- FLAG / PENNANT ---------- */
.ss-vf-flag{
  position:absolute; top:-30px; left:50%; width:2px; height:32px;
  background:#3d2a18; z-index:1;
}
.ss-vf-flag::after{
  content:''; position:absolute; top:0; left:2px; width:18px; height:12px;
  background:linear-gradient(135deg,#ff9e6b,#c9633f);
  clip-path:polygon(0 0, 100% 20%, 0 100%);
  transform-origin:left center;
  animation:ssFlagFlutter 2.6s ease-in-out infinite;
}
@keyframes ssFlagFlutter{
  0%,100%{ transform:skewY(4deg) scaleX(1); }
  50%{ transform:skewY(-6deg) scaleX(.94); }
}

/* ---------- GROUNDING SHADOW ---------- */
.ss-vf-shadow{
  width:150px; height:18px; margin-top:-6px;
  background:radial-gradient(ellipse, rgba(20,10,8,.45), transparent 72%);
  border-radius:50%;
}

/* ---------- BINOCULAR POLISH: BRIDGE / KNURL / BEVEL / WEATHERING / GLOSS / GLINT ---------- */
.ss-vf-bridge{
  fill:url(#ssBrassGrad); stroke:#4a3320; stroke-width:1.2;
}
.ss-vf-bridge-screw{ fill:#2e1c10; stroke:rgba(255,255,255,.35); stroke-width:.4; }
.ss-vf-bridge-seam{ stroke:#3d2812; stroke-width:1; opacity:.28; }

.ss-vf-knurl{
  fill:none; stroke:#5c3d24; stroke-width:2; stroke-dasharray:1.6 2.2; opacity:.55;
}

.ss-vf-rim-highlight{ stroke:#f0cf9a; stroke-width:1.6; opacity:.75; transform:translate(-1.1px,-1.1px); }
.ss-vf-rim-shadow{ stroke:#3d2812; stroke-width:2.2; opacity:.6; transform:translate(1.2px,1.4px); }

.ss-vf-verdigris{ fill:#4a7a5c; opacity:.28; }
.ss-vf-scratch{ stroke:rgba(255,255,255,.3); stroke-width:.6; fill:none; }

.ss-vf-screw{ fill:#2e1c10; stroke:rgba(255,240,210,.4); stroke-width:.5; }

.ss-vf-gloss{
  fill:none; stroke:rgba(255,255,255,.4); stroke-width:3; stroke-linecap:round; opacity:.5;
}

.ss-vf-glint{
  fill:rgba(255,255,255,.55);
  filter:blur(4px);
  animation:ssGlintSweep 7s ease-in-out infinite;
  opacity:0;
}
@keyframes ssGlintSweep{
  0%,90%{ opacity:0; transform:translateX(0); }
  91%{ opacity:.7; }
  96%{ opacity:.5; transform:translateX(230px); }
  100%{ opacity:0; transform:translateX(250px); }
}

@media (prefers-reduced-motion: reduce){
  .ss-return, .ss-vf-dial, .ss-vf-enter{ transition-duration:.001s !important; }
  .ss-vf-iris{ transition-duration:.001s !important; }
}