/* Filled botanical imagery and marine pigment for Shinkyo. */
:root{--reading-progress:0;--marine-light:#8dcdcf}
.header-progress{position:absolute;bottom:-1px;left:0;right:0;height:2px;pointer-events:none;transform-origin:left;transform:scaleX(var(--reading-progress));background:linear-gradient(90deg,#73c5bc,var(--teal),#6cb6cb);opacity:.85}
.effect-section,main>section{position:relative;isolation:isolate}
.effect-section>.container,main>section>.container{position:relative;z-index:1}
.hero-photo{overflow:hidden}
.water-light{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.58;mask-image:linear-gradient(90deg,transparent 15%,#000 55%)}
.water-light::before,.water-light::after{content:'';position:absolute;inset:-14%;pointer-events:none}
.water-light::before{background:radial-gradient(ellipse at 73% 24%,#ffffff96 0%,#ffffff00 31%),linear-gradient(115deg,transparent 27%,#ffffff6e 34%,transparent 43%);mix-blend-mode:screen;animation:marine-light-drift 17s ease-in-out infinite alternate}
.water-light::after{background:radial-gradient(ellipse at 48% 68%,#cfffff66,transparent 37%);animation:marine-light-return 23s ease-in-out infinite alternate}
.water-light::before,.water-light::after{animation-play-state:var(--ambient-state,running)}
.hero-tide{position:absolute;inset:auto -15% 20px -15%;height:158px;overflow:hidden;pointer-events:none;z-index:0}
.hero-tide svg{width:200%;height:100%;max-width:none;fill:none;stroke-width:1.2;stroke:#4a9ca9;opacity:.27;animation:marine-current 29s linear infinite;animation-play-state:var(--ambient-state,running)}
.hero-tide svg path:nth-child(2){stroke:#fff;stroke-width:3;opacity:.8}.hero-tide svg path:nth-child(3){stroke:#93bca1;opacity:.55}
.hero-tide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffffc2,transparent 40%)}
.motion-toggle{position:absolute;right:var(--gutter);bottom:70px;z-index:4;display:inline-flex;gap:9px;align-items:center;min-height:44px;padding:9px 13px;border:1px solid #698f974d;border-radius:3px;background:#ffffffed;color:#315b65;font-size:11px;line-height:1.5;letter-spacing:.035em;transition:background .25s,border-color .25s}
.motion-toggle:hover,.motion-toggle:focus-visible{background:#fff;border-color:var(--teal)}
.motion-toggle svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0}
.motion-toggle[aria-pressed=true] .pause-symbol{display:none}.motion-toggle[aria-pressed=false] .play-symbol{display:none}
.hero-signature{box-shadow:0 8px 25px #00536b0b}
.algit-section,.business-section,.products-section,.knowledge-section,.quality-section,.company-section,.contact-section{overflow:hidden}
.algit-visual{background:radial-gradient(ellipse at 45% 42%,#f9fbf4 10%,#eaf3e9 70%,#e4f1ed);border-radius:47% 43% 46% 42%}
.algit-visual::before,.algit-visual::after,.business-section::before,.instagram-section::after{content:none}
.algit-botanical{position:absolute;width:clamp(190px,21vw,285px);height:440px;right:-6%;top:-13px;z-index:1;pointer-events:none;transform:rotate(7deg)}
.algit-botanical img{width:100%;height:100%;object-fit:contain;animation:botanical-breathe 16s ease-in-out infinite alternate;animation-play-state:var(--ambient-state,running);transform-origin:50% 90%}
.seaweed-figure{z-index:2;box-shadow:0 15px 34px #295b461a}
.image-credit{z-index:3}
.business-image-link{isolation:isolate;box-shadow:0 12px 28px #254c4010;transition:box-shadow .4s ease}
.business-image-link::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 22%,#ffffff4d 44%,transparent 63%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.6,.3,1)}
.image-index,.image-action{z-index:2}
.business-body .small-label{position:relative;padding-left:15px}.business-body .small-label::before{content:'';position:absolute;width:5px;height:5px;left:0;top:6px;border-radius:50%;background:var(--teal)}
.business-livestock .small-label::before{background:#6f8f53}.business-food .small-label::before{background:#a58b5f}
.product-specimen{isolation:isolate;background:radial-gradient(ellipse at 50% 38%,#fafbf5 6%,#edf4e9 74%)}
.product-specimen::before{content:'';position:absolute;left:-22px;right:-20px;bottom:-18px;height:83%;background:url(illustrations/seaweed-sprig.webp) center/contain no-repeat;pointer-events:none;z-index:0;opacity:.73;animation:specimen-breathe 20s ease-in-out infinite alternate;animation-play-state:var(--ambient-state,running)}
.product-specimen>img{position:relative;z-index:2;filter:drop-shadow(0 10px 11px #33503816)}
.specimen-caption{z-index:3}.product-tabs button{overflow:hidden}
.product-tabs button::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--teal);opacity:.08;transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease}
.product-tabs button:hover::before,.product-tabs button:focus-visible::before{transform:scaleY(5)}
.product-tabs button[aria-selected=true]{background:linear-gradient(180deg,#f3f7f000,#eaf3eb88)}
.product-panel{animation:product-panel-appear .42s ease-out both}
.knowledge-section{background:linear-gradient(120deg,#f6f2e9,#f5f3eb 60%,#eef3e7)}
.knowledge-botanical{width:260px;height:255px;margin:25px 12% -12px auto;pointer-events:none}
.knowledge-botanical img{width:100%;height:100%;object-fit:contain;animation:garden-breathe 18s ease-in-out infinite alternate;animation-play-state:var(--ambient-state,running);transform-origin:50% 95%}
.growth-guide li{position:relative;transition:background .35s ease;padding-right:0}
.growth-guide li>div{min-width:0}
.quality-process{padding:35px 25px 35px 28px;background:radial-gradient(ellipse at 15% 20%,#e5f1e980,transparent 62%),linear-gradient(140deg,#f9fbf7,#f1f6ed80);border-radius:1px 60px 1px 1px}
.quality-process li>span{box-shadow:0 0 0 6px #ecf5f0;transition:box-shadow .6s ease,background .6s ease}
.quality-process.effects-visible li>span{background:#f8fcfa;box-shadow:0 0 0 6px #ecf5f0}
.company-section{background:linear-gradient(140deg,#f3f7f6,#f3f7f6 58%,#eaf3ef)}
.company-info>div{transition:border-color .4s ease}
.news-row{transition:background .3s ease}
.instagram-section{position:relative;overflow:hidden;background:linear-gradient(105deg,#edf4ef,#e4f0e9 70%,#f1f6ef)}
.instagram-inner{position:relative;z-index:1}
.instagram-icon{transition:transform .4s ease,color .4s ease}
.faq-list details{transition:background .35s ease,border-color .35s ease}
.faq-list details[open]{background:linear-gradient(90deg,#f4f8f180,transparent);border-color:#afcbbb}
.faq-list details[open] .faq-answer{animation:faq-answer-appear .3s ease-out both}
.contact-section{background:radial-gradient(ellipse at 7% 90%,#cfe8db66,transparent 55%),linear-gradient(130deg,#edf5f2,#eaf3ef 50%,#edf5f2)}
.contact-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:35px;align-items:center;text-align:left}
.contact-heading .eyebrow{justify-content:flex-start}
.contact-heading-copy{min-width:0;position:relative;z-index:1}
.contact-heading-copy>p:last-child{font-size:15px;line-height:2;margin-top:23px;color:var(--body)}
.contact-heading .display-title{font-size:clamp(29px,3.1vw,43px);line-height:1.7}
.contact-botanical{height:260px;pointer-events:none}
.contact-botanical img{width:100%;height:100%;object-fit:contain;animation:bouquet-breathe 22s ease-in-out infinite alternate;animation-play-state:var(--ambient-state,running);transform-origin:75% 85%}
.contact-entry-number{display:inline-flex;align-items:center;gap:13px}
.contact-shop{position:relative;z-index:1}
.site-footer{position:relative;overflow:hidden;isolation:isolate;padding-top:153px}
.footer-top,.footer-bottom{position:relative;z-index:1}
.footer-current{position:absolute;left:-4%;right:-4%;top:-8px;height:122px;pointer-events:none;overflow:hidden;z-index:0;opacity:.72;mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.footer-current img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:footer-pigment-drift 30s ease-in-out infinite alternate;animation-play-state:var(--ambient-state,running)}
.button,.header-shop{background-image:linear-gradient(112deg,transparent 33%,#ffffff24 46%,transparent 57%);background-size:280% 100%;background-position:100% 0;transition:background-color .3s,color .3s,box-shadow .3s,transform .3s,background-position .65s}
.button:hover,.button:focus-visible,.header-shop:hover,.header-shop:focus-visible{background-position:-100% 0}
.button-outline{background-image:linear-gradient(112deg,transparent 33%,#c0e0d752 46%,transparent 57%)}
.button-primary:hover,.button-primary:focus-visible{box-shadow:0 9px 22px #006d8326,0 0 0 3px #91c6b816}
.text-link{background-image:linear-gradient(var(--teal),var(--teal));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .4s ease,color .25s,border-color .25s}
.text-link:hover,.text-link:focus-visible{background-size:100% 1px}
.header-contact>span,.back-top span{transition:transform .35s ease}
.back-top:hover span{transform:translateY(-4px)}
@keyframes marine-light-drift{from{transform:translate(-2%,-1%) rotate(-2deg);opacity:.5}to{transform:translate(4%,3%) rotate(2deg);opacity:1}}
@keyframes marine-light-return{from{transform:translate(3%,2%);opacity:.45}to{transform:translate(-4%,-2%);opacity:.85}}
@keyframes marine-current{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes footer-pigment-drift{from{transform:translateX(1.3%) scale(1.04)}to{transform:translateX(-1.3%) scale(1.04)}}
@keyframes botanical-breathe{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes specimen-breathe{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}
@keyframes garden-breathe{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
@keyframes bouquet-breathe{from{transform:translateY(0) rotate(-.7deg)}to{transform:translateY(-4px) rotate(.7deg)}}
@keyframes product-panel-appear{from{opacity:.7;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes faq-answer-appear{from{opacity:.55;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.business-image-link:hover{box-shadow:0 18px 32px #254c401c}.business-image-link:hover::after{transform:translateX(120%)}.business-image-link:hover .image-action{transform:rotate(3deg)}.growth-guide li:hover{background:#e9eddc52}.company-info>div:hover{border-color:#90b6a6}.instagram-inner:hover .instagram-icon{transform:rotate(-5deg)}}
.effects-paused .hero-tide svg,.effects-paused .botanical-art,.effects-paused .water-light::before,.effects-paused .water-light::after,.effects-paused .product-specimen::before,.effects-paused .scroll-cue span::after,.effects-tab-hidden .hero-tide svg,.effects-tab-hidden .botanical-art,.effects-tab-hidden .water-light::before,.effects-tab-hidden .water-light::after,.effects-tab-hidden .product-specimen::before{animation-play-state:paused!important}
.effects-reduced .hero-tide svg,.effects-reduced .botanical-art,.effects-reduced .water-light::before,.effects-reduced .water-light::after,.effects-reduced .product-specimen::before,html:not(.effects-ready) .hero-tide svg,html:not(.effects-ready) .botanical-art,html:not(.effects-ready) .water-light::before,html:not(.effects-ready) .water-light::after,html:not(.effects-ready) .product-specimen::before{animation:none!important}
.effects-paused [data-reveal].is-revealing,.effects-paused .product-panel,.effects-paused .faq-answer{animation:none!important}
@media (max-width:1100px){.hero-tide{height:130px}.motion-toggle{bottom:67px}.algit-botanical{right:-9%;height:390px;width:210px;top:8px}.contact-heading{gap:20px;grid-template-columns:minmax(0,1.35fr) minmax(190px,1fr)}.contact-botanical{height:220px}.knowledge-botanical{width:220px;height:230px;margin-right:6%}}
@media (max-width:700px){.motion-toggle{right:24px;bottom:50px;min-height:44px;padding:8px 11px;font-size:10px}.motion-toggle svg{width:12px;height:12px}.hero-tide{bottom:7px;height:123px;left:-30%;right:-30%}.water-light{opacity:.45;mask-image:linear-gradient(180deg,transparent,#000 40%)}.water-light::after{display:none}.water-light::before{animation-duration:24s}.hero-tide svg{animation-duration:36s}.hero-tide::after{background:linear-gradient(90deg,#ffffff40,transparent 45%)}.algit-botanical{width:172px;height:310px;right:-7%;top:-12px}.business-image-link::after{display:none}.product-specimen::before{height:86%;left:-7px;right:-7px;bottom:-15px;opacity:.7}.knowledge-botanical{width:210px;height:218px;margin:17px 5% 0 auto}.quality-process{padding:25px 12px 25px 10px;border-radius:1px 45px 1px 1px}.contact-heading{grid-template-columns:1fr;gap:8px}.contact-heading .display-title{font-size:28px;line-height:1.75;letter-spacing:.035em}.contact-heading-copy>p:last-child{font-size:13px;line-height:2;margin-top:21px}.contact-botanical{height:160px;width:245px;max-width:100%;margin:3px 0 -8px auto}.contact-grid{margin-top:23px}.site-footer{padding-top:118px}.footer-current{height:86px;left:-12%;right:-12%}}
@media (prefers-reduced-motion:reduce){.hero-tide svg,.botanical-art,.water-light::before,.water-light::after,.product-specimen::before,.product-panel,.faq-answer{animation:none!important}.business-image-link::after{display:none}.instagram-inner:hover .instagram-icon,.back-top:hover span{transform:none}}
