/* TRINITY airdrop page: daruma stage, sakura branch progress, shoji task cards, status, the wish (eye + scroll) */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .26; filter: blur(2px) saturate(.9); }
.sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 12, .55), var(--night) 70%); }

.d-hero { padding: 104px 0 10px; text-align: center; }
.d-hero .eyebrow::before { display: none; }
.d-title { font-size: clamp(46px, 11vw, 120px); line-height: 1; margin: 14px 0 12px; background: linear-gradient(180deg, #fff, var(--sakura2) 60%, var(--sakura)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255, 158, 193, .35)); }
.d-hero .lede { margin-inline: auto; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: 12px; color: var(--mute); background: rgba(14, 18, 40, .6); box-shadow: 0 0 0 1px var(--line) inset; }
.chips .ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.6s steps(2) infinite; }

.d-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 4vw, 56px); align-items: center; padding: 26px 0 40px; }
@media (max-width: 860px) { .d-main { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------------ stage */
.d-stage { position: relative; display: grid; justify-items: center; }
.branch { width: min(100%, 440px); height: auto; overflow: visible; margin-bottom: -10px; position: relative; z-index: 2; }
.br-wood { fill: none; stroke: #3b2a2e; stroke-width: 6; stroke-linecap: round; }
.br-twig { fill: none; stroke: #3b2a2e; stroke-width: 3; stroke-linecap: round; }
.bud { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
.bud .closed { fill: #6a3a50; }
.bud .open { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.bud.on .open { opacity: 1; transform: none; }
.bud.on .closed { opacity: 0; }
.bud.now .closed { fill: var(--sakura); animation: budpulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes budpulse { 50% { transform: scale(1.35); } }
.daruma { position: relative; width: min(74vw, 360px); aspect-ratio: 560 / 620; animation: bob 4.6s ease-in-out infinite; transform-origin: 50% 92%; }
.daruma img, .daruma .eyes { position: absolute; inset: 0; width: 100%; height: 100%; }
.daruma .eyes, .wish-daruma .eyes { z-index: 2; }
.d-glow { position: absolute; inset: 10% 6% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 92, 149, calc(.16 + var(--charge, 0) * .4)), transparent 66%); filter: blur(10px); transition: background .6s; }
@keyframes bob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.2deg); } }
.daruma.wobble { animation: wobble .9s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.eye { fill: none; stroke: #0b0b0e; stroke-width: 30; stroke-dasharray: 95; stroke-dashoffset: 95; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.eye.on { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .3, 1); }
.eye.instant { transition: none !important; }
.d-cap { margin-top: 6px; min-height: 1.6em; color: var(--sakura2); letter-spacing: .2em; font-size: clamp(14px, 2vw, 17px); text-align: center; }
html[data-lang="en"] .d-cap { letter-spacing: .06em; }

/* ------------------------------------------------------------------ shoji card */
.d-side { position: relative; min-width: 0; }
.shoji {
  position: relative; padding: clamp(20px, 3.4vw, 32px); border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(243, 238, 228, .08), rgba(243, 238, 228, .03)), rgba(12, 14, 30, .78);
  box-shadow: 0 0 0 1px rgba(243, 238, 228, .14) inset, 0 30px 80px -30px #000; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.shoji::before { /* the lattice (kumiko) */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: linear-gradient(90deg, transparent calc(50% - 1px), var(--washi) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 70px 100%,
    linear-gradient(0deg, transparent calc(50% - 1px), var(--washi) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 70px;
}
.shoji.in { animation: slidein .55s var(--ease) both; }
.shoji.out { animation: slideout .32s ease-in both; }
@keyframes slidein { from { transform: translateX(46px); opacity: 0; clip-path: inset(0 0 0 30%); } to { clip-path: inset(0); } }
@keyframes slideout { to { transform: translateX(-46px); opacity: 0; clip-path: inset(0 30% 0 0); } }
.sc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; }
.sc-kan { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 28px; color: var(--washi); background: #110c18; border: 2px solid var(--sakura); box-shadow: 0 0 22px rgba(255, 92, 149, .45); }
.sc-k { font-size: 12px; letter-spacing: .28em; color: var(--sakura); }
.sc-title { position: relative; font-family: 'Dela', 'Kaku', sans-serif; font-weight: 400; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; }
.sc-desc { position: relative; color: var(--mute); margin-top: 8px; font-size: 15px; }
.sc-act { position: relative; margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.sc-act .btn { min-width: 220px; }
.field { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border-radius: 99px; background: rgba(5, 6, 12, .75); box-shadow: 0 0 0 1px rgba(243, 238, 228, .2) inset; transition: box-shadow .3s; }
.field:focus-within { box-shadow: 0 0 0 2px var(--sakura) inset, 0 0 30px -6px var(--sakura3); }
.field .pre { padding-left: 14px; color: var(--sakura); font-weight: 700; }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--washi); font: 500 17px 'Kaku', system-ui, sans-serif; padding: 10px 6px 10px 14px; }
.field .pre + input { padding-left: 2px; }
.field .btn { padding: 13px 20px; min-width: 0; }
.field.bad { animation: shake .4s; box-shadow: 0 0 0 2px var(--hino) inset; }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.sc-err { position: relative; min-height: 1.4em; margin-top: 10px; color: #ff8a9a; font-size: 14px; }
.net { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--mute); letter-spacing: .14em; font-family: 'Dot', monospace; }
.net i { width: 8px; height: 8px; border-radius: 50%; background: #c6f432; box-shadow: 0 0 8px #c6f432; }
.btn.pending { pointer-events: none; opacity: .85; }
.btn.huge { width: 100%; padding: 22px; font-size: 20px; }
.done-list { position: relative; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.done-list li { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(143, 240, 192, .08); color: var(--ok); box-shadow: 0 0 0 1px rgba(143, 240, 192, .25) inset; }
.done-list li.last { animation: popin .6s var(--ease); }
.d-safe { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }

/* ------------------------------------------------------------------ my airdrop */
.d-me { padding: clamp(20px, 3.4vw, 30px); border-radius: 22px; background: rgba(12, 14, 30, .82); box-shadow: 0 0 0 1px rgba(255, 158, 193, .3) inset, 0 30px 80px -30px #000; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: popin .6s var(--ease); }
.me-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.me-top .eyebrow::before { display: none; }
.me-who { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.me-who .dot { color: var(--mute); font-size: 13px; }
.me-amt { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; }
.me-amt b { font-size: clamp(40px, 8vw, 64px); line-height: 1; background: linear-gradient(180deg, #fff, var(--sakura)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-amt span { font-family: 'Dela', sans-serif; color: var(--sakura2); }
.kippu { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin: 14px 0 4px; padding: 12px 16px; border-radius: 10px; color: #12302c; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 7px), linear-gradient(135deg, #bfe6dc, #d9f0e8); box-shadow: 0 10px 30px -12px #000, inset 0 0 0 1px rgba(255, 255, 255, .5); }
.kippu::before, .kippu::after { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #0c0e1e; translate: 0 -50%; }
.kippu::before { left: -8px; } .kippu::after { right: -8px; }
.kp-l { display: grid; line-height: 1.25; } .kp-l b { font-size: 15px; letter-spacing: .3em; } .kp-l span { font-size: 11px; opacity: .75; }
.kp-route { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 3.4vw, 26px); }
.kp-route b { font-weight: 800; } .kp-route i { font-style: normal; opacity: .6; }
.kp-seat { grid-column: 1 / -1; font-size: 12px; color: #1d4a43; }
.kp-stamp { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #c0283b; color: #c0283b; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; rotate: -14deg; opacity: .8; }
.wish-st { display: inline-block; margin-top: 6px; color: #8a1c34; font-family: 'Kaku', sans-serif; }
.track { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 14px; position: relative; }
.track::before { content: ''; position: absolute; left: 16%; right: 16%; top: 11px; height: 2px; background: #262a44; }
.track li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.track i { width: 24px; height: 24px; border-radius: 50%; background: #141830; box-shadow: 0 0 0 2px #2a2f50 inset; position: relative; z-index: 1; }
.track li.on { color: var(--washi); } .track li.on i { background: var(--sakura); box-shadow: 0 0 16px var(--sakura3); }
.track li.now i { background: var(--led); box-shadow: 0 0 0 0 rgba(255, 179, 71, .7); animation: ping 1.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 12px rgba(255, 179, 71, 0); } 100% { box-shadow: none; } }
.me-status { padding: 14px 16px; border-radius: 14px; background: rgba(5, 6, 12, .6); font-size: 15px; line-height: 1.6; box-shadow: 0 0 0 1px var(--line) inset; }
.me-status[data-s="sent"] { box-shadow: 0 0 0 1px rgba(143, 240, 192, .45) inset; }
.me-status a { color: var(--ok); }
.me-status small { display: block; color: var(--dim); font-size: 12px; margin-top: 6px; }
.me-x { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.me-x span { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .05); }
.me-x span.y { color: var(--ok); } .me-x span.y::before { content: '✓ '; }
.me-x span.n { color: #ff8a9a; } .me-x span.n::before { content: '✗ '; }
.me-x .btn { padding: 8px 14px; font-size: 13px; }
.me-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.me-reset { display: block; margin-top: 14px; font-size: 12px; color: var(--dim); text-decoration: underline; }
.d-board { padding: 30px 0 60px; }
.d-board .h2 { font-size: clamp(28px, 5.4vw, 48px); }

/* ------------------------------------------------------------------ the wish (full screen) */
.wish { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px; background: radial-gradient(70% 60% at 50% 40%, rgba(30, 39, 88, .9), rgba(3, 4, 9, .97)); overflow-y: auto; }
.wish[hidden] { display: none; }
.wish-in { display: grid; justify-items: center; gap: 6px; width: min(560px, 100%); animation: popin .5s var(--ease); }
.wish-daruma { position: relative; width: min(56vw, 300px, 36svh); aspect-ratio: 560 / 620; }
.wish-daruma img, .wish-daruma svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brush path { fill: none; stroke: #0b0b0e; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; opacity: 0; }
.brush path.go { animation: brush 1s ease-in-out forwards; }
@keyframes brush { 10% { opacity: .9; } 70% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.makimono { position: relative; display: flex; align-items: stretch; width: 100%; margin-top: 6px; }
.makimono .rod { width: 16px; flex: none; border-radius: 8px; background: linear-gradient(90deg, #2b1a10, #6b4426 45%, #2b1a10); box-shadow: 0 6px 16px rgba(0, 0, 0, .6); position: relative; z-index: 2; }
.makimono .rod::before, .makimono .rod::after { content: ''; position: absolute; left: -3px; right: -3px; height: 12px; border-radius: 4px; background: #c9a24a; }
.makimono .rod::before { top: -8px; } .makimono .rod::after { bottom: -8px; }
.makimono .paper { flex: 1; overflow: hidden; padding: 18px 20px; text-align: center; color: #2a1a12; background: linear-gradient(180deg, #f7f0e1, #ece2cc); box-shadow: inset 0 0 30px rgba(120, 80, 40, .25); clip-path: inset(0 50% 0 50%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.makimono.open .paper { clip-path: inset(0); }
.wish-k { font-weight: 800; font-size: clamp(16px, 2.6vw, 20px); letter-spacing: .16em; color: #8a1c34; }
.wish-amt { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.wish-amt b { font-size: clamp(40px, 10vw, 68px); line-height: 1.05; color: #14101a; }
.wish-amt span { font-size: clamp(16px, 3vw, 22px); color: #c0283b; }
.wish-p { font-size: 14px; color: #5a4636; }
.wish-p .mono, .me-status .mono { font-family: 'Dot', monospace; }
.wish-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

/* phones: compact hero, smaller daruma so the first gate shows sooner */
@media (max-width: 860px) {
  .d-main { grid-template-columns: 1fr; padding-top: 4px; gap: 4px; }
  .d-hero { padding-top: 84px; }
  .d-title { font-size: clamp(44px, 14vw, 80px); margin: 8px 0 8px; }
  .d-hero .lede { font-size: 14px; }
  .chips { margin-top: 10px; gap: 5px; } .chips li { padding: 4px 8px; font-size: 11px; }
  .daruma { width: min(54vw, 240px); }
  .branch { width: min(86%, 340px); margin-bottom: -6px; }
  .d-cap { margin-top: 2px; font-size: 13px; }
}