/* ─────────────────────────────────────────────────────────────
   Jinar — opening announcement (see js/announce.js)
   A voucher-like card that fades and glides in; no scale "pop".
   ───────────────────────────────────────────────────────────── */
.jann{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(24,20,14,.46);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .42s cubic-bezier(.2,.8,.2,1);
}
.jann.on{opacity:1}
html.jann-lock,html.jann-lock body{overflow:hidden}

.jann-card{
  position:relative;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  padding:40px 34px 28px;text-align:center;color:#FBF6EA;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(255,232,176,.22),transparent 60%),
    linear-gradient(160deg,#B8821A 0%,#A8740F 45%,#8C5F0B 100%);
  border-radius:28px;box-shadow:0 40px 90px rgba(40,26,4,.38);
  transform:translateY(26px);opacity:0;
  transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .5s ease;
  /* notched voucher sides */
  -webkit-mask:radial-gradient(circle 13px at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 13px at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 13px at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat;
}
.jann-card:focus{outline:none}
.jann.on .jann-card{transform:none;opacity:1;transition-delay:.06s}
.jann-card::before{                 /* stitched line inside the edge */
  content:"";position:absolute;inset:10px;border-radius:20px;pointer-events:none;
  border:1px dashed rgba(251,246,234,.42);
}

.jann-x{
  position:absolute;top:16px;right:16px;z-index:1;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(251,246,234,.16);border:1px solid rgba(251,246,234,.35);color:#FBF6EA;
  transition:background .25s ease,transform .35s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.jann-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.jann-x:hover{background:rgba(251,246,234,.3);transform:rotate(90deg)}
.jann-x:focus-visible,.jann-go:focus-visible,.jann-alt:focus-visible{outline:2px solid #FBF6EA;outline-offset:3px}

.jann-mark{display:block;margin:0 auto 14px;width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.jann-kick{
  margin:0;font:500 11px/1.4 'Jost',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(251,246,234,.86);
}
.jann-big{
  margin:10px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(64px,18vw,84px);line-height:.95;letter-spacing:-.01em;color:#FFFDF6;
}
.jann-big span{display:block;margin-top:6px;font-style:italic;font-size:.4em;line-height:1.1;color:rgba(251,246,234,.92)}
.jann-text{margin:18px auto 0;max-width:30ch;font:400 14.5px/1.6 'Jost',system-ui,sans-serif;color:rgba(251,246,234,.9)}

.jann-acts{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.jann-go,.jann-alt{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:100px;
  font:500 13px/1 'Jost',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.jann-go{background:#FBF6EA;color:#1F1A12}
.jann-go span{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.jann-go:hover{background:#1F1A12;color:#FBF6EA}
.jann-go:hover span{transform:translateX(4px)}
.jann-alt{border:1px solid rgba(251,246,234,.45);color:#FBF6EA}
.jann-alt:hover{background:rgba(251,246,234,.14);border-color:#FBF6EA}
.jann-fine{margin:18px 0 0;font:400 11.5px/1.5 'Jost',system-ui,sans-serif;letter-spacing:.04em;color:rgba(251,246,234,.7)}

@media (max-width:480px){
  .jann-card{padding:36px 24px 24px;border-radius:24px}
  .jann-card::before{inset:8px;border-radius:17px}
}
@media (prefers-reduced-motion:reduce){
  .jann,.jann-card{transition:none}
}