/* Among Ad — scroll motion in the spirit of brikken.co (shared by every page) */
/* ---------- layout: one side margin for every page, so all content shares the same left and right edge ---------- */
:root{--ama-gx:clamp(24px,6.5vw,112px);--ama-col:calc((100% - 5 * 24px) / 6 + 24px)}
section,article:not([data-tilt]) > header,article:not([data-tilt]) > div{padding-left:var(--ama-gx) !important;padding-right:var(--ama-gx) !important}
div[aria-hidden="true"][style*="repeat(6, minmax(0, 1fr))"]{padding:0 var(--ama-gx) !important}
/* the giant Among Ad wordmark fits inside the wider margins */
[style*="clamp(76px, 17.5vw, 270px)"]{font-size:clamp(60px,15vw,232px) !important}
/* page headers on the inner pages: sized so each line of the heading stays on one line (2 lines in total) */
h1[style*="clamp(56px, 9vw, 150px)"]{font-size:clamp(38px,6vw,96px) !important}
h1[style*="clamp(48px, 6.4vw, 104px)"]{font-size:clamp(34px,4vw,64px) !important}
h1[style*="clamp(44px, 6.4vw, 104px)"]{font-size:clamp(32px,4.2vw,68px) !important}
h1[style*="clamp(44px, 6.6vw, 108px)"]{font-size:clamp(38px,6vw,96px) !important}
/* FAQ column starts on the same grid line as the other text columns */
section > div[style*="max-width: 880px"]{margin-left:var(--ama-col) !important;margin-right:0 !important}
/* ---------- Thai text: room for vowels and tone marks above and below each line ---------- */
:is(h1,h2,h3,p,span,blockquote,a)[style*="line-height: 0.9"],
:is(h1,h2,h3,p,span,blockquote,a)[style*="line-height: 1;"],
:is(h1,h2,h3,p,span,blockquote,a)[style$="line-height: 1"],
:is(h1,h2,h3,p,span,blockquote,a)[style*="line-height: 1.0"],
:is(h1,h2,h3,p,span,blockquote,a)[style*="line-height: 1.1"],
:is(h1,h2,h3,p,span,blockquote,a)[style*="line-height: 1.2"]{line-height:1.38 !important;padding-top:.04em}
:is(h1,h2,h3,p,span,blockquote,a)[style*="letter-spacing: -0.0"]{letter-spacing:-0.005em !important}
/* Latin-only display type keeps its tight setting */
section[aria-label="แนะนำ"] h1,#inc-h,#svc-h,p[style*="white-space: nowrap"]{line-height:.92 !important;letter-spacing:-0.05em !important;padding-top:0}
#inc-h,#svc-h{letter-spacing:0 !important}
@media (max-width: 800px){
[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"]:not([aria-hidden]){display:block !important}
section > div[style*="max-width: 880px"]{margin-left:0 !important}
}
.ama-loader{display:none}
@media (prefers-reduced-motion: no-preference){
a,button{transition:opacity .25s ease,transform .25s ease,background-color .25s ease}
a[style*="border-radius: 6px"]:hover,button:hover{transform:translateY(-2px)}
img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
a:hover img{transform:scale(1.04)}
.ama-loader{display:flex;animation:ama-load .6s ease 1s both}
.ama-loader svg{animation:ama-pulse 1s ease both}
@keyframes ama-load{to{opacity:0;visibility:hidden}}
@keyframes ama-pulse{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
@keyframes ama-up{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes ama-ink{from{color:#B4B1AB}to{color:#0A0A0A}}
@keyframes ama-ink-dark{from{color:#3A3A36}to{color:#FFFFFF}}
@keyframes ama-clip{from{clip-path:inset(12% 8% round 4px)}to{clip-path:inset(0 0 round 4px)}}
@keyframes ama-zoom{from{transform:scale(.7)}to{transform:none}}
@keyframes ama-away{to{transform:translateY(-10vh) scale(.95);opacity:.2}}
@keyframes ama-turn{to{transform:rotate(-16deg) scale(.8);opacity:.4}}
@keyframes ama-glow{0%,100%{color:#3A3A36}35%,65%{color:#FFFFFF}}
/* blocks rise in as they enter */
section :is(h2,h3,p,table,form,dl,ol,figure,img):not(article *,.ama-pin *,[style*="height: clamp"] *,[style*="border-bottom: 1px solid #0A0A0A"] *,[style*="border-top: 1px solid #3A3A36"] *,h1 *),
section article:not([data-tilt]),
section div[style*="border-bottom: 1px solid #0A0A0A"],
section div[style*="border-top: 1px solid #3A3A36"]:not(.ama-pin *){animation:ama-up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
/* big statements fill from grey to black while scrolling */
section h2:has(> span[style*="color: #B4B1AB"]),section p:has(> span[style*="color: #B4B1AB"]){animation-name:ama-up,ama-ink;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view(),view();animation-range:entry 0% entry 70%,cover 15% cover 35%}
section span[style*="color: #B4B1AB"]{animation:ama-ink linear both;animation-timeline:view();animation-range:cover 25% cover 50%}
section span[style*="color: #5A5A55"]{animation:ama-ink-dark linear both;animation-timeline:view();animation-range:cover 25% cover 50%}
section h1 span[style*="color: #B4B1AB"]{animation-range:exit 0% exit 60%}
/* the brand line ends in mustard yellow */
@keyframes ama-ink-gold{from{color:#3A3A36}to{color:#F2C641}}
section span.ama-gold{animation:ama-ink-gold linear both;animation-timeline:view();animation-range:cover 25% cover 50%}
/* STRATEGY / BRAND / ADS style words light up one after another */
#svc-h > span{animation:ama-glow linear both;animation-timeline:view();animation-range:cover 15% cover 55%}
#svc-h > span:nth-child(2){animation-range:cover 30% cover 70%}
#svc-h > span:nth-child(3){animation-range:cover 45% cover 85%}
/* pinned sections (.ama-pin, data-n = 3 or 4 steps): the stage sticks to the screen and walks through the words */
@keyframes ama-word{0%,100%{color:#3A3A36}18%,82%{color:#FFFFFF}}
@keyframes ama-word-light{0%,100%{color:#C9C6C0}18%,82%{color:#0A0A0A}}
@keyframes ama-cap{0%{opacity:0;transform:translateY(24px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-24px)}}
@keyframes ama-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ama-pin{height:2700px !important;view-timeline-name:--ama-pin}
.ama-pin[data-n="4"]{height:3400px !important}
.ama-pin-stage{position:sticky !important;top:0;height:min(100vh,900px) !important;box-sizing:border-box;padding:96px 0 48px}
.ama-pin-caps{display:block !important;position:relative;height:150px;border-top:0 !important}
.ama-cap{position:absolute;inset:0;opacity:0;animation:ama-cap linear both;animation-timeline:--ama-pin}
.ama-pin-words > span{animation:ama-word linear both;animation-timeline:--ama-pin}
.ama-pin.is-light .ama-pin-words > span{animation-name:ama-word-light}
.ama-pin[data-n="3"] :is(.ama-cap,.ama-pin-words > span):nth-child(1){animation-range:contain 0% contain 33.3%}
.ama-pin[data-n="3"] :is(.ama-cap,.ama-pin-words > span):nth-child(2){animation-range:contain 33.3% contain 66.6%}
.ama-pin[data-n="3"] :is(.ama-cap,.ama-pin-words > span):nth-child(3){animation-range:contain 66.6% contain 100%}
.ama-pin[data-n="4"] :is(.ama-cap,.ama-pin-words > span):nth-child(1){animation-range:contain 0% contain 25%}
.ama-pin[data-n="4"] :is(.ama-cap,.ama-pin-words > span):nth-child(2){animation-range:contain 25% contain 50%}
.ama-pin[data-n="4"] :is(.ama-cap,.ama-pin-words > span):nth-child(3){animation-range:contain 50% contain 75%}
.ama-pin[data-n="4"] :is(.ama-cap,.ama-pin-words > span):nth-child(4){animation-range:contain 75% contain 100%}
.ama-pin-bar{display:block !important}
.ama-pin-bar > div{transform-origin:left;animation:ama-bar linear both;animation-timeline:--ama-pin;animation-range:contain 0% contain 100%}
/* case images open up and the logo zooms in */
section div[style*="height: clamp"]{animation:ama-clip linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
section div[style*="height: clamp"] img{animation:ama-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
/* hero: wordmark drifts away, symbol turns as you scroll past */
section[aria-label="แนะนำ"] h1{animation:ama-away linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
section[aria-label="แนะนำ"] svg[role="img"]{animation:ama-turn linear both;animation-timeline:view();animation-range:cover 50% cover 100%}
}
}

/* ---------- floating LINE / call buttons ---------- */
.ama-float{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:10px}
.ama-float-btn{width:58px;height:58px;border-radius:50%;background:#0A0A0A;border:2px solid #F2C641;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#FFFFFF;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em}
.ama-float-btn:hover{color:#F2C641}
/* ---------- menu hides on scroll down ---------- */
header[style*="position: sticky"]{transition:transform .35s ease,opacity .35s ease}
header[data-hidden="true"]{transform:translateY(-160%);opacity:0}
/* ---------- tilt cards ---------- */
[data-tilt]{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{box-shadow:0 24px 48px rgba(10,10,10,.14)}
/* ---------- logo marquee: two rows moving in opposite directions ---------- */
.ama-marquee{overflow:hidden;border-top:1px solid #D6D3CD;border-bottom:1px solid #D6D3CD}
.ama-marquee + .ama-marquee{border-top:0}
.ama-marquee-track{display:flex;width:max-content}
.ama-marquee-track > div{width:180px;flex:none;border-right:1px solid #D6D3CD}
/* ---------- reading progress (article) ---------- */
.ama-progress{display:none}
/* ---------- custom cursor (mouse only) ---------- */
.ama-cursor{display:none}
/* ---------- page curtain ---------- */
.ama-curtain{display:none}
/* ---------- numbers that count up ---------- */
@property --ama-n{syntax:'<integer>';inherits:false;initial-value:0}
@keyframes ama-count{from{--ama-n:0}to{--ama-n:var(--ama-to)}}
@media (prefers-reduced-motion: no-preference){
.ama-marquee-track{animation:ama-mq 70s linear infinite}
.ama-marquee.is-reverse .ama-marquee-track{animation-direction:reverse}
.ama-marquee:hover .ama-marquee-track{animation-play-state:paused}
@keyframes ama-mq{to{transform:translateX(-50%)}}
.ama-curtain{display:flex;position:fixed;inset:0;z-index:150;background:#0A0A0A;align-items:center;justify-content:center;pointer-events:none;animation:ama-curtain .9s cubic-bezier(.7,0,.2,1) .15s both}
@keyframes ama-curtain{from{transform:none}to{transform:translateY(-100%)}}
@media (pointer: fine){
.ama-cursor{display:flex;position:fixed;left:0;top:0;z-index:200;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFFFFF;mix-blend-mode:difference;pointer-events:none;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:transparent;transition:width .25s ease,height .25s ease,margin .25s ease,background-color .25s ease,opacity .2s}
.ama-cursor[data-state="view"]{width:92px;height:92px;margin:-46px 0 0 -46px;background:#F2C641;mix-blend-mode:normal;color:#0A0A0A}
.ama-cursor[data-state="off"]{opacity:0}
}
@supports (animation-timeline: scroll()){
.ama-float{animation:ama-float-in linear both;animation-timeline:scroll(root);animation-range:0 520px}
@keyframes ama-float-in{from{opacity:0;transform:translateY(24px);visibility:hidden}to{opacity:1;transform:none;visibility:visible}}
.ama-progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:#F2C641;transform-origin:left;animation:ama-read linear both;animation-timeline:scroll(root)}
@keyframes ama-read{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* a big line of type slides sideways as the page scrolls */
.ama-band p{animation:ama-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes ama-band{from{transform:translateX(4%)}to{transform:translateX(-38%)}}
.ama-count{position:relative;display:inline-block;color:transparent !important}
.ama-count::after{content:counter(ama-c);counter-reset:ama-c var(--ama-n);position:absolute;left:0;top:0;color:var(--ama-c,#0A0A0A);animation:ama-count linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}
}