/* ============================================================ GARBA GROOVE — A Night of Rhythm & Revelry! Aan Socials × The Cabana, Rudrapur ============================================================ */ :root{ --indigo-950:#070c34; --indigo-900:#0f1a5c; --indigo-800:#152583; --royal:#1a2fa0; --royal-soft:#2740c4; --title-blue:#012d8c; /* sampled from garba-groove-title.png */ --pink:#ff2d7a; --yellow:#ffcc33; --cyan:#33d1e8; --orange:#ff8e3c; --gold:#e2b352; --gold-soft:#f0d79a; --ink:#f6f1ff; --muted:#d5dbfb; /* raised from #a9b3e0 for WCAG AA on the indigo cards */ --muted-dim:#b9c2ee; /* only for de-emphasised text that still must pass AA */ --pink-soft:#ff7aa8; /* accessible pink for small text on indigo */ /* headline gradient: lightened stops so the midpoint never sinks into the indigo */ --headline-grad:linear-gradient(100deg,#ffd97a,#ff9dc0 52%,#8fe9f7); --headline-shadow:drop-shadow(0 2px 10px rgba(0,0,0,.5)); /* hot gradient for solid fills that carry white text (AA at both ends) */ --hot-grad:linear-gradient(100deg,#e5145f,#c4511b); --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --r:18px; --shadow:0 18px 50px rgba(3,8,40,.55); } *,*::before,*::after{box-sizing:border-box} /* belt-and-braces: iOS Safari only honours overflow-x on if has it too. uses clip, not hidden — two nested `hidden` boxes turn into its own scrollport and the sticky progress bar stops sticking. */ html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0;min-height:100vh;position:relative; font-family:var(--sans);color:var(--ink); background: radial-gradient(120% 60% at 50% 0%, rgba(26,47,160,.75) 0%, transparent 62%), radial-gradient(90% 50% at 12% 100%, rgba(255,45,122,.2) 0%, transparent 60%), var(--indigo-950); overflow-x:clip;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} img[hidden],[hidden]{display:none} h1,h2,h3{margin:0;line-height:1.12} .blend-screen{mix-blend-mode:screen} /* ───────────── ambient background ───────────── */ .bg-media{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--indigo-950)} .bg-img,.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bg-img{background:url("/assets/hero-bg-blue.jpg") center/cover no-repeat;opacity:.5} /* WebP where supported; the plain url() above stays as the fallback */ .bg-img{background-image:-webkit-image-set(url("/assets/hero-bg-blue.webp") type("image/webp"), url("/assets/hero-bg-blue.jpg") type("image/jpeg")); background-image:image-set(url("/assets/hero-bg-blue.webp") type("image/webp"), url("/assets/hero-bg-blue.jpg") type("image/jpeg"))} @media (orientation:portrait){ .bg-img{background-image:url("/assets/hero-bg-portrait-blue.jpg")} .bg-img{background-image:-webkit-image-set(url("/assets/hero-bg-portrait-blue.webp") type("image/webp"), url("/assets/hero-bg-portrait-blue.jpg") type("image/jpeg")); background-image:image-set(url("/assets/hero-bg-portrait-blue.webp") type("image/webp"), url("/assets/hero-bg-portrait-blue.jpg") type("image/jpeg"))} } .bg-video{opacity:0;transition:opacity 1.4s ease} .bg-video.on{opacity:.45} .kenburns{animation:ken 32s ease-in-out infinite alternate} @keyframes ken{from{transform:scale(1.06)}to{transform:scale(1.2) translate3d(-1.5%,-2%,0)}} .bg-wash{ position:absolute;inset:0; background: radial-gradient(85% 55% at 50% 12%, transparent 0%, rgba(7,12,52,.55) 62%, rgba(7,12,52,.9) 100%), linear-gradient(180deg, rgba(7,12,52,.72) 0%, rgba(7,12,52,.4) 30%, rgba(7,12,52,.88) 100%); } .no-hero .bg-img{ background: radial-gradient(60% 50% at 20% 20%, rgba(255,45,122,.35), transparent 60%), radial-gradient(70% 60% at 80% 30%, rgba(51,209,232,.25), transparent 62%), linear-gradient(160deg,var(--royal),var(--indigo-950)); opacity:1; } /* ───────────── floating decor ───────────── */ .petals{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .petal{ position:absolute;top:-6vh;border-radius:60% 40% 55% 45%/55% 60% 40% 45%; background:radial-gradient(circle at 35% 30%,#ffd166,#f08a24 60%,#c25a12); opacity:0;will-change:transform;animation:fall linear infinite; } @keyframes fall{ 0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0)} 10%{opacity:.7}90%{opacity:.45} 100%{opacity:0;transform:translate3d(var(--dx,30px),108vh,0) rotate(680deg)} } .sticks{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:screen} .stick{position:absolute;width:clamp(78px,17vw,170px);opacity:.42} .s1{top:12%;left:-2%;animation:float1 15s ease-in-out infinite} .s2{top:62%;right:-3%;width:clamp(60px,12vw,125px);opacity:.3;animation:float2 19s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate3d(0,0,0) rotate(-14deg)}50%{transform:translate3d(14px,-26px,0) rotate(12deg)}} @keyframes float2{0%,100%{transform:translate3d(0,0,0) rotate(22deg)}50%{transform:translate3d(-18px,22px,0) rotate(-8deg)}} /* the wrapper is exactly as wide as the viewport and clips, so the garland's bleed never widens the document (iOS Safari pans on any such overflow) */ .garland-clip{ position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none; overflow:hidden;contain:paint;mix-blend-mode:screen; aspect-ratio:2688/1250; } .garland{ position:absolute;top:0;left:-4%;width:108%;pointer-events:none; transform-origin:50% 0;animation:sway 9s ease-in-out infinite; } .garland img{width:100%;opacity:.9;filter:saturate(1.1) drop-shadow(0 10px 22px rgba(0,0,0,.45))} /* the garland belongs to the hero — lift it away on the form steps */ .garland{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.3,1)} body:not([data-step="0"]) .garland{opacity:0;transform:translateY(-55%)} @keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}} /* ───────────── shell ───────────── */ .shell{ position:relative;z-index:2; width:min(680px,100%);margin:0 auto; padding:0 clamp(.9rem,4vw,1.4rem) 3rem; } /* ───────────── progress ───────────── */ .progress-container{ position:sticky;top:0;z-index:30; margin:0 calc(-1 * clamp(.9rem,4vw,1.4rem)); padding:.85rem clamp(.9rem,4vw,1.4rem) .7rem; background:linear-gradient(180deg,rgba(7,12,52,.96),rgba(7,12,52,.82)); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.1); } .progress-bar-wrap{height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden} .progress-bar{ height:100%;width:25%;border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--pink) 55%,var(--yellow)); transition:width .55s cubic-bezier(.2,.8,.3,1); } .steps-labels{display:flex;justify-content:space-between;margin-top:.55rem} .step-label{ font-size:clamp(.66rem,2.8vw,.78rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:#c3cbf2;transition:color .35s; } .step-label.active{color:var(--pink-soft)} .step-label.done{color:var(--cyan)} /* ───────────── steps ───────────── */ .form-step{display:none;animation:stepIn .5s cubic-bezier(.2,.8,.3,1)} .form-step.active{display:block} @keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .error-banner{ margin:1rem 0 0;padding:.8rem 1rem;border-radius:12px;font-size:.88rem; background:rgba(255,45,122,.16);border:1px solid rgba(255,45,122,.5);color:#ffb3cd; } /* ───────────── hero / title art ───────────── */ .hero-card{ position:relative;margin-top:clamp(2.6rem,11vw,4.4rem); border-radius:24px;overflow:hidden; /* exact background of the title PNG so its edges vanish */ background:radial-gradient(120% 130% at 50% 40%, #0a3ba8 0%, var(--title-blue) 55%, #001f66 100%); box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.08) inset; padding-bottom:1.1rem; animation:heroIn .9s cubic-bezier(.2,.9,.3,1) both; } @keyframes heroIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}} .hero-card::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,26,90,.55) 100%); } .title-art{ width:100%;height:auto; /* feather the outer edge into the card so any bg mismatch disappears */ -webkit-mask-image:radial-gradient(118% 122% at 50% 48%, #000 62%, transparent 99%); mask-image:radial-gradient(118% 122% at 50% 48%, #000 62%, transparent 99%); animation:titleFloat 7s ease-in-out infinite; } @keyframes titleFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}} .no-title-art .title-art{display:none} .no-title-art .hero-card::before{ content:"GARBA GROOVE";display:block;padding:2.6rem 1rem 1rem;text-align:center; font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,11vw,3.6rem);letter-spacing:.04em; background:var(--headline-grad); -webkit-background-clip:text;background-clip:text;color:transparent; filter:var(--headline-shadow); } .tagline{ position:relative;z-index:2;margin:-.4rem 0 0;text-align:center; font-family:var(--serif);font-style:italic;font-weight:600; font-size:clamp(1.15rem,5.2vw,1.75rem);color:var(--yellow); text-shadow:0 2px 18px rgba(0,0,0,.5); } /* ───────────── logo lockups ───────────── */ .lockups{ display:flex;gap:clamp(.9rem,4vw,1.8rem);justify-content:center;align-items:center; flex-wrap:wrap;margin:1.5rem 0 .6rem; } .lockup{display:flex;align-items:center;gap:.7rem} .lockup-label{ font-size:clamp(.74rem,2.9vw,.86rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#eef0ff;text-shadow:0 2px 10px rgba(0,0,0,.65); } .chip{ display:grid;place-items:center;background:#fff;border-radius:18px; padding:.7rem .95rem;min-height:96px; box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.55); } .chip img{height:76px;width:auto;max-width:190px;object-fit:contain} @media(min-width:760px){ .chip{min-height:128px;padding:.9rem 1.3rem;border-radius:22px} .chip img{height:104px;max-width:260px} } /* phones: two side-by-side cards with the label stacked above each */ @media(max-width:559px){ .lockups{flex-wrap:nowrap;gap:.7rem;align-items:stretch} .lockups .lockup{flex:1 1 0;min-width:0;flex-direction:column;gap:.5rem;text-align:center} .lockups .chip{width:100%;padding:.7rem .6rem} .lockups .chip img{height:72px;max-width:100%} } .chip.sm{min-height:78px;padding:.6rem .85rem;border-radius:16px} .chip.sm img{height:60px;max-width:160px} @media(min-width:760px){ .chip.sm{min-height:96px;padding:.75rem 1.1rem} .chip.sm img{height:76px;max-width:200px} } /* ───────────── panels & cards ───────────── */ .panel{ margin-top:1.4rem;padding:clamp(1.1rem,4.5vw,1.6rem);border-radius:var(--r); border:1px solid rgba(255,255,255,.12); background:linear-gradient(165deg,rgba(26,47,160,.42),rgba(10,16,70,.72)); box-shadow:var(--shadow);backdrop-filter:blur(8px); } .panel-title{ text-align:center;font-family:var(--serif);font-weight:700; font-size:clamp(1.4rem,6vw,2rem);margin-bottom:1.1rem; background:var(--headline-grad); -webkit-background-clip:text;background-clip:text;color:transparent; filter:var(--headline-shadow); } /* the grand unveiling — feature row with dancer */ .feature-row{ position:relative;overflow:hidden;border-radius:14px;margin-bottom:.85rem; min-height:clamp(150px,38vw,190px);display:flex;align-items:center; padding:1.1rem 1.1rem; border:1px solid rgba(255,204,51,.4); background: radial-gradient(90% 130% at 10% 100%, rgba(255,45,122,.35), transparent 62%), linear-gradient(140deg,rgba(26,47,160,.85),rgba(8,14,62,.9)); } .feature-text{position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;max-width:60%} .feature-icon{font-size:1.5rem} .feature-text strong{ display:block;font-family:var(--serif);font-weight:700; font-size:clamp(1.3rem,6vw,1.9rem);line-height:1.1;color:var(--ink); } .feature-dancer{ position:absolute;right:-8%;bottom:0;height:125%;width:auto;max-width:none; z-index:1;pointer-events:none;opacity:.95; } .bob{animation:bob 4.2s ease-in-out infinite;transform-origin:50% 100%} @keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1.2deg)}} /* lineup act cards */ .lineup-acts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .lineup-act{ position:relative;overflow:hidden;display:flex;align-items:center;gap:.9rem; padding:.95rem 1.1rem;border-radius:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s; } .lineup-act:hover{transform:translateX(3px);border-color:rgba(255,204,51,.45)} .lineup-act.has-photo::before{ content:"";position:absolute;inset:0;background-image:var(--photo); background-size:cover;background-position:center;opacity:.3; } .lineup-act.has-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(6,10,48,.95) 30%,rgba(6,10,48,.74)); } .lineup-act > *{position:relative;z-index:2} .lineup-act.featured{ border-color:transparent; background:var(--hot-grad); } .lineup-act.featured.has-photo::after{background:linear-gradient(100deg,rgba(229,20,95,.95),rgba(196,81,27,.92))} .act-icon{font-size:1.5rem;flex:0 0 auto} .act-details strong{display:block;font-size:clamp(1rem,4.4vw,1.15rem);font-weight:800;letter-spacing:-.01em} .act-details p{margin:.15rem 0 0;font-size:.85rem;color:var(--muted)} .lineup-act.featured .act-details p{color:#fff} /* info card */ .info-card{ margin-top:1.2rem;border-radius:var(--r);overflow:hidden; border:1px solid rgba(255,255,255,.14); background:linear-gradient(165deg,rgba(10,16,70,.92),rgba(5,9,40,.95)); box-shadow:var(--shadow); } .info-item{padding:1.05rem 1.2rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.09)} .info-item:last-child{border-bottom:0} .info-item .label{ display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#e2e6ff; } .info-item .value{display:block;margin-top:.3rem;font-size:clamp(1rem,4.6vw,1.2rem);font-weight:800;line-height:1.35} .info-item.entry{background:linear-gradient(140deg,rgba(255,45,122,.18),rgba(255,204,51,.1))} .price-line{display:flex;align-items:baseline;justify-content:center;gap:.45rem;flex-wrap:wrap} .price-line b{font-family:var(--serif);font-size:clamp(2rem,9vw,2.6rem);color:var(--yellow);line-height:1} .price-line .per{font-size:.82rem;font-weight:600;color:var(--muted)} .price-line s{font-size:.98rem;color:var(--muted-dim);opacity:1} body.is-regular-now .price-line s{display:none} .price-note{display:block;margin-top:.5rem;font-size:.78rem;color:var(--muted);line-height:1.55} /* countdown */ .countdown{margin-top:1.2rem;text-align:center} .cd-label{margin:0 0 .75rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)} .cd-grid{display:flex;gap:.5rem;justify-content:center} .cd-unit{ flex:1 1 0;max-width:92px;padding:.7rem .3rem .55rem;border-radius:13px; border:1px solid rgba(255,204,51,.28);background:rgba(10,16,70,.68); } .cd-unit b{ display:block;font-family:var(--sans);font-weight:800;font-size:clamp(1.35rem,5.8vw,1.75rem); line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:.02em; } .cd-unit b.tick{animation:tick .45s cubic-bezier(.3,1.4,.4,1)} @keyframes tick{0%{transform:translateY(-22%) scale(1.1);opacity:.35}100%{transform:none;opacity:1}} .cd-unit span{ display:block;margin-top:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#e2e6ff; } .cd-foot{margin:.8rem 0 0;font-size:.78rem;color:var(--muted);opacity:1} .cd-over{text-align:center;margin-top:1.2rem;font-size:.92rem;color:var(--muted)} .cd-over b{color:var(--yellow)} /* limited passes */ .limited-card{ position:relative;overflow:hidden;margin-top:1.3rem;text-align:center; padding:clamp(1.6rem,6vw,2.4rem) clamp(1.1rem,5vw,2rem);border-radius:calc(var(--r) + 4px); border:1px solid rgba(255,204,51,.35); background: radial-gradient(110% 130% at 50% -10%, rgba(255,45,122,.3), transparent 62%), linear-gradient(160deg,rgba(26,47,160,.7),rgba(7,12,52,.92)); box-shadow:var(--shadow); } .limited-card::before{ content:"";position:absolute;inset:-40% -10%;pointer-events:none; background:conic-gradient(from 0deg,transparent 0 78%,rgba(255,204,51,.14) 88%,transparent 100%); animation:spin 16s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .lim-kicker{ position:relative;margin:0;font-weight:800;letter-spacing:.1em;text-transform:uppercase; font-size:clamp(1rem,4.6vw,1.4rem);color:var(--yellow); } .lim-kicker span{color:var(--pink)} .lim-body{position:relative;margin:.8rem auto 0;max-width:42ch;font-size:.95rem;line-height:1.65;color:var(--ink);opacity:.9} /* ───────────── buttons ───────────── */ .step-actions{display:flex;gap:.7rem;margin-top:1.6rem} .btn{ flex:1;border:0;cursor:pointer;font-family:var(--sans); font-size:.88rem;font-weight:800;letter-spacing:.06em; padding:1.05rem 1.4rem;border-radius:999px;position:relative;overflow:hidden; transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,opacity .2s; } .btn:active{transform:scale(.98)} .btn-primary{ color:#fff;background:var(--hot-grad); box-shadow:0 12px 34px rgba(255,45,122,.34); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,45,122,.45)} .btn-primary::after{ content:"";position:absolute;top:0;left:-140%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);animation:shim 3.8s ease-in-out infinite; } @keyframes shim{0%{left:-140%}55%{left:170%}100%{left:170%}} .btn-secondary{ flex:0 0 auto;color:var(--ink);background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); } .btn-secondary:hover{background:rgba(255,255,255,.16)} .btn[disabled]{opacity:.6;cursor:progress} /* ───────────── form controls ───────────── */ .section-header{text-align:center;margin-top:clamp(2rem,9vw,3rem)} .section-header h2{ font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,8vw,2.8rem); background:var(--headline-grad); -webkit-background-clip:text;background-clip:text;color:transparent; filter:var(--headline-shadow); } .section-header p{margin:.5rem 0 0;color:var(--muted);font-size:.98rem} .highlight-price{color:var(--yellow);font-weight:800;font-size:1.25rem} .registration-top-bar{display:grid;gap:1rem;margin-top:1.6rem} @media(min-width:560px){.registration-top-bar{grid-template-columns:1fr 1fr}} .input-group{margin-bottom:1rem} .input-group label{ display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--yellow);margin-bottom:.45rem;font-weight:700; } .req{color:var(--pink)} .input-group input,.input-group textarea{ width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink); padding:.85rem 1rem;border-radius:12px; border:1px solid rgba(255,255,255,.18);background:rgba(7,12,52,.7); transition:border-color .25s,box-shadow .25s,background .25s; } .input-group input::placeholder{color:#a8b1de;opacity:1} .input-group input:focus{ outline:none;border-color:var(--yellow);background:rgba(7,12,52,.92); box-shadow:0 0 0 3px rgba(255,204,51,.18); } .input-group input[type=number]{-moz-appearance:textfield} .field-hint,.email-note{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted);opacity:1} .email-note{margin:.4rem 0 0} .phone-input-wrapper{display:flex} .phone-prefix{ display:flex;align-items:center;padding:0 .85rem;border-radius:12px 0 0 12px; border:1px solid rgba(255,255,255,.18);border-right:0;background:rgba(7,12,52,.9); color:var(--ink);font-size:.95rem; } .phone-input-wrapper input{border-radius:0 12px 12px 0} .members-dynamic-list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem} .member-row{ padding:1rem 1.1rem;border-radius:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(140deg,rgba(26,47,160,.35),rgba(10,16,70,.6)); animation:stepIn .35s ease both; } .member-row h4{ margin:0 0 .75rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase; color:var(--pink-soft);font-weight:800; } .member-row .row{display:grid;gap:.7rem;grid-template-columns:1fr 92px} .member-row .input-group{margin-bottom:0} .email-section{margin-bottom:.5rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ───────────── payment ───────────── */ .payment-card{ margin-top:1.6rem;padding:clamp(1.1rem,4.5vw,1.6rem);border-radius:var(--r); border:1px solid rgba(255,255,255,.14); background:linear-gradient(165deg,rgba(26,47,160,.4),rgba(10,16,70,.78)); box-shadow:var(--shadow); } .qr-wrapper{text-align:center} .payment-qr{ width:min(260px,72%);margin:0 auto;border-radius:14px;background:#fff;padding:.5rem; box-shadow:0 10px 30px rgba(0,0,0,.4); } .upi-copy-btn{ margin:.9rem auto 0;display:block;cursor:pointer;font-family:var(--sans); font-size:.9rem;font-weight:700;color:var(--indigo-950); background:linear-gradient(100deg,var(--yellow),var(--gold-soft)); border:0;padding:.75rem 1.3rem;min-height:44px;border-radius:999px;transition:transform .25s,background .25s; } .upi-copy-btn:hover{transform:translateY(-1px)} .upi-copy-btn.copied{background:linear-gradient(100deg,#2ecc71,#6ee7a8)} .payment-instr{margin-top:1.3rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem} .payment-instr p{margin:.5rem 0;font-size:.9rem;line-height:1.55;color:var(--ink);opacity:.92} .payment-instr strong{color:var(--yellow)} .upload-group{margin-top:1.4rem} .file-drop-zone{ position:relative;min-height:170px;border-radius:16px;overflow:hidden; border:2px dashed rgba(255,255,255,.28);background:rgba(7,12,52,.55); display:grid;place-items:center;transition:border-color .25s,background .25s; } .file-drop-zone.dragover{border-color:var(--yellow);background:rgba(255,204,51,.1)} .file-drop-zone.has-file{border-style:solid;border-color:rgba(46,204,113,.6)} .file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:3} .file-placeholder{text-align:center;color:var(--muted);padding:1.5rem} .file-placeholder .icon{font-size:2rem;display:block;margin-bottom:.5rem} .file-placeholder p{margin:0;font-size:.92rem;font-weight:600;color:var(--ink)} .file-placeholder small{display:block;margin-top:.35rem;font-size:.72rem} .file-preview{max-height:300px;width:auto;border-radius:12px;position:relative;z-index:2} /* ───────────── ticket ───────────── */ .ticket-container{margin-top:clamp(2rem,9vw,3rem)} .ticket-celebration{text-align:center;margin-bottom:1.4rem} .confetti-icon{font-size:3rem;animation:pop2 .8s cubic-bezier(.2,1.4,.4,1) both} @keyframes pop2{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}} .ticket-celebration h2{ margin-top:.4rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,8vw,2.6rem); background:var(--headline-grad); -webkit-background-clip:text;background-clip:text;color:transparent; filter:var(--headline-shadow); } .ticket-celebration p{margin:.4rem 0 0;color:var(--muted)} .confirmation-card{ position:relative;overflow:hidden;text-align:center; padding:clamp(1.5rem,6vw,2.2rem) clamp(1.1rem,5vw,1.8rem); border-radius:calc(var(--r) + 4px);border:1px solid rgba(255,204,51,.4); background:linear-gradient(165deg,rgba(26,47,160,.55),rgba(7,12,52,.94)); box-shadow:var(--shadow); } .confirmation-icon{font-size:2rem} .confirmation-card h3{ margin:.4rem 0 .6rem;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase; color:#e2e6ff;font-family:var(--sans);font-weight:700; } .confirmation-ticket-id{ display:inline-block;font-family:ui-monospace,SFMono-Regular,monospace;font-weight:900; font-size:clamp(1.8rem,8vw,2.4rem);letter-spacing:.1em;color:var(--yellow); padding:.5rem 1.4rem;border-radius:999px;border:2px solid rgba(255,204,51,.5); background:rgba(255,204,51,.1);margin-bottom:1.6rem; } .confirmation-steps{text-align:left;display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.3rem} .confirmation-step{display:flex;gap:.85rem;align-items:flex-start} .step-num{ flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center; font-size:.8rem;font-weight:800;color:#fff; background:var(--hot-grad); } .confirmation-step strong{display:block;font-size:.95rem} .confirmation-step p{margin:.2rem 0 0;font-size:.86rem;line-height:1.55;color:var(--muted)} .confirmation-step p strong{display:inline;color:var(--ink)} .spam-disclaimer{ text-align:left;font-size:.78rem;line-height:1.6;padding:.8rem 1rem;border-radius:12px; background:rgba(255,204,51,.12);border:1px solid rgba(255,204,51,.35);color:#ffe6a8; } .confirmation-note{margin-top:1rem;font-size:.85rem;color:var(--muted)} .confirmation-note strong{color:var(--yellow)} /* ───────────── footer ───────────── */ .foot{margin-top:3rem;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.75} .foot-lockups{display:flex;gap:clamp(.8rem,3vw,1.2rem);justify-content:center;align-items:stretch; flex-wrap:nowrap;margin-bottom:1.1rem} .foot-lockups .chip{flex:0 1 auto} .foot p{margin:0} .foot strong{color:var(--yellow)} /* ───────────── reveals ───────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)} .reveal.in{opacity:1;transform:none} /* ───────────── reduced motion ───────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .reveal{opacity:1;transform:none} .petals,.sticks{display:none} }