*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* HH Goa brand palette */
  --hh-green:#0f4f2f;
  --hh-green-2:#1f6b44;
  --hh-green-deep:#0a3a23;
  --hh-yellow:#f2c53d;
  --hh-yellow-2:#ffd93d;
  --hh-magenta:#e91e63;
  --hh-magenta-2:#ff1493;
  --hh-cream:#fff8e7;
  --paper:#fff8e7;
  --paper2:#f6e2b9;
  --ink:#0a2018;
}
html,body{width:100%;height:100%;overflow:hidden}
body{
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(242,197,61,.25), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(233,30,99,.18), transparent 55%),
    linear-gradient(180deg, #0a3a23 0%, #061a10 100%);
  color:var(--hh-cream);
  font-family:"Inter",sans-serif;
}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(255,248,231,.3) .65px,transparent .65px);background-size:7px 7px}
.goa-sun{position:fixed;z-index:0;width:65vw;height:65vw;right:-20%;top:-40%;border-radius:50%;background:radial-gradient(circle,rgba(242,197,61,.45),rgba(242,197,61,.05) 58%,transparent 70%);filter:blur(4px)}

.doodle{position:fixed;z-index:1;color:rgba(242,197,61,.25);font-size:32px;animation:float 5s ease-in-out infinite}
.d1{left:8%;top:28%}.d2{right:9%;top:36%;animation-delay:-2s}.d3{right:17%;bottom:12%;animation-delay:-3s}.d4{left:14%;bottom:18%;color:rgba(233,30,99,.3);animation-delay:-1s}.d5{right:30%;top:18%;animation-delay:-4s;color:rgba(233,30,99,.25)}

header{position:fixed;z-index:60;top:0;left:0;right:0;height:68px;padding:0 24px;display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--hh-yellow);background:rgba(15,79,47,.85);backdrop-filter:blur(10px)}
.hh-logo{width:42px;height:42px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--hh-yellow);flex:0 0 auto}
.hh-logo img{width:100%;height:100%;object-fit:cover}
.hh-words b{display:block;font:800 14px "Inter";letter-spacing:1.5px;color:var(--hh-yellow)}
.hh-words small{display:block;margin-top:3px;color:var(--hh-magenta);font:700 8px "Inter";letter-spacing:2.5px}
header>span{margin-left:auto;font:800 9px "Inter";letter-spacing:2.5px;color:var(--hh-yellow);border:1px solid rgba(242,197,61,.4);padding:6px 10px;border-radius:999px}

.screen{position:fixed;inset:68px 0 0;display:none!important;z-index:5}.screen.active{display:block!important}

/* HOME */
.paper{position:absolute;background:#fff;border:1px solid rgba(15,79,47,.2);box-shadow:14px 22px 40px rgba(0,40,20,.4)}.p-back{width:390px;height:520px;left:58%;top:8%;transform:rotate(8deg);background:var(--hh-green-2)}.p-mid{width:430px;height:560px;left:54%;top:7%;transform:rotate(-4deg);background:var(--hh-yellow);display:grid;place-items:center;text-align:center;color:var(--hh-green-deep)}
.paper-text{font:800 56px "Bebas Neue",sans-serif;letter-spacing:2px;line-height:1;padding:0 24px;text-shadow:4px 4px 0 var(--hh-magenta);transform:translateY(30px)}
.paper-circle{position:absolute;width:130px;height:130px;border-radius:50%;overflow:hidden;background:var(--hh-yellow);border:4px solid var(--hh-magenta);box-shadow:6px 8px 0 rgba(0,30,15,.4);transform:rotate(9deg);z-index:3;display:grid;place-items:center;top:18px;right:18px;transform-origin:center center;animation:shake 3.2s ease-in-out infinite}
.paper-circle img{width:100%;height:100%;object-fit:cover}

@keyframes shake{
  0%,100%{transform:rotate(9deg) translate(0,0)}
  10%{transform:rotate(11deg) translate(-2px,1px)}
  20%{transform:rotate(7deg) translate(2px,-1px)}
  30%{transform:rotate(12deg) translate(-1px,2px)}
  40%{transform:rotate(8deg) translate(1px,-2px)}
  50%{transform:rotate(10deg) translate(-2px,0)}
  60%{transform:rotate(6deg) translate(2px,1px)}
  70%{transform:rotate(11deg) translate(-1px,-1px)}
  80%{transform:rotate(9deg) translate(1px,2px)}
  90%{transform:rotate(13deg) translate(-2px,-1px)}
}
.home-illustration{position:absolute;inset:0}.sun{position:absolute;width:600px;height:600px;left:58%;top:52%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(rgba(242,197,61,.18) 0 6deg,transparent 6deg 15deg);mask-image:radial-gradient(circle,black,transparent 70%);animation:spin 35s linear infinite}.line-art{position:absolute;left:62%;top:20%;font-size:170px;color:rgba(233,30,99,.25);transform:rotate(-20deg)}.sticker-home{position:absolute;right:18%;top:24%;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--hh-yellow);box-shadow:6px 8px 0 rgba(0,30,15,.4);transform:rotate(9deg);overflow:hidden;border:3px solid var(--hh-magenta)}.sticker-home img{width:100%;height:100%;object-fit:cover}
.home-copy{position:absolute;left:8%;top:50%;transform:translateY(-50%);z-index:5;max-width:540px}
.home-copy label{font:800 10px "Inter";letter-spacing:4px;color:var(--hh-yellow)}
h1,h2{font:800 clamp(48px,7vw,98px)/.86 "Bebas Neue", "Inter";letter-spacing:-1px;color:var(--hh-cream)}
h1 i,h2 i{font-style:normal;color:var(--hh-magenta)}
.home-copy p{max-width:440px;margin:24px 0;color:rgba(255,248,231,.7);font-size:16px;line-height:1.5}
.home-copy button,.card-actions button{border:0;background:var(--hh-yellow);color:var(--hh-green-deep);padding:18px 26px;cursor:pointer;font:800 11px "Inter";letter-spacing:2.5px;box-shadow:6px 7px 0 var(--hh-magenta);transition:.25s}
.home-copy button:hover,.card-actions button:hover{transform:translateY(-3px);box-shadow:6px 10px 0 var(--hh-magenta-2)}
.home-copy button span{margin-left:25px;color:var(--hh-green-deep);font-weight:900}
.hashtag{margin-top:18px;font:700 13px "Inter";letter-spacing:3px;color:var(--hh-magenta)}

/* UPLOAD */
.upload-inner{height:100%;width:min(1100px,92vw);margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;padding:48px 0;overflow-y:auto}
.copy label{font:800 10px "Inter";letter-spacing:4px;color:var(--hh-yellow)}
.copy h2{font-size:clamp(40px,5.5vw,80px);margin-top:8px}
.copy p{margin-top:14px;color:rgba(255,248,231,.65);font-size:15px}
.fields{margin-top:28px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font:800 11px "Inter";letter-spacing:2.5px;color:var(--hh-magenta)}
.field input,.field select{background:rgba(0,0,0,.35);border:1.5px solid rgba(242,197,61,.25);border-radius:10px;padding:14px 14px;font:600 17px "Inter";color:var(--hh-cream);outline:none;transition:border-color .15s;width:100%;font-family:"Inter",sans-serif}
.field input:focus,.field select:focus{border-color:var(--hh-yellow)}
.field input::placeholder{color:rgba(255,248,231,.3)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--hh-yellow) 50%),linear-gradient(135deg,var(--hh-yellow) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
.field select option{background:#0a3a23;color:var(--hh-cream);font-size:16px;padding:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips button{background:rgba(242,197,61,.1);border:1px solid rgba(242,197,61,.3);color:var(--hh-yellow);font:700 10px "Inter";letter-spacing:1px;padding:6px 10px;border-radius:999px;cursor:pointer;transition:.15s}
.chips button:hover{background:rgba(242,197,61,.2)}
.chips button.active{background:var(--hh-magenta);border-color:var(--hh-magenta);color:#fff}

.photo-box{position:relative;height:min(64vh,500px);background:#fff;border:2px solid var(--hh-yellow);box-shadow:15px 25px 50px rgba(0,40,20,.5);transform:rotate(1.5deg);cursor:pointer;overflow:hidden}
.box-label,.box-foot{position:absolute;z-index:8;left:20px;right:20px;display:flex;justify-content:space-between;font:700 8px "Inter";letter-spacing:2.5px;color:#0a3a23}
.box-label{top:18px}.box-foot{bottom:18px}
.drop-ui{position:absolute;inset:50px;display:grid;place-content:center;text-align:center;z-index:3}
.drop-ui strong{width:75px;height:75px;margin:auto;display:grid;place-items:center;border:2px solid var(--hh-magenta);color:var(--hh-magenta);font-size:28px;box-shadow:7px 7px 0 rgba(242,197,61,.25)}
.drop-ui b{margin-top:20px;font:800 11px "Inter";letter-spacing:3px;color:var(--hh-green-deep)}
.drop-ui small{margin-top:8px;font-size:9px;letter-spacing:2px;color:#5a6357}
.photo-box img{display:none;position:absolute;inset:40px;width:calc(100% - 80px);height:calc(100% - 80px);object-fit:cover;z-index:4}
.photo-box.loaded img{display:block}
.photo-box.loaded .drop-ui{display:none}
.scan{display:none;position:absolute;z-index:7;left:40px;right:40px;top:40px;height:2px;background:var(--hh-yellow);box-shadow:0 0 18px rgba(242,197,61,.7)}
.photo-box.loaded .scan{display:block;animation:scan 2s linear infinite}
.photo-box.dragging{transform:rotate(0) scale(1.025);border-color:var(--hh-magenta);box-shadow:0 25px 55px rgba(233,30,99,.3)}

/* TRANSFORM */
#transform{background:linear-gradient(135deg,#0a3a23,#0f4f2f)}
.transform-paper{position:absolute;inset:0;background:repeating-conic-gradient(rgba(242,197,61,.07) 0 5deg,transparent 5deg 14deg);mask-image:radial-gradient(circle,black,transparent 70%);animation:spin 30s linear infinite}
.transform-ui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--hh-cream)}
.mini{font:800 9px "Inter";letter-spacing:3.5px;color:var(--hh-yellow);margin-bottom:18px}
.transform-ui h2{font-size:clamp(42px,6vw,82px)}
.transform-frame{position:relative;width:210px;height:260px;margin:25px auto 18px;overflow:hidden;border:3px solid var(--hh-yellow);background:#0a3a23;box-shadow:8px 10px 0 rgba(233,30,99,.4);transform:rotate(-2deg)}
.transform-frame img{width:100%;height:100%;object-fit:cover}
.transform-tint{position:absolute;inset:0;background:linear-gradient(135deg,rgba(242,197,61,.18),rgba(233,30,99,.22));mix-blend-mode:screen}
.draw-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(242,197,61,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(242,197,61,.18) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.transform-status{font:800 9px "Inter";letter-spacing:2.5px;color:var(--hh-yellow)}
.transform-bar{width:260px;height:4px;background:rgba(242,197,61,.2);margin:12px auto;border-radius:2px;overflow:hidden}
.transform-bar i{display:block;width:0;height:100%;background:var(--hh-yellow)}

/* CARD SCENE */
#cardScene{background:linear-gradient(135deg,#0a3a23 0%,#0f4f2f 50%,#1a1a0a 100%);overflow:hidden}
.scene-paper{position:absolute;background:#fff;border:1px solid rgba(242,197,61,.15);box-shadow:10px 18px 30px rgba(0,0,0,.4)}.paper-a{width:55vw;height:75vh;left:7%;top:9%;transform:rotate(-5deg);background:var(--hh-yellow);opacity:.85}.paper-b{width:52vw;height:70vh;left:10%;top:12%;transform:rotate(5deg);background:var(--hh-magenta);opacity:.7}
.scene-doodle{position:absolute;color:rgba(242,197,61,.35);font-size:42px;z-index:2}.sd1{left:13%;top:22%;transform:rotate(-15deg)}.sd2{left:77%;top:20%;color:rgba(233,30,99,.5)}.sd3{right:9%;bottom:17%}
.scene-caption{position:absolute;left:6%;top:7%;right:6%;z-index:4;display:flex;justify-content:space-between;font:800 9px "Inter";letter-spacing:3px;color:var(--hh-yellow)}
.scene-caption b{color:var(--hh-magenta)}

/* THE ID CARD */
.id-card{position:absolute;z-index:10;left:50%;top:50%;width:min(580px,48vw);height:620px;transform:rotate(-9deg);filter:drop-shadow(20px 30px 30px rgba(0,0,0,.5));perspective:1000px}
.clip{position:absolute;z-index:20;left:50%;top:-5px;transform:translateX(-50%);width:82px;height:65px;border-radius:9px 9px 15px 15px;background:#2a3431;box-shadow:0 4px 8px rgba(0,0,0,.3)}.clip i{display:block;width:40px;height:26px;margin:9px auto;background:#5a6560;border-radius:5px}
.card{position:absolute;inset:22px 0 0;background:linear-gradient(155deg,#fff8e7 0%,#f6e2b9 100%);border:1.5px solid rgba(15,79,47,.4);border-radius:13px;padding:24px;overflow:hidden;color:var(--hh-green-deep);display:flex;flex-direction:column}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(233,30,99,.18),transparent 28%),linear-gradient(120deg,transparent 40%,rgba(242,197,61,.2) 40% 58%,transparent 58%);pointer-events:none}
.card-header,.card-art,.name-strip,.info,.card-footer{position:relative;z-index:2}
.card-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--hh-green-deep);padding-bottom:12px}
.ch-left{display:flex;align-items:center;gap:10px}
.ch-logo{width:42px;height:42px;border-radius:6px;background:var(--hh-green);padding:4px}
.card-header b{display:block;font:800 17px "Bebas Neue",sans-serif;letter-spacing:1.5px;color:var(--hh-green-deep)}
.card-header small{display:block;margin-top:2px;color:#6a4030;font:700 8px "Inter";letter-spacing:2px}
.card-header strong{font:800 10px "Inter";color:var(--hh-magenta)}

.card-art{flex:1 1 auto;min-height:200px;margin-top:14px;overflow:hidden;background:#0a3a23;border:2px solid var(--hh-green-deep);position:relative}
.card-art img{width:100%;height:100%;object-fit:cover}
.art-tint{position:absolute;inset:0;background:linear-gradient(145deg,rgba(242,197,61,.12),rgba(233,30,99,.15));mix-blend-mode:screen}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(242,197,61,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(242,197,61,.15) 1px,transparent 1px);background-size:24px 24px}
.art-tag{position:absolute;left:12px;top:12px;background:rgba(255,248,231,.92);padding:8px 11px;font:800 8px "Inter";letter-spacing:2px;line-height:1.3;color:var(--hh-green-deep);border:1px solid var(--hh-yellow)}
.art-tag i{display:block;font:800 14px "Bebas Neue";color:var(--hh-magenta);margin-top:2px;letter-spacing:1px}
.art-stamp{position:absolute;right:12px;bottom:12px;background:var(--hh-magenta);color:#fff;padding:6px 10px;font:800 10px "Inter";letter-spacing:2px;transform:rotate(-4deg);box-shadow:2px 3px 0 rgba(0,0,0,.3)}

.name-strip{display:flex;justify-content:space-between;margin-top:14px;gap:12px}
.name-strip>div{flex:1}
.name-strip small,.info small{display:block;color:var(--hh-magenta);font:800 8px "Inter";letter-spacing:2px}
.name-strip b,.info b{display:block;color:var(--hh-green-deep);font:800 22px "Bebas Neue",sans-serif;letter-spacing:1px;margin-top:2px}

.info{display:flex;justify-content:space-between;margin-top:10px;gap:8px}
.info>div{flex:1;background:rgba(15,79,47,.06);padding:8px 10px;border-left:3px solid var(--hh-yellow)}
.info b{font-size:14px;letter-spacing:.5px;line-height:1.1;word-break:break-word}
.info .info-single{flex:1 1 auto}
.info .info-single b{font-size:18px;letter-spacing:.5px}

.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1.5px dashed rgba(15,79,47,.3);font:800 9px "Inter";letter-spacing:2px}
.card-footer span{color:var(--hh-green-deep)}
.card-footer b{color:var(--hh-magenta)}
.qr-stamp{display:inline-block;width:30px;height:30px;background:
  linear-gradient(45deg,var(--hh-green-deep) 25%,transparent 25%) 0 0/8px 8px,
  linear-gradient(-45deg,var(--hh-green-deep) 25%,transparent 25%) 0 0/8px 8px,
  var(--hh-yellow);border:2px solid var(--hh-green-deep);border-radius:4px}

.shine{position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:skewX(-15deg);pointer-events:none;z-index:5}

.card-actions{
  position:absolute;
  z-index:30;
  right:6%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  width:210px;
}
.card-actions button{font-size:11px;padding:14px 18px;text-align:center;box-shadow:5px 6px 0 var(--hh-magenta)}
.card-actions button:nth-child(2){background:var(--hh-magenta);color:#fff;box-shadow:5px 6px 0 var(--hh-yellow)}
.card-actions button:nth-child(3){background:transparent;color:var(--hh-yellow);border:1.5px solid rgba(242,197,61,.4);box-shadow:none}
.card-actions button:disabled{opacity:.5;cursor:not-allowed}

@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spin2{to{transform:rotate(-360deg)}}
@keyframes float{50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes scan{from{top:40px}to{top:calc(100% - 40px)}}

@media(max-width:900px){
  html,body{overflow:auto;overflow-y:auto}
  .screen{position:relative!important;inset:auto!important;min-height:calc(100vh - 68px);height:auto;overflow:visible!important;padding-bottom:40px}
  header{padding:0 14px}
  header>span{display:none}
  .home-copy{left:5%;right:5%;top:42%;transform:none;text-align:center}
  .home-copy h1{font-size:54px}
  .p-back,.p-mid{left:50%;opacity:.3}
  .upload-inner{height:auto;min-height:calc(100vh - 68px);grid-template-columns:1fr;padding:40px 16px 60px;gap:30px}
  .copy{text-align:left}
  .photo-box{width:min(440px,90vw);height:430px;margin:auto}

  /* Card scene — centered card with actions below */
  #cardScene{
    display:flex!important;
    flex-direction:column!important;
    align-items:center;
    justify-content:center;
    padding:24px 12px 32px;
    min-height:calc(100vh - 68px);
    height:auto!important;
  }
  #cardScene .id-card{
    position:relative!important;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;
    width:min(420px,calc(100vw - 24px))!important;
    height:auto!important;
    aspect-ratio:580/620!important;
    margin:0 auto 18px!important;
    order:1;
    flex:0 0 auto;
  }
  #cardScene .card-actions{
    position:static!important;
    transform:none!important;
    flex-direction:row!important;
    flex-wrap:wrap;
    width:calc(100% - 24px);
    margin:0 auto;
    justify-content:center;
    order:2;
  }
  #cardScene .card-actions button{padding:12px 14px;font-size:10px;letter-spacing:1.5px;box-shadow:4px 5px 0 var(--hh-magenta);flex:1 1 0;min-width:0;text-align:center}
  #cardScene .card-actions button:nth-child(2){box-shadow:4px 5px 0 var(--hh-yellow)}
  #cardScene .card-actions button:nth-child(3){box-shadow:none}
  .scene-paper{display:none}
  .scene-caption{position:relative;left:auto;top:auto;right:auto;margin:0 4px 12px;justify-content:space-between}
}

/* V7: GSAP owns the card transform. xPercent/yPercent provide the centering,
   so CSS transforms can never push the card down again. */
#cardScene #card{left:50%!important;top:50%!important}
@media(max-width:900px){
  #cardScene #card{left:auto!important;top:auto!important;position:relative!important;transform:none!important}
}