/* ================================================================
   Welcome overlay — the NFC tap demo (2026-10-29).
   Session-first-visit only (site.js / welcome.js own the state;
   html.is-welcomed hides this overlay before first paint).
   The core NFC gesture is the show: tap the plate, the phone
   beside it lights up and the shop's page opens inside it.
   Small, quiet, refined — off-white + ink, and the store icon's
   neon blue (#0070f0) appears only as the touch glow.
   Motion is one soft glide; no bounce, no zoom theatre.
   2026-10-29 (owner: もっと演出・迫力を): the tap now lands —
   a gloss sweep runs across the plate, the mark flares with a
   halo, three ripples travel further, and the phone wakes with
   depth (the page rises toward you, children cascading). Impact
   comes from light, depth and timing only; still no sound, no
   bounce, no flashing.
   2026-10-29 round 2 (owner: 最初のタップをもっと迫力): the
   tap now reads as a signal crossing the room — one wash of
   light fills the whole welcome, a wide field wave travels
   from the mark to the phone, and the phone lights at the
   moment the wave arrives (a catch of light in the glass).
   The phone steps toward you as it opens, the ground shadow
   recedes, and entering the shop swells the phone's page to
   fill the frame. One quiet WebAudio pip and a two-stage
   vibration ride along (welcome.js). Timing does the work.
   ================================================================ */

.welcome-overlay {
  background: var(--bg);
  color: var(--text);
  cursor: default;
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.welcome-overlay.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* The energize wash — one pass of light across the whole
   welcome as the touch connects: a bloom rising off the plate
   plus a diagonal band of light crossing the stage, swelling
   once and settling back to the quiet steady state. */
.wc-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle 340px at 26% 65%, rgb(120 190 255 / 0.5) 0%, rgb(0 112 240 / 0.14) 45%, rgb(0 112 240 / 0) 70%),
    linear-gradient(105deg, rgb(255 255 255 / 0) 32%, rgb(255 255 255 / 0.75) 50%, rgb(255 255 255 / 0) 68%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, 130% 0;
  background-repeat: no-repeat;
}
.welcome-overlay.is-live .wc-flash {
  animation: wcFlash 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes wcFlash {
  0% { opacity: 0; background-position: 0 0, 130% 0; }
  18% { opacity: 1; }
  55% { opacity: 0.5; }
  100% { opacity: 0; background-position: 0 0, -40% 0; }
}

/* Skip — always on, quiet corner text. */
.wc-skip {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 10px;
  z-index: 3;
  padding: 10px 12px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.wc-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: 28px 20px 44px;
}
.wc-brand {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.wc-by {
  margin: 7px 0 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--faint);
}

/* ------------------------------ Demo stage ------------------------------ */
.wc-demo {
  position: relative;
  width: min(76vw, 292px);
  height: 352px;
  margin-top: 36px;
}
.wc-shadow {
  position: absolute;
  left: 4%;
  right: 0;
  bottom: 0;
  height: 22px;
  background: radial-gradient(ellipse at center, rgb(17 17 19 / 0.16), rgb(17 17 19 / 0) 68%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s, opacity 0.8s ease 0.45s;
}
/* Parallax counter-move: as the phone steps toward you, the
   ground it stands on quietly recedes. */
.wc-demo.is-open .wc-shadow {
  transform: scaleX(0.84);
  opacity: 0.55;
}

/* Phone — dark and quiet until the plate is touched. */
.wc-phone {
  position: absolute;
  top: 0;
  right: 2px;
  z-index: 1;
  width: 142px;
  height: 264px;
  padding: 7px;
  border-radius: 24px;
  background: #111113;
  box-shadow: 0 18px 36px rgb(17 17 19 / 0.18), 0 2px 6px rgb(17 17 19 / 0.12);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s,
    box-shadow 0.7s ease 0.42s;
}
/* The phone wakes as the field wave reaches it (0.42s): it
   lifts and steps a breath toward you, and the arriving signal
   warms the shadow on the plate's side. */
.wc-demo.is-open .wc-phone {
  transform: translateY(-6px) scale(1.045);
  box-shadow: -14px 22px 40px rgb(0 112 240 / 0.15),
    0 22px 40px rgb(17 17 19 / 0.20), 0 2px 6px rgb(17 17 19 / 0.12);
}
.wc-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #101013;
  transition: background 0.55s ease 0.42s;
}
.wc-demo.is-open .wc-screen {
  box-shadow: inset 0 0 36px rgb(0 112 240 / 0.10);
  /* The catch: the glass takes the arriving light in one
     bright breath, then settles to the steady lit glow. */
  animation: wcScreenCatch 0.9s ease 0.42s both;
}
@keyframes wcScreenCatch {
  0% { box-shadow: inset 0 0 0 rgb(0 112 240 / 0); }
  35% { box-shadow: inset 0 0 64px rgb(110 185 255 / 0.5); }
  100% { box-shadow: inset 0 0 36px rgb(0 112 240 / 0.10); }
}
.wc-screen::before {
  /* notch pill */
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  transform: translateX(-50%);
  transition: background 0.55s ease 0.42s;
}
.wc-screen::after {
  /* still reflection on the dark glass */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 42%);
  transition: opacity 0.55s ease 0.42s;
}
.wc-demo.is-open .wc-screen { background: #fbfbfc; }
.wc-demo.is-open .wc-screen::before { background: rgb(17 17 19 / 0.14); }
.wc-demo.is-open .wc-screen::after { opacity: 0; }

/* The page that opens inside the phone (a labelled sample). */
.wc-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 21px 13px 30px;
  color: #111113;
  /* Depth: the page sits deeper inside the phone until it
     opens, then rises toward the glass as one body with more
     travel — the mass of the opening… */
  transform: scale(0.9) translateY(14px);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.52s;
}
.wc-demo.is-open .wc-page { transform: none; }
.wc-page > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* …while its elements cascade in behind it, top to bottom. */
.wc-demo.is-open .wc-page > * { opacity: 1; transform: none; }
.wc-demo.is-open .wc-page > *:nth-child(1) { transition-delay: 0.56s; }
.wc-demo.is-open .wc-page > *:nth-child(2) { transition-delay: 0.64s; }
.wc-demo.is-open .wc-page > *:nth-child(3) { transition-delay: 0.69s; }
.wc-demo.is-open .wc-page > *:nth-child(4) { transition-delay: 0.76s; }
.wc-demo.is-open .wc-page > *:nth-child(5) { transition-delay: 0.84s; }
.wc-demo.is-open .wc-page > *:nth-child(6) { transition-delay: 0.91s; }
.wc-page-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef0f2;
}
.wc-page-lock {
  position: relative;
  flex: none;
  width: 7px;
  height: 6px;
  margin-top: 3px;
  border-radius: 1.5px;
  background: #9aa0a8;
}
.wc-page-lock::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -4px;
  width: 3px;
  height: 4px;
  border: 1.2px solid #9aa0a8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.wc-page-url { font-size: 8px; letter-spacing: 0.02em; color: #6d7278; white-space: nowrap; }
.wc-page-name { margin: 14px 0 0; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.wc-page-sub { margin: 3px 0 0; font-size: 7.5px; letter-spacing: 0.3em; color: #9aa0a8; }
.wc-page-rows { margin-top: 12px; border-top: 1px solid #ececf0; }
.wc-row {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 7px 1px;
  border-bottom: 1px solid #ececf0;
  font-size: 9.5px;
  color: #26262b;
}
.wc-row span:last-child { color: #6d7278; }
.wc-page-btn {
  display: block;
  margin-top: 13px;
  padding: 8px 0;
  border-radius: 999px;
  background: #111113;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
}
.wc-page-note {
  margin: auto 0 0;
  font-size: 7.5px;
  text-align: center;
  color: #a7abb3;
}

/* The plate — a light physical object on the counter. */
.wc-plate {
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 188px;
  height: 100px;
  padding: 0 16px;
  border: 1px solid #e2e2e7;
  border-radius: 12px;
  /* First layer is the gloss: a soft sheen parked off the left
     edge; on touch it sweeps across the plate's surface once. */
  background:
    linear-gradient(112deg, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / 0.8) 50%, rgb(255 255 255 / 0) 58%),
    linear-gradient(165deg, #ffffff 0%, #f0f0f2 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 12px 24px rgb(17 17 19 / 0.13), 0 1px 3px rgb(17 17 19 / 0.08);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.45s ease;
}
.wc-plate:active { transform: scale(0.985); }
/* Touch lands: the plate answers — a slight lean toward the
   phone, a deeper seat, and the signal's blue warming its edge,
   while the gloss makes its one pass. */
.wc-demo.is-touched .wc-plate {
  transform: translateY(-1px) rotate(-0.7deg);
  box-shadow: 0 16px 30px rgb(17 17 19 / 0.15), 0 2px 5px rgb(17 17 19 / 0.08),
    0 0 28px rgb(0 112 240 / 0.18);
  background-position: -20% 0, 0 0;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s ease,
    background-position 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s;
}
.wc-plate-mark {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid #d9d9df;
  border-radius: 50%;
  color: #111113;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.45s ease;
}
.wc-plate-mark svg { width: 24px; height: 24px; }
/* Halo: a soft disc of blue light behind the mark that blooms
   open when the signal fires. */
.wc-plate-mark::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(0 112 240 / 0.34) 0%, rgb(0 112 240 / 0) 68%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.wc-demo.is-touched .wc-plate-mark::before { opacity: 1; transform: scale(1); }
.wc-demo.is-touched .wc-plate-mark {
  color: #0070f0;
  border-color: #0070f0;
  box-shadow: 0 0 0 5px rgb(0 112 240 / 0.13), 0 0 26px rgb(0 112 240 / 0.42);
  animation: wcMarkFlare 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* One flare as the touch connects, settling into the steady glow. */
@keyframes wcMarkFlare {
  0% { box-shadow: 0 0 0 0 rgb(0 112 240 / 0.35), 0 0 8px rgb(0 112 240 / 0.4); }
  35% { box-shadow: 0 0 0 10px rgb(0 112 240 / 0.15), 0 0 40px rgb(0 112 240 / 0.6); }
  100% { box-shadow: 0 0 0 5px rgb(0 112 240 / 0.13), 0 0 26px rgb(0 112 240 / 0.42); }
}
.wc-plate-words { display: block; }
.wc-plate-name {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #111113;
}
.wc-plate-sub {
  display: block;
  margin-top: 4px;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #9a9aa2;
}

/* Touch ripples — the only flourish, in the neon blue. */
.wc-ripple {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1.5px solid rgb(0 112 240 / 0.55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.wc-demo.is-touched .wc-ripple { animation: wcRipple 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.wc-demo.is-touched .wc-ripple-2 { animation-delay: 0.14s; }
.wc-demo.is-touched .wc-ripple-3 { animation-delay: 0.28s; }
@keyframes wcRipple {
  from { transform: scale(0.45); opacity: 0.9; }
  to { transform: scale(3.7); opacity: 0; }
}

/* Field waves — the signal crossing the stage. Two wide rings
   leave the mark and travel the whole welcome, passing behind
   the phone; the phone lights as the first front arrives
   (~0.42s), which is what sells the causality. Width/height
   are animated (not scale) so the ring's line stays one even
   weight from the mark to the far edge. */
.wc-wave {
  position: absolute;
  left: 37px;
  bottom: 56px;
  z-index: 0;
  width: 44px;
  height: 44px;
  border: 2px solid rgb(0 112 240 / 0.5);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, 50%);
  pointer-events: none;
}
.wc-wave-2 { border-width: 1.5px; border-color: rgb(0 112 240 / 0.38); }
.wc-demo.is-touched .wc-wave { animation: wcWave 1.7s cubic-bezier(0.16, 0.5, 0.3, 1) both; }
.wc-demo.is-touched .wc-wave-2 { animation: wcWave2 1.9s cubic-bezier(0.16, 0.5, 0.3, 1) 0.22s both; }
@keyframes wcWave {
  0% { width: 44px; height: 44px; opacity: 0; }
  10% { opacity: 0.8; }
  100% { width: 820px; height: 820px; opacity: 0; }
}
@keyframes wcWave2 {
  0% { width: 44px; height: 44px; opacity: 0; }
  10% { opacity: 0.6; }
  100% { width: 920px; height: 920px; opacity: 0; }
}
/* Idle invitation: one soft ring from the mark, every few seconds. */
@media (prefers-reduced-motion: no-preference) {
  .wc-demo:not(.is-touched) .wc-plate-mark {
    animation: wcPulse 2.8s ease-out infinite;
  }
}
@keyframes wcPulse {
  0% { box-shadow: 0 0 0 0 rgb(0 112 240 / 0.16); }
  55% { box-shadow: 0 0 0 10px rgb(0 112 240 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(0 112 240 / 0); }
}

/* ------------------------------ After the tap ------------------------------ */
.wc-hint {
  margin: 26px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  transition: opacity 0.3s ease;
}
.wc-hint.is-out { opacity: 0; }
.wc-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.wc-after:not([hidden]) { animation: wcAfterIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both; }
@keyframes wcAfterIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.wc-caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  text-align: center;
}
.wc-enter {
  min-height: 48px;
  margin-top: 18px;
  padding: 8px 38px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: transform 0.2s ease, opacity 0.25s ease;
}
.wc-enter:hover { opacity: 0.88; }
.wc-enter:active { transform: scale(0.98); }
.wc-replay {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--faint);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}

/* Entering the shop after the demo: the phone's page swells
   to fill the frame while everything else steps back, then
   the overlay dissolves — you walk into the page instead of
   watching the welcome fade. (Skip, untouched, keeps the
   plain soft glide of .is-leaving.) */
.welcome-overlay.is-entering {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.welcome-overlay.is-entering .wc-phone {
  transform: translate(-51%, 31%) scale(2.9);
  box-shadow: 0 30px 80px rgb(17 17 19 / 0.25);
  transition: transform 0.68s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.welcome-overlay.is-entering .wc-inner > *:not(.wc-demo),
.welcome-overlay.is-entering .wc-plate,
.welcome-overlay.is-entering .wc-shadow,
.welcome-overlay.is-entering .wc-skip {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (min-width: 640px) {
  .wc-demo { width: 320px; height: 396px; margin-top: 42px; }
  .wc-phone { width: 156px; height: 296px; }
  .wc-plate { width: 206px; height: 104px; }
  .wc-brand { font-size: 19px; }
  .wc-wave { bottom: 58px; }
}

/* Reduced motion: no ripples, no pulse, no light wash, no
   field waves, no depth travel, no entering swell — states
   simply are. */
@media (prefers-reduced-motion: reduce) {
  .wc-ripple { display: none; }
  .wc-flash { display: none; }
  .wc-wave { display: none; }
  .wc-after:not([hidden]) { animation: none; }
  .wc-page, .wc-demo.is-open .wc-page { transform: none; transition: none; }
  .wc-phone, .wc-demo.is-open .wc-phone { transform: none; transition: none; }
  .wc-screen, .wc-screen::before, .wc-screen::after { transition: none; }
  .wc-demo.is-open .wc-screen { animation: none; }
  .wc-shadow, .wc-demo.is-open .wc-shadow { transform: none; transition: none; }
  .wc-plate, .wc-demo.is-touched .wc-plate { transform: none; transition: none; background-position: 120% 0, 0 0; }
  .wc-plate-mark::before { transition: none; }
  .wc-demo.is-touched .wc-plate-mark { animation: none; }
}