/* The coupon uses stacked translucent planes instead of a flat card surface. */
.coupon { --rx:calc(var(--my, 0) * -2.1deg); --ry:calc(var(--mx, 0) * 3.2deg); position:absolute; z-index:12; left:50%; top:50%; width:min(69vw,430px); min-height:270px; padding:23px 24px 20px; overflow:hidden; border:1px solid rgba(226,237,255,.19); border-radius:26px; opacity:0; pointer-events:none; color:#fff; background:linear-gradient(132deg,rgba(228,239,255,.18) -45%,rgba(255,255,255,.065) 28%,rgba(139,124,209,.11) 100%); box-shadow:0 28px 86px rgba(0,0,0,.62),0 0 34px rgba(105,121,222,.11),inset 0 1px rgba(255,255,255,.31),inset 0 -1px rgba(255,255,255,.07); backdrop-filter:blur(28px) saturate(132%); -webkit-backdrop-filter:blur(28px) saturate(132%); transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out); }
.coupon::before { content:""; position:absolute; z-index:-1; inset:-1px; border-radius:inherit; padding:1px; opacity:.66; background:linear-gradient(calc(120deg + var(--mx,0)*28deg),rgba(255,255,255,.5),rgba(255,255,255,.03) 31%,rgba(132,151,255,.2) 69%,rgba(255,255,255,.2)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.coupon::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at calc(50% + var(--mx,0)*30%) calc(7% + var(--my,0)*16%),rgba(255,255,255,.24),transparent 25%),linear-gradient(112deg,transparent 18%,rgba(255,255,255,.07) 41%,transparent 52%); pointer-events:none; animation:reflection-sweep 11s var(--ease-in-out) 2s infinite; }
.coupon.is-visible { opacity:1; pointer-events:auto; }
.coupon.is-entering { animation:card-arrive 1.3s var(--ease-out) .5s both; }
.coupon-noise { position:absolute; inset:0; opacity:.09; pointer-events:none; background-image:url('../assets/noise.png'),radial-gradient(rgba(255,255,255,.9) .45px,transparent .8px); background-size:120px 120px,4px 4px; mix-blend-mode:soft-light; }
.coupon-light { position:absolute; width:80%; height:40%; right:-25%; top:-17%; pointer-events:none; background:radial-gradient(ellipse,rgba(193,208,255,.15),transparent 67%); filter:blur(13px); }
.coupon-topline,.coupon-footer { display:flex; align-items:center; justify-content:space-between; position:relative; color:rgba(255,255,255,.43); font-size:8px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; }
.coupon-brand { position:relative; display:block; width:clamp(132px,30vw,174px); height:auto; margin-top:26px; filter:drop-shadow(0 2px 13px rgba(211,210,255,.24)); opacity:.92; }
.coupon-divider { height:1px; margin:27px 0 19px; background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.055)); }
.coupon-label { margin:0 0 9px; color:rgba(255,255,255,.47); font-size:10px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; }
.code-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:41px; }
.access-code { overflow:hidden; color:rgba(255,255,255,.68); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:clamp(15px,2.2vw,19px); font-weight:400; letter-spacing:.13em; white-space:nowrap; transition:color .3s ease,text-shadow .3s ease; }
.access-code.is-revealed { color:#fff; text-shadow:0 0 18px rgba(217,225,255,.28); }
.reveal-button,.copy-button { position:relative; flex:none; border:1px solid rgba(255,255,255,.15); border-radius:999px; cursor:pointer; background:rgba(255,255,255,.08); box-shadow:inset 0 1px rgba(255,255,255,.14); transition:background .35s ease,border-color .35s ease,transform .35s var(--ease-out); }
.reveal-button:hover,.copy-button:hover { border-color:rgba(255,255,255,.29); background:rgba(255,255,255,.14); transform:translateY(-1px); }
.reveal-button { padding:9px 12px 9px 14px; font-size:10px; letter-spacing:.05em; }
.reveal-button span { display:inline-block; margin-left:5px; transition:transform .4s var(--ease-out); }
.reveal-button:hover span { transform:translate(2px,-2px); }
.reveal-button.is-hidden { opacity:0; pointer-events:none; transform:scale(.9); }
.coupon-footer { margin-top:23px; padding-top:14px; border-top:1px solid rgba(255,255,255,.075); letter-spacing:.08em; text-transform:none; }
.copy-button { padding:7px 13px; font-size:10px; letter-spacing:.04em; }
.copy-button:disabled { cursor:default; opacity:.34; }
.coupon.is-unlocked { box-shadow:0 0 0 1px rgba(255,255,255,.13),0 21px 70px rgba(50,64,164,.29),inset 0 1px rgba(255,255,255,.22); }
.coupon.is-copied { animation:card-pulse .75s var(--ease-out); }
.coupon.is-copied .copy-button { animation:button-flash .75s var(--ease-out); }