/*
Theme Name: Palmo
Description: Palmo coconut water home page theme with 3D scroll animation (Three.js + GSAP).
Version: 1.0
Text Domain: palmo
*/
:root{--cream:#F8F8EA;--brown:#4A3A24;--yellow:#FFE68A;--olive:#5B6B14;--red:#D4504A;--pink:#F4C6CC;--tan:#8C6A3C;--sand:#EDE9D0}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--brown);font-family:'Inter',sans-serif;overflow-x:hidden;line-height:1.5}
h1,h2,h3,.h{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
.hand{font-family:'Gaegu',cursive}
a{color:inherit;text-decoration:none}
.wrap{padding:0 3vw}
/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px 3vw;pointer-events:none}
.hdr>*{pointer-events:auto}
.logo svg{width:34px;height:34px;fill:var(--brown)}
.menu-btn{display:flex;gap:6px}
.menu-btn i,.menu-btn b{background:var(--brown);color:var(--yellow);border-radius:6px;font:400 15px 'Gaegu',cursive;padding:5px 16px;border:0;cursor:pointer;font-style:normal;letter-spacing:.05em}
.menu-btn i{padding:5px 8px}
.overlay{position:fixed;inset:0;background:var(--brown);color:var(--yellow);z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;clip-path:circle(0 at 95% 5%);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.overlay.open{clip-path:circle(150% at 95% 5%)}
.overlay a{font:700 clamp(48px,9vw,120px)/1 'Antonio';text-transform:uppercase}
.overlay a:hover{color:var(--cream)}
.close{position:absolute;top:22px;right:3vw;background:var(--yellow);color:var(--brown);border:0;border-radius:6px;padding:5px 16px;font:15px 'Gaegu';cursor:pointer}
/* 3D canvas */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;transition:opacity .4s}
/* sections */
.sec{position:relative;min-height:100vh;display:flex}
.bg-palm{position:absolute;right:-4vw;top:-6vh;width:34vw;fill:var(--yellow);z-index:0;transform:rotate(8deg)}
#hero{align-items:flex-start;padding:90px 3vw 0}
#hero h1{font-size:clamp(64px,12vw,190px);position:relative;z-index:2}
#hero h1 span{display:block;overflow:hidden}
#hero h1 em{display:block;font-style:normal;transform:translateY(105%)}
.hero-copy{position:absolute;right:3vw;bottom:22vh;width:min(380px,40vw);font-size:15px;font-weight:500;z-index:2}
.pill{display:inline-block;margin-top:18px;padding:6px 22px;font:18px 'Gaegu';border:1.6px solid var(--brown);border-radius:50%/60%;transition:background .3s}
.pill:hover{background:var(--yellow)}
.hero-list{position:absolute;left:24vw;bottom:14vh;font:17px 'Gaegu';z-index:2}
.hero-list svg{width:70px;display:block;margin-bottom:10px}
.hero-list li{margin-left:18px}
#real{align-items:center;justify-content:space-between;padding:0 3vw}
#real h2{font-size:clamp(64px,12vw,190px);z-index:2}
#real p{position:absolute;left:3vw;bottom:25vh;width:260px;font-weight:500}
#benefits{min-height:130vh}
.badge{position:absolute;width:clamp(120px,16vw,210px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-15deg);z-index:2}
.badge b{font:700 clamp(36px,5vw,70px)/1 'Antonio'}.badge b small{font-size:.5em}
.badge span{font:18px 'Gaegu'}
.b1{background:var(--yellow);border:2px solid var(--brown);left:25vw;top:12vh}
.b2{background:#5c4308;color:var(--yellow);border:3px solid var(--yellow);right:22vw;top:40vh}
.b3{background:var(--yellow);border:2px solid var(--brown);left:30vw;bottom:8vh}
#can{align-items:flex-end;justify-content:center;padding-bottom:12vh}
#can h2{font-size:clamp(80px,17vw,260px);z-index:2}
.can-copy{position:absolute;right:3vw;top:80px;width:300px;font-weight:500;text-align:right}
.can-copy .pill{margin-top:12px}
/* brown section */
#flav{background:var(--brown);color:var(--cream);flex-direction:column;padding:12vh 3vw 10vh;z-index:6;min-height:0}
#flav h2.big{color:var(--cream);font-size:clamp(40px,7vw,110px);text-align:center;max-width:1100px;margin:0 auto 8vh;position:relative;z-index:2}
#flav h2.big mark{background:var(--yellow);color:var(--brown);padding:0 .15em;border-radius:8px}
#flav .note{position:absolute;right:16vw;top:22vh;color:var(--yellow);font:16px 'Gaegu';transform:rotate(8deg)}
#flav h3.title{font-size:clamp(60px,12vw,200px);color:var(--cream);margin:0 0 -3vw;position:relative;z-index:1;display:flex;justify-content:space-between}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4vw;position:relative;z-index:2}
.card{background:var(--cream);color:var(--brown);border-radius:10px;padding:10px 10px 14px;transition:transform .5s}
.card:hover{transform:translateY(-10px) rotate(-1deg)}
.card .pic{aspect-ratio:1/1.15;border-radius:6px;display:grid;place-items:center;overflow:hidden}
.card .pic img{height:92%}
.card .pic.round{background:var(--olive)}
.card .pic.round img{background:none}
.card .pic .disc{width:92%;aspect-ratio:1;border-radius:50%;background:var(--sand);display:grid;place-items:center}
.card .row{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 0;font:22px 'Gaegu'}
.card .row i{font:400 28px/1 'Inter';font-style:normal}
/* story */
#story{align-items:center;padding:12vh 3vw;gap:4vw;overflow:hidden}
#story p{width:260px;font-weight:500;position:relative;z-index:2}
.polas{position:relative;flex:1;height:70vh}
.pola{position:absolute;background:#fff;padding:12px 12px 40px;box-shadow:0 10px 30px #0002;transition:transform .5s}
.pola div{width:100%;height:100%}
.p1{width:32%;height:85%;left:6%;top:6%;transform:rotate(-5deg);background:#E8DDA0}
.p1 div{background:linear-gradient(180deg,#8fd3e6 0 45%,#f2d9a0 45% 60%,#2aa7a1 60%)}
.p2{width:30%;height:80%;left:38%;top:0;transform:rotate(3deg)}
.p2 div{background:radial-gradient(circle at 50% 55%,#f0a62a 0 20%,transparent 21%),linear-gradient(#3e7d3a,#7aa84a)}
.p3{width:26%;height:75%;left:66%;top:10%;transform:rotate(7deg)}
.p3 div{background:linear-gradient(135deg,#d9a778,#6c4426)}
.polas:hover .p1{transform:rotate(-8deg) translateX(-14px)}.polas:hover .p3{transform:rotate(10deg) translateX(14px)}
/* testimonials */
#say{flex-direction:column;justify-content:center;min-height:70vh;padding:10vh 0 10vh 3vw;overflow:hidden}
#say h2{font-size:clamp(50px,8vw,120px);margin-bottom:5vh}
.track{display:flex;gap:2vw;width:max-content;animation:slide 35s linear infinite}
.track:hover{animation-play-state:paused}
.q{width:26vw;min-width:260px;border:2px solid var(--brown);border-radius:14px;padding:26px;text-align:center;position:relative}
.q:before,.q:after{content:"";position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:var(--brown)}
.q:before{left:12px}.q:after{right:12px}
.q .mark{font:700 70px/.8 'Antonio';color:#B8923A}
.q h3{font-size:clamp(24px,2.6vw,38px);margin:10px 0}
.q span{font:17px 'Gaegu'}
@keyframes slide{to{transform:translateX(-50%)}}
/* cta cards */
#cta{display:grid;grid-template-columns:1fr 1fr;gap:1.5vw;padding:6vh 3vw 14vh;min-height:0}
.panel{border:2px solid var(--tan);border-radius:20px;padding:40px 36px;min-height:62vh;position:relative}
.panel:before,.panel:after{content:"";position:absolute;bottom:14px;width:11px;height:11px;border-radius:50%;background:var(--brown)}
.panel:before{left:14px}.panel:after{right:14px}
.pa{background:var(--yellow)}.pa h2{font-size:clamp(50px,8vw,120px);margin:10px 0 24px}
.pa small{font:600 12px 'Inter';text-transform:uppercase}
.pa p{max-width:300px;font-size:18px;font-weight:500}
.pb{background:var(--tan);display:grid;place-items:center;color:var(--cream)}
.pb img{height:48vh;filter:drop-shadow(0 20px 20px #0004);animation:float 5s ease-in-out infinite}
.pb small{position:absolute;top:26px;left:0;right:0;text-align:center;font:600 13px 'Inter'}
@keyframes float{50%{transform:translateY(-14px) rotate(2deg)}}
/* footer */
.ftr{position:relative;background:var(--brown);color:var(--cream);padding:150px 3vw 60px;min-height:100vh;overflow:hidden;z-index:6}
.ftr:before{content:"";position:absolute;top:0;left:0;right:0;height:70px;background:radial-gradient(circle at 50% 0,var(--cream) 62px,transparent 63px) 0 0/140px 70px repeat-x}
.ftr .top{display:flex;justify-content:space-between;color:var(--yellow)}
.ftr .top p{color:var(--cream);font-size:18px;margin-top:6px}
.ftr nav{display:flex;gap:22px;font:22px 'Gaegu';color:var(--cream)}
.ftr nav a:hover{color:var(--yellow)}
.ftr .word{position:absolute;left:0;right:0;bottom:6vh;text-align:center;font:700 clamp(150px,30vw,520px)/.85 'Antonio';color:var(--yellow);z-index:2}
.ftr .fp{position:absolute;bottom:-4vh;width:30vw;fill:#D9C56E}
.ftr .fp.l{left:-6vw;transform:rotate(-14deg)}.ftr .fp.r{right:-4vw;transform:scaleX(-1) rotate(-8deg);width:34vw}
.legal{position:absolute;left:50%;bottom:2.5vh;transform:translateX(-50%);background:var(--sand);color:var(--brown);border-radius:30px;padding:8px 26px;font:16px 'Gaegu';z-index:3;white-space:nowrap}
/* cookie */
.cookie{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;background:#fff;border-radius:8px;box-shadow:0 4px 18px #0002;padding:7px 12px;display:flex;gap:14px;align-items:center;font:15px 'Gaegu'}
.cookie button{border:0;background:none;font:inherit;cursor:pointer;font-size:12px}
.cookie .ok{background:var(--yellow);padding:2px 10px;border-radius:5px}
@media(max-width:800px){
 .hero-copy{width:60vw;bottom:8vh}.hero-list{display:none}
 #real{flex-direction:column;justify-content:center;align-items:center;text-align:center}#real p{position:static;margin-top:20px}
 .can-copy{display:none}.b1{left:6vw}.b2{right:6vw}.b3{left:10vw}
 .cards{grid-template-columns:1fr}#story{flex-direction:column}.polas{width:100%;height:60vh}
 #cta{grid-template-columns:1fr}.ftr .top{flex-direction:column;gap:20px}.ftr nav{flex-wrap:wrap}.legal{white-space:normal;width:90%;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Elementor spacing reset for Palmo page */
.palmo-page .elementor-widget:not(:last-child){margin-bottom:0}
.palmo-page .elementor-column-gap-default>.elementor-column>.elementor-element-populated,.palmo-page .elementor-widget-wrap{padding:0}
.palmo-page .elementor-section.elementor-section-boxed>.elementor-container{max-width:none}