/* Tap to Pay demo, shared by the branded preview page and /event-tickets. The card and waves are placed
   in % of the whole feature row (phone column + copy), so the row needs the preview's .feature geometry.
   .t2p-right (or an even .feature-band slot on the preview) puts the phone on the right. */
/* Tap to Pay animated demo */
.t2p-band { overflow: hidden; position: relative; }
/* Background photo on its own layer so it can be mirrored. The band's slot
   (odd = phone left, even = phone right) is decided by the sections turned
   on above it, so every rule below keys off the same nth-child the layout
   uses and follows automatically when a section is toggled. */
.t2p-band::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.86)), var(--t2p-bg, none); background-position: center; background-size: cover; background-repeat: no-repeat; }
.feature-band:nth-child(even).t2p-band::before { transform: scaleX(-1); }
.t2p-band > .wrap { position: relative; z-index: 1; }
.t2p-feature { position: relative; min-height: 600px; }
.t2p-phone { position: relative; width: 260px; height: 540px; margin: 0 auto; border-radius: 34px; border: 9px solid #16161a; background: #0d0d10; overflow: hidden; box-shadow: 0 18px 52px rgba(0,0,0,.30); }
.t2p-stage { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; display: flex; flex-direction: column; }
.t2p-feature[data-phase="charge"] .t2p-charge, .t2p-feature[data-phase="select"] .t2p-charge { opacity: 1; }
.t2p-feature[data-phase="tap"] .t2p-tap, .t2p-feature[data-phase="cardin"] .t2p-tap, .t2p-feature[data-phase="charged"] .t2p-tap { opacity: 1; }
.t2p-charge { background: #f5f5f8; }
.t2p-appbar { color: #fff; font-weight: 700; font-size: 14px; padding: 16px 14px; text-align: center; letter-spacing: .4px; }
.t2p-charge-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.t2p-label { color: #9a9aa6; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.t2p-amount { font-size: 56px; font-weight: 800; color: #1c1c22; font-variant-numeric: tabular-nums; line-height: 1; }
.t2p-tapbtn { border-radius: 12px; padding: 14px 30px; font-size: 16px; font-weight: 700; color: #fff; transition: transform .18s ease, filter .18s ease; }
.t2p-feature[data-phase="select"] .t2p-tapbtn { transform: scale(.93); filter: brightness(.82); }
.t2p-tap { background: radial-gradient(120% 90% at 50% 20%, #1b1b22, #08080b); color: #fff; align-items: center; justify-content: center; text-align: center; gap: 22px; }
.t2p-tap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t2p-tapicon { position: relative; width: 66px; height: 66px; }
.t2p-nfcicon { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); transition: opacity .35s ease; }
.t2p-nfcicon::before, .t2p-nfcicon::after { content: ""; position: absolute; top: 50%; left: 50%; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; transform: translate(-50%,-50%); }
.t2p-nfcicon::before { width: 34px; height: 34px; } .t2p-nfcicon::after { width: 14px; height: 14px; }
.t2p-tapcheck { position: absolute; inset: 0; border-radius: 50%; background: #1e7a44; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; opacity: 0; transform: scale(.5); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.9,.3,1.4); }
.t2p-feature[data-phase="charged"] .t2p-nfcicon { animation: t2pring .6s ease-out forwards; }
@keyframes t2pring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
.t2p-feature[data-phase="charged"] .t2p-tapcheck { opacity: 1; transform: scale(1); }
.t2p-tapamt { font-size: 40px; font-weight: 800; }
.t2p-taphold { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); letter-spacing: .3px; }
.t2p-card { position: absolute; left: 60%; top: 72%; width: 184px; height: 116px; border-radius: 13px; transform: rotate(-6deg); transform-origin: center; background: linear-gradient(135deg, #454b6e 0%, #262a41 60%, #1a1d2d 100%); box-shadow: 0 14px 34px rgba(0,0,0,.45); z-index: 5; transition: left 1s cubic-bezier(.5,0,.25,1), top 1s cubic-bezier(.5,0,.25,1), transform 1s ease; padding: 16px; }
.t2p-card-chip { width: 34px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, #e9c46a, #c99a2e); margin-bottom: 34px; }
.t2p-card-num { color: rgba(255,255,255,.9); font-size: 13px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.t2p-feature[data-phase="cardin"] .t2p-card { left: 16%; top: 13%; transform: translateX(-50%) rotate(-4deg); }
.t2p-wave { position: absolute; top: 17%; left: 16%; width: 30px; height: 30px; border: 3px solid rgba(120,220,170,.9); border-radius: 50%; transform: translate(-50%,-50%) scale(.4); opacity: 0; z-index: 6; }
/* Even slot: phone on the right, copy on the left. The card rests under the
   left copy and taps the top of the phone at the right; the rings follow. */
.feature-band:nth-child(even) .t2p-card, .t2p-right .t2p-card { left: 23%; transform: rotate(6deg); }
.feature-band:nth-child(even) .t2p-feature[data-phase="cardin"] .t2p-card, .t2p-feature.t2p-right[data-phase="cardin"] .t2p-card { left: 85%; transform: translateX(-50%) rotate(4deg); }
.feature-band:nth-child(even) .t2p-wave, .t2p-right .t2p-wave { left: 85%; }
.t2p-feature[data-phase="cardin"] .t2p-wave1 { animation: t2pwave 1.1s ease-out infinite; }
.t2p-feature[data-phase="cardin"] .t2p-wave2 { animation: t2pwave 1.1s ease-out .55s infinite; }
@keyframes t2pwave { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } }
.t2p-notify { position: absolute; top: 16px; left: 12px; right: 12px; background: #1e7a44; color: #fff; border-radius: 13px; padding: 13px 15px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; transform: translateY(-100px); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease; z-index: 3; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.t2p-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 13px; }
@media (max-width: 600px) {
	/* Stacked layout: the phone is centered whichever slot the band is in */
	.t2p-card, .feature-band:nth-child(even) .t2p-card, .t2p-right .t2p-card { left: 93%; top: 84%; transform: rotate(-6deg); }
	.t2p-feature[data-phase="cardin"] .t2p-card, .feature-band:nth-child(even) .t2p-feature[data-phase="cardin"] .t2p-card, .t2p-feature.t2p-right[data-phase="cardin"] .t2p-card { left: 50%; top: 8%; transform: translateX(-50%) rotate(-4deg); }
	.t2p-wave, .feature-band:nth-child(even) .t2p-wave, .t2p-right .t2p-wave { left: 50%; top: 12%; }
	.feature-band:nth-child(even).t2p-band::before { transform: none; }
}
.t2p-feature[data-phase="charged"] .t2p-notify { transform: translateY(0); opacity: 1; }