/* Happy Plant — shared styles (converted from Claude Design export) */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FCFDF2;color:#12291B;font-family:'Schibsted Grotesk',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html,body{overflow-x:clip}
::selection{background:#DBFF4A;color:#12291B}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

/* ---------- keyframes ---------- */
@keyframes hpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hpPipWave{0%,72%,100%{transform:rotate(45deg) translateY(0) scale(1)}82%{transform:rotate(45deg) translateY(-7px) scale(1.18)}92%{transform:rotate(45deg) translateY(0) scale(.94)}}
@keyframes hpPipPop{0%{transform:rotate(45deg) scale(0);opacity:0}60%{transform:rotate(45deg) scale(1.35);opacity:1}100%{transform:rotate(45deg) scale(1);opacity:1}}
@keyframes hpPipHalo{0%{box-shadow:0 0 0 0 rgba(31,184,112,.55)}70%{box-shadow:0 0 0 11px rgba(31,184,112,0)}100%{box-shadow:0 0 0 0 rgba(31,184,112,0)}}
@keyframes hpFlow{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes hpFlagWave{0%,100%{transform:rotate(0) skewY(0)}50%{transform:rotate(-5deg) skewY(4deg)}}
@keyframes hpBounce{0%{transform:scale(1,1)}30%{transform:scale(1.07,.88) translateY(5px)}55%{transform:scale(.95,1.09) translateY(-16px)}78%{transform:scale(1.04,.94) translateY(0)}100%{transform:scale(1,1)}}
@keyframes hpDropFall{0%{transform:rotate(45deg) translate(0,0);opacity:.95}100%{transform:rotate(45deg) translate(54px,54px);opacity:0}}
@keyframes hpRain{0%{transform:translateY(-60px);opacity:0}10%{opacity:.45}82%{opacity:.45}100%{transform:translateY(980px);opacity:0}}
@keyframes hpPhoneInL{from{transform:translateY(110px) rotate(-1deg);opacity:0}to{transform:translateY(0) rotate(-7deg);opacity:1}}
@keyframes hpPhoneInR{from{transform:translateY(110px) rotate(1deg);opacity:0}to{transform:translateY(0) rotate(6deg);opacity:1}}
@keyframes hpMarquee{to{transform:translateX(-50%)}}
@keyframes hpFloatL{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(-5.5deg) translateY(-12px)}}
@keyframes hpFloatR{from{transform:rotate(6deg) translateY(0)}to{transform:rotate(4.5deg) translateY(-10px)}}
@keyframes hpTwinkle{0%,100%{opacity:.1}50%{opacity:.9}}
@keyframes hpPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes hpSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.2deg)}}

/* ---------- watering cursor ---------- */
.waterable{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2C12 2 4 11.5 4 16.2A8 7.2 0 0 0 20 16.2C20 11.5 12 2 12 2Z" fill="%231FB870" stroke="%2312291B" stroke-width="1.6"/></svg>') 13 22, auto}

/* ---------- nav ---------- */
.hp-navwrap{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.hp-nav{pointer-events:auto;position:relative;display:flex;align-items:center;gap:4px;background:rgba(252,253,242,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:2px solid #12291B;border-radius:999px;padding:7px 8px 7px 18px;box-shadow:0 4px 0 #12291B;max-width:96vw}
.hp-logo{display:flex;align-items:center;margin-right:10px}
.hp-links{display:flex;align-items:center;gap:4px}
.hp-link{text-decoration:none;color:#12291B;font-weight:600;font-size:14px;padding:8px 13px;border-radius:999px;white-space:nowrap}
.hp-link:hover,.hp-link[aria-current="page"]{background:#DBFF4A}
.hp-cta{display:flex;align-items:center;gap:8px;text-decoration:none;background:#12291B;color:#FCFDF2;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;padding:9px 18px 10px;border-radius:999px;margin-left:8px;transition:transform .15s ease;white-space:nowrap}
.hp-cta:hover{transform:scale(1.04)}
.hp-drop{display:inline-block;width:10px;height:10px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:#A8ED28;flex:none}
.hp-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:2px solid #12291B;background:#FFFFFF;cursor:pointer;padding:0;margin-left:6px;flex:none}
.hp-menu-btn svg{display:block}

@media (max-width:900px){
  .hp-menu-btn{display:flex}
  .hp-links{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;background:#FCFDF2;border:2px solid #12291B;border-radius:26px;box-shadow:0 4px 0 #12291B;padding:10px;gap:2px}
  .hp-nav.open .hp-links{display:flex}
  .hp-link{text-align:center;padding:12px}
}
@media (max-width:400px){
  .hp-cta{font-size:13.5px;padding:8px 13px 9px}
  .hp-nav{padding-left:12px}
}

/* ---------- buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:11px;text-decoration:none;background:#12291B;color:#FCFDF2;font-family:'Baloo 2',sans-serif;font-weight:700;border:2px solid #12291B;border-radius:999px;box-shadow:0 5px 0 #1FB870;transition:transform .15s ease,box-shadow .15s ease}
.btn-primary:hover{transform:translateY(3px);box-shadow:0 2px 0 #1FB870}
.btn-primary .hp-drop{width:13px;height:13px}
.btn-white{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:#FFFFFF;color:#12291B;font-family:'Baloo 2',sans-serif;font-weight:700;border:2px solid #12291B;border-radius:999px;box-shadow:0 4px 0 rgba(18,41,27,.15);transition:transform .15s ease,box-shadow .15s ease}
.btn-white:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(18,41,27,.15)}
.btn-lime{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:#DBFF4A;color:#12291B;font-family:'Baloo 2',sans-serif;font-weight:700;border:2px solid #12291B;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.btn-lime:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn-dark-shadow{box-shadow:0 5px 0 rgba(0,0,0,.3)}
.btn-dark-shadow:hover{box-shadow:0 2px 0 rgba(0,0,0,.3)}

/* ---------- reveals (only hidden when JS is running) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ---------- home: hero ---------- */
.hero-bubble{position:absolute;top:-14px;right:-150px;background:#FFFFFF;border:2px solid #12291B;border-radius:16px;padding:9px 14px 10px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;white-space:nowrap;box-shadow:0 3px 0 rgba(18,41,27,.18);z-index:2}
.hero-bubble::after{content:'';position:absolute;bottom:-8px;left:22px;width:13px;height:13px;background:inherit;border-right:2px solid #12291B;border-bottom:2px solid #12291B;transform:rotate(45deg)}
.footer-link{color:rgba(252,253,242,.85);text-decoration:none;font-size:14.5px}
.footer-link:hover{color:#DBFF4A}
.pk-download{color:#DBFF4A;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;text-decoration:none}
.pk-download:hover{text-decoration:underline}

.hp-marquee{display:flex;width:max-content;gap:22px;animation:hpMarquee 42s linear infinite;padding:10px 0 26px}
.hp-marquee:hover{animation-play-state:paused}

.booth-open-btn{display:flex;width:fit-content;align-items:center;gap:9px;margin-top:16px;background:#12291B;color:#FCFDF2;border:none;border-radius:999px;padding:10px 16px;font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.5px;cursor:pointer;transition:transform .15s ease}
.booth-open-btn:hover{transform:scale(1.05) rotate(-1deg)}
.booth-close-btn{margin-left:auto;width:34px;height:34px;border-radius:50%;border:2px solid #12291B;background:#FFFFFF;font-size:15px;font-weight:700;cursor:pointer;color:#12291B;line-height:1}
.booth-close-btn:hover{background:#DBFF4A}

/* ---------- support FAQ ---------- */
summary::-webkit-details-marker{display:none}
summary{list-style:none}
details[open] .hp-plus{transform:rotate(45deg)}
details[open] summary{background:#F2FFA6}

/* ---------- responsive: home ---------- */
@media (max-width:1080px){
  .bento-5,.bento-4,.bento-3,.bento-7{grid-column:span 6 !important}
}
@media (max-width:760px){
  .bento-5,.bento-4,.bento-3,.bento-7{grid-column:span 12 !important}
  .hero-phone{display:none !important}
  #hp-mascot-stage{height:400px !important}
  .hero-bubble{top:-58px !important;right:auto !important;left:50% !important;transform:translateX(-50%)}
  .hero-bubble::after{left:calc(50% - 7px)}
  .timelapse-card{flex-direction:column !important;min-height:0 !important}
  .timelapse-shot{min-height:380px !important}
  .origin-grid{grid-template-columns:1fr !important}
  .origin-grid .origin-photo{order:2}
}
@media (max-width:560px){
  .hero-jungle{opacity:.55}
  .cs-grid{grid-template-columns:1fr !important}
}

/* ---------- responsive: about ---------- */
@media (max-width:820px){
  .about-hero-grid{grid-template-columns:1fr !important}
  .about-hero-grid .about-photo{justify-self:start !important;margin-top:6px}
  .tl-row{grid-template-columns:56px 22px 1fr !important;gap:0 12px !important}
  .tl-year{font-size:16px !important}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
}