/* ─────────────── entry — the supplied lens opener ───────────────
   Markup, marks and motion are the supplied file verbatim: the same six
   blades, the same 1250 ms + 12 ms stagger, the same glow, seams, sheen and
   bezel. Only the selectors are scoped under .entry, and the logo JPEG —
   byte-identical to the data URI it arrived as — is served from img/door/.
   ─────────────────────────────────────────────────────────────────── */
.entry{
    --open: cubic-bezier(.22,.68,.24,1);
    --close: cubic-bezier(.4,0,.26,1);
  }
  .entry{height:100%}
  .entry .stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(18px,3.4vmin,32px);
    padding:4vmin;
  }.entry .lens{
    -webkit-appearance:none;
    appearance:none;
    border:0;
    margin:0;
    padding:0;
    background:transparent;
    width:min(84vmin,620px);
    display:block;
    cursor:pointer;
    border-radius:14px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:transform 300ms var(--open);
  }.entry .lens:active{ transform:scale(.984); }.entry .lens:focus{ outline:none; }.entry .lens:focus-visible{ outline:2px solid #1b8fa0; outline-offset:18px; }.entry .mark{ position:relative; display:block; }.entry .mark img{ display:block; width:100%; height:auto; }.entry .glow{
    position:absolute;
    left:50%;
    top:42.4%;
    width:76%;
    aspect-ratio:1/1;
    transform:translate(-50%,-50%) scale(.9);
    background:radial-gradient(circle at 50% 50%,
      rgba(45,196,212,.22) 0%,
      rgba(45,196,212,.08) 42%,
      rgba(45,196,212,0) 68%);
    opacity:0;
    pointer-events:none;
    transition:opacity 760ms ease, transform 1400ms var(--open);
  }.entry .lens.open .glow{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }.entry .iris{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
    pointer-events:none;
    filter:drop-shadow(0 16px 26px rgba(4,18,28,.26));
    transition:opacity 260ms ease;
  }.entry .lens.open .iris{
    opacity:0;
    transition:opacity 260ms ease 940ms;
  }.entry .blade{
    transform-box:view-box;
    transform-origin:1020px 869px;
    transform:rotate(var(--a)) translateX(0px);
    transition:transform 1000ms var(--close);
    will-change:transform;
  }.entry .lens.open .blade{
    transform:rotate(calc(var(--a) + 58deg)) translateX(742px);
    transition:transform 1250ms var(--open);
  }.entry .lens.open .blade:nth-child(1){ transition-delay:0ms; }.entry .lens.open .blade:nth-child(2){ transition-delay:12ms; }.entry .lens.open .blade:nth-child(3){ transition-delay:24ms; }.entry .lens.open .blade:nth-child(4){ transition-delay:36ms; }.entry .lens.open .blade:nth-child(5){ transition-delay:48ms; }.entry .lens.open .blade:nth-child(6){ transition-delay:60ms; }.entry .seams{ transition:opacity 240ms ease 520ms; }.entry .lens.open .seams{ opacity:0; transition:opacity 260ms ease 40ms; }.entry .sheen{ transition:opacity 460ms ease 340ms; }.entry .lens.open .sheen{ opacity:0; transition:opacity 480ms ease; }.entry .bezel{ transition:opacity 300ms ease 640ms; }.entry .lens.open .bezel{ opacity:0; transition:opacity 560ms ease 240ms; }.entry .hint{
    margin:0;
    font-size:11px;
    line-height:1;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#7fb3bd;
    user-select:none;
  }
@media (prefers-reduced-motion: reduce){
.entry .lens, .entry .glow, .entry .iris, .entry .blade, .entry .seams, .entry .sheen, .entry .bezel, .entry .lens.open .blade, .entry .lens.open .iris{
      transition-duration:1ms !important;
      transition-delay:0ms !important;
    }
}

/* the surface the supplied file puts the lens on: white, centred, system sans */
.entry{
  background:#ffffff;
  display:grid;
  place-items:center;
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* the 3D layer sits above the artwork and below the skip control; the lens's
   own blades paint over the aperture until they retract, so nothing shows
   through a closed lens */
.entry__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;
}
.entry .stage{position:relative;z-index:2}
.entry__skip{
  position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  bottom:clamp(18px,4vh,34px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(18,84,107,.45);border-bottom:1px solid rgba(18,84,107,.18);
  padding-bottom:2px;
}
.entry__skip:hover{color:rgba(18,84,107,.85)}
@media (prefers-reduced-motion:reduce){
  .entry__skip{transition:none}
}