/* HERO G: Island collage (water + caustics + huge logo + polaroids, tape, stickers, fronds, hibiscus) */
.v-hero-g{--lw:min(calc(86 * var(--vw)),1420px,calc((100svh - 340px) * 2.5));--pw:clamp(120px,12.5vw,220px);position:relative;min-height:clamp(660px,100svh,1120px);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:92px 16px 40px;color:var(--ink);background:#e7d36c}
.v-hero-g:has(.ol-ytag){--lw:min(calc(86 * var(--vw)),1420px,calc((100svh - 400px) * 2.5))}
.v-hero-g .hg-bg{position:absolute;inset:-3%;z-index:-6;background:url(../../images/water.jpg) center 62%/cover no-repeat;animation:hg-drift 22s ease-in-out infinite alternate}
.v-hero-g .hg-caustic{position:absolute;z-index:-5;inset:-700px;pointer-events:none;background:url(../../images/caustic.png) 0 0/420px 420px repeat;mix-blend-mode:overlay;opacity:.7;animation:hg-c1 26s linear infinite;will-change:transform}
.v-hero-g .hg-c2{background-size:640px 640px;opacity:.45;mix-blend-mode:soft-light;animation:hg-c2 34s linear infinite}
.v-hero-g .hg-shine{position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:radial-gradient(55% 40% at 50% 40%,rgba(255,252,220,.55),rgba(255,250,210,0) 70%),linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 26%,rgba(0,0,0,0) 70%,rgba(6,50,26,.42))}
/* floaters */
.v-hero-g .hg-floaters{position:absolute;inset:0;z-index:-3;pointer-events:none}
.v-hero-g .hg-hib{position:absolute;width:var(--w,40px);color:var(--c,#c1121f);opacity:.9;animation:hg-bob var(--t,9s) ease-in-out var(--dl,0s) infinite alternate;filter:drop-shadow(0 6px 6px rgba(0,40,20,.25))}
.v-hero-g .hg-hib svg{display:block;width:100%;animation:hg-spin var(--sp,24s) linear infinite}
.v-hero-g .h0{left:30%;top:20%;--w:34px;--t:8s}
.v-hero-g .h1{left:66%;top:26%;--w:44px;--c:#e8530f;--t:10s;--dl:-3s}
.v-hero-g .h2{left:9%;top:44%;--w:30px;--c:#f9bc0d;--t:7s;--dl:-2s}
.v-hero-g .h3{left:88%;top:42%;--w:38px;--t:9s;--dl:-5s;--sp:30s}
.v-hero-g .h4{left:42%;top:84%;--w:28px;--c:#e8530f;--t:8.5s;--dl:-1s}
.v-hero-g .h5{left:58%;top:12%;--w:26px;--c:#f9bc0d;--t:11s;--dl:-6s}
.v-hero-g .h6{left:78%;top:86%;--w:36px;--t:9.5s;--dl:-4s}
.v-hero-g .hg-sparks{position:absolute;inset:0}
.v-hero-g .hg-sparks i{position:absolute;left:var(--x);top:var(--y);width:calc(16px * var(--s));aspect-ratio:1;background:var(--c);opacity:0;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:hg-twinkle calc(var(--d) * .5) ease-in-out var(--delay) infinite}
/* polaroid board */
.v-hero-g .hg-board{position:absolute;inset:0;z-index:-2}
.v-hero-g .hg-slot{position:absolute;width:var(--pw)}
.v-hero-g .hg-pola{--dx:0px;--dy:0px;position:relative;margin:0;background:#fffdf6;padding:8px 8px 34px;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.05),0 18px 30px rgba(10,50,25,.32);
  transform:translate(var(--dx),var(--dy)) rotate(var(--r));transition:transform .45s cubic-bezier(.2,1.4,.4,1),box-shadow .3s;animation:hg-drop .9s cubic-bezier(.2,1.2,.3,1) backwards}
.v-hero-g .hg-pola img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:1px;pointer-events:none;-webkit-user-select:none;user-select:none}
.v-hero-g .hg-pola figcaption{position:absolute;left:0;right:0;bottom:7px;font-family:var(--fh);font-size:clamp(.7rem,1vw,.95rem);color:#2a2a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.v-hero-g .hg-tape{position:absolute;left:50%;top:-12px;width:46%;height:24px;translate:-50% 0;rotate:-4deg;opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.12);
  background:repeating-linear-gradient(45deg,rgba(193,18,31,.8) 0 7px,rgba(255,255,255,.55) 7px 14px)}
.v-hero-g .hg-tape.t1{rotate:5deg;background:repeating-linear-gradient(-45deg,rgba(249,188,13,.85) 0 7px,rgba(255,255,255,.6) 7px 14px)}
.v-hero-g .hg-tape.t2{rotate:-8deg;left:30%;background:repeating-linear-gradient(90deg,rgba(27,122,75,.8) 0 6px,rgba(255,255,255,.55) 6px 12px)}
.v-hero-g.hg-can-drag .hg-pola,.v-hero-g.hg-can-drag .hg-sticker{cursor:grab;pointer-events:auto}
.v-hero-g.hg-can-drag .hg-board{pointer-events:none}
.v-hero-g.hg-can-drag .hg-pola:hover{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) * .3)) scale(1.06);box-shadow:0 2px 0 rgba(0,0,0,.05),0 28px 44px rgba(10,50,25,.4)}
.v-hero-g .hg-pola.is-drag,.v-hero-g .hg-sticker.is-drag{cursor:grabbing;transition:none;transform:translate(var(--dx),var(--dy)) rotate(0) scale(1.08)}
.v-hero-g .hg-p1{left:3%;top:15%}.v-hero-g .hg-p2{right:3%;top:13%}
.v-hero-g .hg-p3{left:6%;top:57%}.v-hero-g .hg-p4{right:5%;top:55%}
.v-hero-g .hg-p5{left:16%;top:73%;width:calc(var(--pw) * .82)}.v-hero-g .hg-p6{right:15%;top:72%;width:calc(var(--pw) * .82)}
.v-hero-g .hg-p2 .hg-pola{animation-delay:.1s}.v-hero-g .hg-p3 .hg-pola{animation-delay:.2s}.v-hero-g .hg-p4 .hg-pola{animation-delay:.3s}.v-hero-g .hg-p5 .hg-pola{animation-delay:.4s}.v-hero-g .hg-p6 .hg-pola{animation-delay:.5s}
/* stickers */
.v-hero-g .hg-st1{left:19%;top:11%;width:clamp(86px,8vw,124px)}.v-hero-g .hg-st2{right:19%;top:9%;width:clamp(80px,7.4vw,116px)}
.v-hero-g .hg-sticker{--dx:0px;--dy:0px;aspect-ratio:1;display:grid;place-content:center;text-align:center;line-height:1;transform:translate(var(--dx),var(--dy)) rotate(-12deg);
  animation:hg-pop .7s .8s cubic-bezier(.2,1.8,.4,1) backwards;transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.v-hero-g .hg-st2 .hg-sticker{transform:translate(var(--dx),var(--dy)) rotate(10deg);animation-delay:1s}
.v-hero-g .hg-sticker small{font-family:var(--fb);text-transform:uppercase;font-size:clamp(.55rem,.8vw,.72rem);letter-spacing:.08em}
.v-hero-g .hg-sticker b{font-family:var(--fb);font-weight:400;text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.5rem);margin-top:3px}
.v-hero-g .hg-gold{background:var(--gold);color:var(--ink)}
.v-hero-g .hg-red{background:var(--red);color:#fff}
.v-hero-g.hg-can-drag .hg-sticker:hover{transform:translate(var(--dx),var(--dy)) rotate(0) scale(1.1)}
/* fronds */
.v-hero-g .hg-fronds{position:absolute;inset:0;z-index:-1;pointer-events:none}
.v-hero-g .hg-fr{position:absolute;width:clamp(220px,25vw,420px)}
.v-hero-g .hg-fr svg{display:block;width:100%;transform-origin:16% 81%;animation:hg-sway 8s ease-in-out infinite;filter:drop-shadow(0 14px 12px rgba(0,30,10,.3))}
.v-hero-g .hg-fr-tl{left:-9%;top:-17%;transform:scaleY(-1)}
.v-hero-g .hg-fr-tr{right:-9%;top:-17%;transform:scale(-1,-1)}
.v-hero-g .hg-fr-bl{left:-8%;bottom:-10%}
.v-hero-g .hg-fr-br{right:-8%;bottom:-10%;transform:scaleX(-1)}
.v-hero-g .hg-fr-tr svg{animation-delay:-2s}.v-hero-g .hg-fr-bl svg{animation-delay:-4s;animation-duration:9s}.v-hero-g .hg-fr-br svg{animation-delay:-6s;animation-duration:9.5s}
/* content */
.v-hero-g .hg-in{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.v-hero-g .hg-in a{pointer-events:auto}
.v-hero-g .hg-logo-p{width:100%}
.v-hero-g .hg-float{animation:hg-in 1.2s cubic-bezier(.2,1.1,.3,1.1) both,hg-float 6s ease-in-out 1.2s infinite}
.v-hero-g .hg-logo{width:var(--lw);max-width:none;height:auto;margin:0 0 calc(var(--lw) * -.03) calc(50% - var(--lw) / 2);filter:drop-shadow(0 26px 24px rgba(10,60,30,.38))}
.v-hero-g .hg-h1{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:clamp(1.2rem,2.5vw,2.1rem);margin-top:4px}
.v-hero-g .hg-label{display:inline-block;background:#fff7e6;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:.18em .45em .12em;rotate:-2deg;animation:hg-pop .6s .5s cubic-bezier(.2,1.6,.4,1) both}
.v-hero-g .hg-label-2{background:var(--gold);rotate:1.5deg;animation-delay:.62s}
.v-hero-g .hg-sub{max-width:46ch;line-height:1.45;font-family:var(--fb);text-transform:uppercase;font-size:clamp(.7rem,1.05vw,.84rem);letter-spacing:.06em;margin-top:14px;color:#0f3b22;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.v-hero-g .hg-sub b{font-weight:400;color:#7a1408}
.v-hero-g .hg-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:16px}
.v-hero-g .hg-cd{display:grid;grid-template-columns:repeat(4,auto);gap:10px}
.v-hero-g .hg-cd>div{position:relative;background:#fffdf6;border-radius:4px;padding:10px 10px 7px;min-width:66px;box-shadow:0 12px 20px rgba(10,50,25,.28);rotate:-2deg}
.v-hero-g .hg-cd>div:nth-child(even){rotate:2deg}
.v-hero-g .hg-cd>div::before{content:"";position:absolute;left:50%;top:-8px;width:34px;height:14px;translate:-50% 0;background:rgba(249,188,13,.75);rotate:-6deg}
.v-hero-g .hg-cd b{display:block;font-family:var(--fb);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1}
.v-hero-g .hg-cd span{display:block;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.v-hero-g .hg-btn{padding:14px 22px;font-size:.92rem}
.v-hero-g.fx-paused *,.v-hero-g.fx-paused{animation-play-state:paused!important}

@keyframes hg-drift{to{transform:scale(1.07) translate(-1.2%,-1%)}}
@keyframes hg-c1{to{transform:translate3d(420px,420px,0)}}
@keyframes hg-c2{to{transform:translate3d(-640px,640px,0)}}
@keyframes hg-bob{to{transform:translate3d(14px,-26px,0)}}
@keyframes hg-spin{to{transform:rotate(360deg)}}
@keyframes hg-twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
@keyframes hg-drop{from{opacity:0;transform:translate(0,-60px) rotate(calc(var(--r) * -2)) scale(1.15)}}
@keyframes hg-pop{from{opacity:0;scale:.3}}
@keyframes hg-sway{50%{transform:rotate(3deg)}}
@keyframes hg-in{from{opacity:0;transform:scale(.8) translateY(50px)}to{opacity:1;transform:none}}
@keyframes hg-float{50%{transform:translateY(-12px) rotate(.5deg)}}

@media(max-width:760px){
  .v-hero-g:has(.ol-ytag){--lw:118vw}
  .v-hero-g{--lw:118vw;--pw:31vw;min-height:max(660px,100svh);padding:80px 12px 34px}
  .v-hero-g .hg-p1{left:-3%;top:9%}.v-hero-g .hg-p2{right:-3%;top:10.5%}
  .v-hero-g .hg-p3{left:-6%;top:auto;bottom:-3%}.v-hero-g .hg-p4{right:-6%;top:auto;bottom:-2%}
  .v-hero-g .hg-p5,.v-hero-g .hg-p6{display:none}
  .v-hero-g .hg-st1{left:37%;top:auto;bottom:1.5%;width:80px}.v-hero-g .hg-st2{right:auto;left:36%;top:10%;width:80px}
  .v-hero-g .hg-fr{width:46vw}
  .v-hero-g .hg-fr-tl,.v-hero-g .hg-fr-tr{top:-9%}.v-hero-g .hg-fr-tl{left:-22%}.v-hero-g .hg-fr-tr{right:-22%}
  .v-hero-g .hg-h1{font-size:clamp(1.05rem,5.4vw,1.4rem);gap:8px}
  .v-hero-g .hg-sub{font-size:.66rem;max-width:32ch;line-height:1.45}
  .v-hero-g .hg-cd>div{min-width:0;width:66px}
  .v-hero-g .hg-btn{width:min(100%,300px)}
}