/* The way in for a newcomer (src/opening.js; the user, 2026-10-27): the opening clip over black with its subtitles
   and Skip, then the gate up close with the talk box over it. Both sit under the title (20) while it fades, over
   the painting; the creator (36) opens over the gate. */
.opening,.gate-scene{position:fixed;inset:0;z-index:19;background:#000;opacity:0;transition:opacity .5s ease}
.opening.on{opacity:1}
.gate-scene{transition-duration:.9s}
.gate-scene.on{opacity:1}
.op-video,.gs-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:#000}
/* the subtitles: warm white, in the very middle of the picture, a little larger since 2026-10-27 (they were at the
   bottom, 15-23 px). Since 2026-10-29 each line comes in under the one before while that one fades out slowly
   (src/opening.js). A paragraph's lines are rows of one block; every paragraph's block sits in the one grid cell,
   in the middle, so nothing moves; .op-say is the screen reader's copy. */
.op-sub{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(94vw,1100px);display:grid;
  text-align:center;font-family:"Alegreya","SS Dodum",Georgia,serif;font-size:clamp(17px,1.75vw,28px);line-height:1.6;letter-spacing:.01em;
  color:#f6e7cf;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 16px rgba(0,0,0,.55);opacity:0;pointer-events:none;word-break:keep-all}
.op-para{grid-area:1/1;align-self:center;display:block}
.op-line{display:block;white-space:nowrap;opacity:0}
.op-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:520px){.op-sub{font-size:17px}.op-line{white-space:normal}}
/* Skip, at the top right (the user's picture of the gate) */
.op-skip{position:absolute;z-index:6;right:max(18px,2.4vw);top:calc(var(--safe-t,0px) + max(14px,2.2vh));padding:8px 10px;border:0;background:none;
  color:rgba(255,246,230,.86);font:500 15px/1 var(--f-ui);letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.75);cursor:pointer;opacity:0;transition:opacity .4s,color .15s}
.op-skip:hover{color:#fff}
.op-skip[hidden]{display:none}
.opening.on .op-skip,.gate-scene.on .op-skip{opacity:1}
@media (prefers-reduced-motion:reduce){.opening,.gate-scene{transition:none}}