/* The torii entrance (assets/intro.js) for pages that don't load site.css, such as /onidojo/. Kept in step with the
   gate rules in site.css. */
#gate { --red: #ff3147; --ink: #f6eef0; --muted: #b9a5a8; --soft: #7d7175;
  --ui: "Inter", system-ui, sans-serif; --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace; --jp: "Shippori Mincho B1", "Yu Mincho", serif; font-family: var(--ui); color: var(--ink); }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.gate-open, html.gate-open body { overflow: hidden; }
#gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 0; padding: 20px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(44, 7, 15, .55), rgba(7, 3, 4, .35) 70%); opacity: 0; transition: opacity .6s ease; text-align: center; }
#gate.show { opacity: 1; }
#gate .gate-glow { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 49, 71, .35), transparent 65%);
  filter: blur(30px); animation: breathe 5s ease-in-out infinite; pointer-events: none; }
#gate .torii { position: relative; width: min(400px, 70vw, 42vh); height: auto; overflow: visible; transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity 1s ease; }
#gate .d { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.6s ease forwards; }
#gate .d2 { animation-delay: .25s; } #gate .d3 { animation-delay: .4s; } #gate .d4 { animation-delay: .55s; } #gate .d5 { animation-delay: .7s; } #gate .d6 { animation-delay: .85s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
#gate .gate-text { position: relative; margin-top: 18px; transition: opacity .5s ease, transform .6s ease; }
#gate .gate-kicker { font-size: 12px; letter-spacing: 6px; color: var(--red); text-transform: uppercase; font-weight: 800; text-shadow: 0 0 12px rgba(255, 49, 71, .6); opacity: 0; animation: up .8s 1.1s ease forwards; }
#gate .gate-name { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.5px; margin-top: 6px; opacity: 0; animation: up .8s 1.25s ease forwards; }
#gate .gate-jp { font-family: var(--jp); font-size: clamp(15px, 2.2vw, 20px); color: var(--muted); letter-spacing: 3px; opacity: 0; animation: up .8s 1.4s ease forwards; }
#gate .gate-tag { margin-top: 10px; color: var(--soft); font-size: 14px; opacity: 0; animation: up .8s 1.55s ease forwards; }
#gate .gate-choose { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; opacity: 0; animation: up .8s 1.75s ease forwards; }
#gate .gate-choose button { min-width: 170px; padding: 14px 22px; border-radius: 14px; border: 1px solid rgba(255, 49, 71, .45); background: rgba(20, 8, 11, .7); color: var(--ink);
  font: inherit; cursor: pointer; display: grid; gap: 2px; transition: transform .2s, box-shadow .2s, background .2s; }
#gate .gate-choose button b { font-size: 20px; font-family: var(--ui); }
#gate .gate-choose button[data-lang="ja"] b { font-family: var(--jp); }
#gate .gate-choose button span { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
#gate .gate-choose button:hover, #gate .gate-choose button:focus-visible { transform: translateY(-2px); background: rgba(255, 49, 71, .18); box-shadow: 0 0 30px rgba(255, 49, 71, .45); outline: none; }
#gate .gate-choose button.pref { background: var(--red); border-color: var(--red); box-shadow: 0 0 34px rgba(255, 49, 71, .55); }
#gate .gate-choose button.pref span { color: rgba(255, 255, 255, .85); }
#gate .gate-hint { margin-top: 16px; font-size: 13px; color: var(--soft); opacity: 0; animation: up .8s 2s ease forwards; }
@keyframes up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* walking through: the gate rushes toward you, then the site appears */
#gate.through { background: transparent; transition: background .9s ease .2s; pointer-events: none; }
#gate.through .torii { transform: scale(5.5); opacity: 0; }
#gate.through .gate-text, #gate.through .gate-glow { opacity: 0; transform: scale(1.1); }
#gate.leave { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #gate .d { stroke-dashoffset: 0; animation: none; }
  #gate [class^="gate-"] { animation: none !important; opacity: 1 !important; }
  #gate.through .torii { transform: none; }
}
#gate { background: radial-gradient(80% 70% at 50% 40%, rgba(44, 7, 15, .96), rgba(5, 3, 4, .97) 70%); }
#gate.through { background: transparent; }
#gate .gate-name { font-family: var(--display); font-weight: 800; letter-spacing: 2px; }
#gate .gate-kicker, #gate .gate-hint { font-family: var(--mono); }
#gate .gate-choose button b { font-family: var(--display); font-weight: 700; }
#gate .gate-choose button[data-lang="ja"] b { font-family: var(--jp); font-weight: 800; }