:root{
  --black:#020b0f;
  --cream:#f3ead9;
  --cyan:#16dce2;
  --pink:#ff2184;
  --gold:#f5b65f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--cream)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  min-height:100svh;
  background:
    radial-gradient(circle at 13% 3%,rgba(0,206,221,.075),transparent 23rem),
    radial-gradient(circle at 96% 92%,rgba(255,33,132,.065),transparent 22rem),
    linear-gradient(180deg,#020b0f 0%,#02090d 100%);
}
.page{
  position:relative;
  width:min(100%,480px);
  min-height:100svh;
  height:100svh;                 /* fit the screen, never scroll */
  margin:0 auto;
  padding:clamp(12px,2.4svh,30px) 24px clamp(14px,3svh,36px);
  justify-content:center;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.content{
  position:relative;z-index:2;width:100%;text-align:center;
  transform-origin:top center;
}

/* Irregular painted swipes */
.paint{position:absolute;pointer-events:none;z-index:1}
.paint.one{
  width:150px;height:145px;left:-52px;top:8px;
  opacity:.82;
  background:
    linear-gradient(106deg,transparent 0 28%,rgba(22,220,226,.92) 29% 35%,transparent 36%),
    linear-gradient(100deg,transparent 0 39%,rgba(22,220,226,.72) 40% 47%,transparent 48%),
    linear-gradient(112deg,transparent 0 51%,rgba(22,220,226,.52) 52% 58%,transparent 59%),
    linear-gradient(96deg,transparent 0 61%,rgba(22,220,226,.30) 62% 66%,transparent 67%);
  filter:drop-shadow(7px 5px 0 rgba(22,220,226,.10));
  transform:rotate(-8deg);
}
.paint.one:after{
  content:"";position:absolute;left:12px;top:17px;width:92px;height:112px;
  background:
    repeating-linear-gradient(101deg,
      rgba(22,220,226,.82) 0 4px,
      transparent 4px 9px);
  clip-path:polygon(0 8%,82% 0,67% 9%,98% 13%,58% 19%,88% 24%,42% 31%,78% 38%,30% 46%,65% 53%,18% 62%,52% 70%,8% 81%,36% 91%,0 100%);
  opacity:.38;
}
.paint.two{
  width:155px;height:165px;right:-55px;bottom:-5px;
  opacity:.88;
  background:
    repeating-linear-gradient(168deg,
      rgba(255,33,132,.88) 0 5px,
      transparent 5px 11px);
  clip-path:polygon(31% 0,100% 8%,91% 16%,100% 22%,67% 29%,98% 35%,55% 43%,94% 51%,41% 60%,86% 67%,24% 76%,72% 84%,0 94%,58% 100%,0 100%);
  transform:rotate(-5deg);
}
.paint.two:after{
  content:"";position:absolute;inset:15px 3px 0 28px;
  background:
    repeating-linear-gradient(170deg,
      rgba(255,33,132,.50) 0 3px,
      transparent 3px 8px);
  clip-path:polygon(25% 0,100% 5%,70% 17%,98% 25%,55% 34%,91% 43%,36% 55%,80% 66%,18% 79%,62% 90%,0 100%);
}

/* ADM wordmark */
.adm{
  margin:0 auto;
  font-size:min(72px,11svh);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.09em;
  font-family:Arial,Helvetica,sans-serif;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.02));
}
.adm .a{
  background:linear-gradient(118deg,#ffd08c 0%,#f5b65f 46%,#bd7930 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.adm .d{
  background:linear-gradient(180deg,#1fe5e7 0%,#12b7c3 70%,#0d8fa0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.adm .m{
  background:linear-gradient(145deg,#ff1590 0%,#ff2184 52%,#d80b67 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.studio{
  margin-top:15px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  letter-spacing:.27em;
  white-space:nowrap;
}
.brand-rule{
  width:104px;height:2px;margin:15px auto 14px;border-radius:20px;
  background:linear-gradient(90deg,var(--cyan) 0 31%,transparent 31% 67%,var(--gold) 67%)
}
.tag{
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:11px;
}

/* Organic double-ring photo frame */
.photo-ring{
  width:min(232px,27svh);height:min(232px,27svh);
  margin:clamp(12px,2.8svh,29px) auto clamp(10px,2svh,20px);
  padding:3px;
  border-radius:50%;
  background:conic-gradient(from 208deg,
    var(--cyan) 0 40%,
    transparent 40% 43%,
    var(--pink) 43% 73%,
    #b844b4 73% 80%,
    var(--cyan) 80% 100%);
  box-shadow:0 0 18px rgba(22,220,226,.06),0 0 20px rgba(255,33,132,.06);
  position:relative;
}
.photo-ring:before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(from 196deg,
    var(--cyan) 0 14%,transparent 14% 51%,
    var(--pink) 51% 68%,transparent 68% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  transform:rotate(-5deg);
  opacity:.9;
}
.photo-ring:after{
  content:"";position:absolute;inset:-11px;border-radius:50%;
  background:conic-gradient(from 250deg,
    transparent 0 78%,rgba(22,220,226,.7) 78% 83%,transparent 83% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
}
.photo{
  width:100%;height:100%;display:block;
  border-radius:50%;object-fit:cover;
  border:5px solid var(--black);
}
h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:min(38px,5.4svh);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.025em;
}
.role{
  margin:12px auto 0;
  font-size:11px;
  letter-spacing:.24em;
  line-height:1.55;
  text-transform:uppercase;
  color:#d5d7d5;
}
.gold-rule{
  width:44px;height:2px;background:var(--gold);
  margin:17px auto 21px;border-radius:20px
}
.save{
  width:100%;
  min-height:min(68px,8.6svh);
  display:flex;align-items:center;justify-content:center;gap:13px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:36px;
  color:white;text-decoration:none;
  font-size:17px;font-weight:600;letter-spacing:.15em;
  background:linear-gradient(95deg,#df0873 0%,#c01876 33%,#743c91 55%,#087f91 78%,#10cbd0 100%);
  box-shadow:
    0 0 0 2px rgba(255,33,132,.16),
    -10px 0 27px rgba(255,33,132,.25),
    10px 0 27px rgba(22,220,226,.20);
}
.save:active{transform:scale(.99)}
.person{width:23px;height:23px;position:relative;display:inline-block}
.person:before{
  content:"";position:absolute;width:10px;height:10px;border-radius:50%;
  background:white;left:3px;top:0
}
.person:after{
  content:"";position:absolute;width:17px;height:10px;border-radius:10px 10px 3px 3px;
  background:white;left:0;bottom:0
}
.plus{font-size:18px;margin-left:-9px;margin-top:-13px}
.make{
  margin-top:clamp(14px,3.4svh,35px);
  color:var(--gold);
  font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
  font-size:min(32px,4.6svh);
  font-weight:400;
  line-height:1.05;
  transform:rotate(-4deg);
}
.swash{
  width:137px;height:3px;margin:11px auto 0;
  background:linear-gradient(90deg,var(--pink),var(--pink) 68%,transparent);
  transform:rotate(-7deg);
  border-radius:50%
}
@media(max-width:380px){
  .page{padding-left:18px;padding-right:18px}
  .adm{font-size:64px}
  .studio{font-size:12px;letter-spacing:.23em}
  .photo-ring{width:210px;height:210px}
  h1{font-size:34px}
  .role{font-size:10px;letter-spacing:.18em}
  .save{min-height:64px;font-size:16px}
  .make{font-size:30px}
}

/* ============================================================
   Motion layer
   Everything below is additive. Removing this block returns the
   page to its original static design.
   ============================================================ */

/* Ambient spark canvas, sits behind the content */
.sparks{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* --- Entrance: the whole card arrives at once ----------------
   Only hides content when JS is running, so the page is never
   blank if the script fails to load. */
.js .content{
  opacity:0;
  transform:translateY(18px) scale(.985);
  will-change:opacity,transform;
}
.js .content.in{
  opacity:1;
  transform:none;
  transition:opacity .9s cubic-bezier(.22,.8,.3,1),
             transform 1s cubic-bezier(.22,.8,.3,1);
}

/* --- ADM wordmark shimmer ----------------------------------- */
.adm .a,.adm .d,.adm .m{
  background-size:220% 100%;
  background-position:82% 0;
}
.js .adm.lit .a,
.js .adm.lit .d,
.js .adm.lit .m{
  animation:sheen 2.6s cubic-bezier(.4,0,.2,1) both;
}
.js .adm.lit .d{animation-delay:.12s}
.js .adm.lit .m{animation-delay:.24s}
@keyframes sheen{
  0%{background-position:100% 0}
  55%{background-position:0% 0}
  100%{background-position:82% 0}
}

/* --- Photo ring: slow counter-rotating arcs ------------------ */
.js .photo-ring:before{animation:spin 26s linear infinite}
.js .photo-ring:after{animation:spin-back 19s linear infinite}
@keyframes spin{
  from{transform:rotate(-5deg)}
  to{transform:rotate(355deg)}
}
@keyframes spin-back{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

/* --- Shooting star ------------------------------------------ */
.star{
  position:absolute;top:0;left:0;
  width:190px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(22,220,226,.25) 22%,rgba(255,255,255,.85) 80%,#fff 100%);
  filter:drop-shadow(0 0 7px rgba(22,220,226,.95)) drop-shadow(0 0 16px rgba(255,255,255,.55));
  opacity:0;z-index:5;pointer-events:none;
  transform:rotate(24deg);
}
.star:after{
  content:"";position:absolute;right:-3px;top:-3px;
  width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px 3px rgba(255,255,255,.85),0 0 22px 7px rgba(22,220,226,.6);
}
.star.go{animation:shoot 1.6s cubic-bezier(.35,.05,.2,1) forwards}
@keyframes shoot{
  0%  {opacity:0;transform:translate3d(-210px,-60px,0) rotate(24deg) scaleX(.35)}
  10% {opacity:1}
  72% {opacity:1}
  100%{opacity:0;transform:translate3d(var(--tx,520px),var(--ty,300px),0) rotate(24deg) scaleX(1)}
}

/* --- Save button -------------------------------------------- */
.save{
  position:relative;
  overflow:hidden;
  background-size:230% 100%;
  background-position:0% 0;
  transition:transform .18s ease;
}
html.js a.save{
  animation:breathe 2.9s ease-in-out infinite,
            slide 7s ease-in-out infinite alternate;
}
.save:active{transform:scale(.97)}

/* light sweeping across the button */
.save .gleam{
  position:absolute;top:0;bottom:0;left:-50%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  pointer-events:none;z-index:1;
}
html.js .save .gleam{animation:gleam 3.2s ease-in-out 1.6s infinite}
@keyframes gleam{
  0%  {left:-55%}
  38% {left:125%}
  100%{left:125%}
}
@keyframes slide{
  0%  {background-position:0% 0}
  100%{background-position:100% 0}
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 2px rgba(255,33,132,.18),
                     -10px 0 24px rgba(255,33,132,.22),
                      10px 0 24px rgba(22,220,226,.18);
          transform:scale(1)}
  50%    {box-shadow:0 0 0 3px rgba(255,255,255,.22),
                     -18px 0 46px rgba(255,33,132,.55),
                      18px 0 46px rgba(22,220,226,.48);
          transform:scale(1.022)}
}

/* halo that pushes outward from the button */
.save-wrap{position:relative;display:block;width:100%}
.save-wrap:before{
  content:"";position:absolute;inset:0;border-radius:36px;
  border:2px solid rgba(22,220,226,.55);
  pointer-events:none;opacity:0;
}
html.js .save-wrap:before{animation:halo 2.9s ease-out infinite}
@keyframes halo{
  0%  {opacity:.55;transform:scale(1)}
  70% {opacity:0;transform:scale(1.13)}
  100%{opacity:0;transform:scale(1.13)}
}

.save .label{position:relative;z-index:2}
.save .person,.save .plus{position:relative;z-index:2}
.save.saved .person,.save.saved .plus{display:none}
.save .tick{
  display:none;width:23px;height:23px;position:relative;z-index:2;
}
.save.saved .tick{display:inline-block;animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
.save .tick:before,.save .tick:after{
  content:"";position:absolute;background:#fff;border-radius:2px;
}
.save .tick:before{width:3px;height:10px;left:5px;top:8px;transform:rotate(-45deg)}
.save .tick:after{width:3px;height:18px;left:14px;top:2px;transform:rotate(38deg)}
@keyframes pop{
  0%{transform:scale(.2);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* burst particles on tap */
.burst{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  pointer-events:none;z-index:3;opacity:0}
.burst.go{animation:burst .85s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}
}

/* --- Respect the system setting ------------------------------ */
@media(prefers-reduced-motion:reduce){
  .js .content,.js .content.in{opacity:1;transform:none;transition:none}
  .js .adm.lit .a,.js .adm.lit .d,.js .adm.lit .m,
  .js .photo-ring:before,.js .photo-ring:after,
  html.js a.save,.js .save .gleam,.js .save-wrap:before{animation:none}
  .star,.sparks{display:none}
}

/* ============================================================
   Real ADM logo mark (replaces the text wordmark)
   ============================================================ */
.logo-wrap{
  position:relative;
  display:block;
  width:min(272px,74%,46svh);
  margin:4px auto 2px;
}
.logomark{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 24px rgba(22,220,226,.16));
}
/* one slow pass of the brand colors through the mark, then back to white */
.logo-wrap .sheen{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 38%,
    rgba(22,220,226,.95) 46%,
    rgba(255,33,132,.95) 52%,
    rgba(245,182,95,.95) 58%,
    transparent 66%);
  background-size:260% 100%;
  background-position:135% 0;
  -webkit-mask:url(../images/logo.png) center/contain no-repeat;
  mask:url(../images/logo.png) center/contain no-repeat;
}
.js .content.in .logo-wrap .sheen{animation:logosheen 2.6s ease-out .45s both}
@keyframes logosheen{
  0%  {opacity:0;background-position:135% 0}
  18% {opacity:1}
  78% {opacity:1}
  100%{opacity:0;background-position:-45% 0}
}
@media(max-width:380px){.logo-wrap{width:min(240px,76%)}}
@media(prefers-reduced-motion:reduce){
  .js .content.in .logo-wrap .sheen{animation:none;opacity:0}
}