@font-face{font-family:SpotRounded;src:url('rounded-jp-v17.ttf') format('truetype');font-weight:800 900;font-display:swap}
:root{--green:#073f30;--yellow:#f7bb35;--paper:#fffdf4;--dock:84px;--safe:env(safe-area-inset-bottom,0px);--lower-shift:13px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--green);font-family:SpotRounded,"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}svg{display:block}figure{margin:0}button:focus-visible,a:focus-visible{outline:3px solid #ed792e;outline-offset:5px}
.kv{height:100vh;height:100svh;max-width:540px;margin-inline:auto;background:var(--paper);overflow:hidden}
.scene{width:100%;height:100%;position:relative;overflow:hidden;isolation:isolate;container-type:size;background:#594125}
.photo-backdrop{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:50% 55%;z-index:0}
.main-photo{--photo-shift:clamp(56px,9cqh,96px);position:absolute;width:100%;height:calc(100% - var(--photo-shift));top:var(--photo-shift);left:0;object-fit:cover;object-position:50% 0%;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent,black 45px);mask-image:linear-gradient(to bottom,transparent,black 45px)}
.intro-panel{position:absolute;top:0;left:0;width:100%;padding:clamp(22px,4.8cqh,40px) 9% clamp(26px,4.3cqh,32px);z-index:3}.intro-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.paper,.color{position:absolute;pointer-events:none}.paper{fill:var(--paper);z-index:1}.paper-top{inset:0;width:100%;height:100%;z-index:0;transform-origin:50% 22%}.paper-bottom{left:-1%;bottom:-1px;width:102%;height:calc(23% + var(--dock) + var(--safe));transform-origin:50% 100%}
.color{z-index:2;fill:var(--yellow)}.color-yellow-top{left:-7%;top:-10%;width:43%;height:18%;z-index:4;transform-origin:20% 0}.color-yellow-bottom{left:-8%;bottom:-1px;width:72%;height:22%;transform-origin:0 100%}.color-yellow-right{right:-3%;bottom:7%;width:25%;height:18%;transform-origin:100% 100%}.color-green-top{right:-3%;top:-3%;width:29%;height:20%;fill:var(--green);z-index:4;transform-origin:100% 0}.color-green-bottom{left:-6%;bottom:-1px;width:40%;height:16%;fill:var(--green);transform-origin:0 100%}
.brand{position:relative;width:90%;height:14.5cqh;z-index:3;mix-blend-mode:multiply}.logo{width:100%;height:100%}
.headline{width:100%;margin:0;text-align:center;font-weight:900;letter-spacing:-.055em;line-height:1.34;font-size:clamp(21px,6.6vw,35px);font-size:min(6.6cqw,4.2cqh)}.headline span{display:block;white-space:nowrap}.subcopy{width:100%;margin:6px 0 0;text-align:center;font-size:clamp(10px,3vw,15px);font-size:min(3cqw,1.85cqh);font-weight:700;letter-spacing:.06em;line-height:1.7;white-space:nowrap}
.rays{position:absolute;pointer-events:none;z-index:4;fill:none;stroke:var(--yellow);stroke-width:7;stroke-linecap:round}.rays-title{top:20.5%;left:8%;width:10%;height:7%}.rays-photo{top:calc(67% + var(--lower-shift));right:9%;width:12%;height:8%;stroke:#ffe275}
.activity{position:absolute;z-index:4;width:52%;height:21.5%;bottom:calc(var(--dock) + var(--safe) + 51px - var(--lower-shift))}.activity-darts{left:-1%;--tilt:10deg}.activity-karaoke{right:-1%;--tilt:-10deg}.photo-frame{height:100%;width:100%;border:3px solid var(--paper);border-radius:22% 16% 27% 19% / 19% 21% 24% 31%;overflow:hidden;position:relative;transform:rotate(var(--tilt));background:#735028}.photo-frame img{height:100%;width:100%;object-fit:cover;object-position:58% 35%;display:block;transform:scale(1.04)}.activity-karaoke .photo-frame{border-radius:21% 27% 20% 25% / 28% 21% 30% 22%}.activity-karaoke img{object-position:43% 35%}.photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.62))}.photo-frame figcaption{position:absolute;z-index:1;right:9%;bottom:7%;font-weight:800;color:white;font-size:clamp(11px,3.5vw,19px);font-size:min(3.6cqw,2.2cqh);line-height:1.45;letter-spacing:.06em;transform:rotate(-6deg);text-shadow:0 1px 5px #291b15}
.trail{position:absolute;right:-4%;bottom:calc(var(--dock) + var(--safe) - 4px);width:45%;height:6%;stroke:#e9a82d;stroke-width:3;stroke-dasharray:7 7;stroke-linecap:round;z-index:3}
.scroll{position:absolute;bottom:calc(var(--dock) + var(--safe) + 9px - var(--lower-shift));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;flex-direction:column;gap:4px;text-decoration:none}.scroll span{font-family:Arial,sans-serif;letter-spacing:.3em;font-size:9px;font-weight:700}.scroll svg{width:24px;height:21px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sticky-cta{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,540px);z-index:20;background:transparent;height:calc(var(--dock) + var(--safe));padding:14px 14px calc(14px + var(--safe));pointer-events:none}.cta-inner{display:grid;grid-template-columns:1.17fr 1fr;gap:9px;height:100%}.cta{display:flex;justify-content:center;align-items:center;gap:7px;padding:0 9px;border-radius:16px;white-space:nowrap;text-decoration:none;min-width:0;font-size:clamp(12px,3.4vw,18px);font-weight:800;transition:filter .2s,transform .2s;pointer-events:auto;box-shadow:0 4px 14px #073f3014}.cta:hover{filter:brightness(1.07)}.cta:active{transform:scale(.97)}.cta-events{background:var(--yellow);color:var(--green)}.cta-instagram{background:var(--green);color:var(--paper);border:1.5px solid var(--paper);font-family:Arial,sans-serif}.peatix-icon{height:26px;width:26px;object-fit:contain;border-radius:5px;flex-shrink:0}.instagram-icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;flex-shrink:0}.chevron{width:8px;height:14px;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;margin-left:auto;flex-shrink:0}.cta span{margin-right:auto}
.link-dialog{color:var(--green);border:0;border-radius:22px;background:var(--paper);padding:28px;max-width:calc(100% - 40px);text-align:center}.link-dialog::backdrop{background:#001b16aa}.link-dialog button{border:0;border-radius:10px;background:var(--green);color:white;padding:10px 26px;cursor:pointer}
/* Before enhancement, every element is visible. JS starts the timeline only after the images have loaded. */
.js-motion .pop,.js-motion .reveal{opacity:0}.js-motion .sticky-cta{visibility:hidden;transform:translate(-50%,110%)}
.playing .main-photo{animation:photo-settle 2.5s ease-out both}.playing .paper-top{animation:shape-pop .55s .32s cubic-bezier(.2,.75,.25,1.2) both}.playing .paper-bottom{animation:lower-paper-in .55s .4s cubic-bezier(.2,.75,.25,1) both}.playing .color-yellow-top,.playing .color-yellow-bottom,.playing .color-yellow-right{animation:shape-pop .5s .47s cubic-bezier(.2,.75,.25,1.25) both}.playing .color-green-top,.playing .color-green-bottom{animation:shape-pop .5s .6s cubic-bezier(.2,.75,.25,1.2) both}
.playing .brand{animation:content-pop .5s .84s cubic-bezier(.2,.75,.25,1.15) both}.playing .headline-first{animation:content-in .4s 1.02s ease-out both}.playing .headline-second{animation:content-in .4s 1.14s ease-out both}.playing .subcopy{animation:content-in .4s 1.3s ease-out both}.playing .rays-title{animation:content-pop .4s 1.4s ease-out both}.playing .activity-darts{animation:card-in .55s 1.57s cubic-bezier(.2,.75,.25,1.14) both}.playing .activity-karaoke{animation:card-in .55s 1.72s cubic-bezier(.2,.75,.25,1.14) both}.playing .rays-photo,.playing .trail{animation:content-pop .4s 1.95s ease-out both}.playing .scroll{animation:scroll-in .3s 2.08s ease-out both}.playing .scroll svg{animation:scroll-nudge 1.8s 2.5s ease-in-out infinite}.playing .sticky-cta{visibility:visible;animation:dock-in .5s 2.25s cubic-bezier(.2,.75,.25,1) both}
@keyframes photo-settle{from{top:0;height:100%;transform:scale(1.04)}to{top:var(--photo-shift);height:calc(100% - var(--photo-shift));transform:scale(1)}}@keyframes shape-pop{0%{opacity:0;transform:scale(.45)}70%{opacity:1;transform:scale(1.045)}100%{opacity:1;transform:scale(1)}}@keyframes content-pop{from{opacity:0;transform:translateY(8px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes content-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{from{opacity:0;transform:translateY(32px) scale(.84)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scroll-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes dock-in{from{transform:translate(-50%,110%)}to{transform:translate(-50%,0)}}@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes lower-paper-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
/* Benefits replace only the two photo cards; the paper, colored shapes, scroll and dock geometry stay unchanged. */
.activity{width:48%}.activity-friends{left:1%}.activity-discovery{right:1%}.benefit-figure{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.benefit-icon{display:block;width:94%;height:min(11cqh,23cqw);object-fit:contain}.benefit-caption{margin:0;text-align:center;white-space:nowrap;font-weight:900;font-size:min(3.35cqw,2.1cqh);line-height:1.35;letter-spacing:-.055em;color:var(--green)}.benefit-caption::after{content:"";display:block;width:34px;height:3px;margin:5px auto 0;background:var(--yellow);border-radius:4px}
.playing .activity-friends .benefit-icon{animation:shape-pop .55s 1.57s cubic-bezier(.2,.75,.25,1.14) both}.playing .activity-discovery .benefit-icon{animation:shape-pop .55s 1.72s cubic-bezier(.2,.75,.25,1.14) both}.playing .activity-friends .benefit-caption{animation:content-in .4s 1.96s ease-out both}.playing .activity-discovery .benefit-caption{animation:content-in .4s 2.11s ease-out both}.playing .scroll{animation-delay:2.41s}.playing .scroll svg{animation-delay:2.9s}.playing .sticky-cta{animation-delay:2.58s}
@media(min-width:541px){body{background:#f1eee4}.kv{box-shadow:0 0 48px #073f3018}.headline{font-size:min(35px,4.2cqh)}.subcopy{font-size:min(15px,1.85cqh)}}
@media(max-width:359px){:root{--dock:76px}.sticky-cta{padding-inline:10px}.cta{font-size:11px;gap:5px;padding-inline:7px}.peatix-icon{width:22px;height:22px}.instagram-icon{width:17px;height:17px}.cta-inner{gap:7px}}
@media(orientation:landscape) and (max-height:540px){.kv{height:840px}.scene{container-type:size}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js-motion .pop,.js-motion .reveal{opacity:1}.js-motion .sticky-cta{visibility:visible;transform:translateX(-50%)}.playing *{animation:none!important}}