/* (A) 웹폰트 로드: 모든 기기가 동일한 CJK 폰트를 쓰도록 강제.
   미로드 시 아이폰은 Hiragino로 폴백 → 상단 잘림 + 가짜볼드가 발생했음. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root{--gh:78px;--g-black:#050505;--g-white:#fff;--g-line:rgba(0,0,0,.11);--g-muted:#777;--g-pink:#ff1f6d;--g-blue:#1b6dff;--g-lime:#d8ff3e;--g-purple:#4c2cff;}

/* (B) 실기기(iOS 등) CJK 폴백 폰트 차이로 인한 상단 잘림 / 가짜볼드 방지 =====
   - 폰트 스택에 Noto(JP/KR)와 시스템 CJK 폰트를 명시해 렌더 폰트를 통일
   - 자동 텍스트 확대 차단
   - .section-title: line-height ≥1.0(잘림 방지), weight 900 고정(Noto 최대치 = faux-bold 차단), line-break로 일본어 줄바꿈 정돈 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:Arial,"Helvetica Neue",Helvetica,"Noto Sans JP","Noto Sans KR","Hiragino Sans","Apple SD Gothic Neo",sans-serif;}
/* Japanese typography (default lang=ja): kinsoku (禁則) + natural phrase wrapping */
body:not(.lang-ko){line-break:strict;word-break:normal;overflow-wrap:break-word;}
body:not(.lang-ko) :is(
  .hero-copy,.hero-lead,.section-lead,.section-head p,.statement-copy,.statement-sub,
  .matrix-text,.work-desc,.triad-text,.model-text,.map-item p,.member-desc,.flow-text,
  .intro,.feature-text,.pain-text,.journey-text,.plan-desc,.sales-desc,.domain-desc,
  .panel-copy,.cat-text,.submit-note,.form-head p,.info-row span,.next-block p,
  .arch-text,.metric-desc,.case-text,.domain-text,.offer-text,.partner-text,
  .work-detail,.intro-copy,.works-intro p,.section-title p,.flow-text,.plan-text,.sales-text,
  .section-desc,.cta-copy,.contact-text,.work-copy,.work-sub,.case-text,.history-text,.person-desc,
  .offer-text,.cta-text
){line-break:strict;word-break:normal;overflow-wrap:break-word;}
/* Brand / product names — prevent awkward mid-name line breaks */
.nobr{white-space:nowrap;}
/* Intentional Japanese phrase breaks: narrow = auto-wrap, wide = 文節単位.
   CSS media query + site.js matchMedia keep line breaks in sync on live resize. */
.ja-br{display:none;}
@media(min-width:680px){.ja-br{display:inline;}}
body.ja-br-on .ja-br{display:inline;}
body.ja-br-off .ja-br{display:none !important;}
/* (B-2) 전 페이지 타이틀 안전장치: 웹폰트 미로드/스왑 순간에도 한자 상단 잘림·가짜볼드 방지.
   - line-height 1.02: CJK 줄 겹침/잘림 방지 (최소값 → 데스크톱 영향 최소)
   - font-weight 900: Noto 최대 굵기 = 데스크톱 변화 없음(950→이미 900 렌더), 아이폰 faux-bold 차단
   - 장식용 워터마크 의사요소(.city-panel::after, .metric-big::before 등)는 의도적으로 제외 */
.section-title,.page-title,.hero-title,.statement-title,.cta-title,.contact-title,
.partner-title,.brand-name,.person-name,.triad-title,.matrix-title,.domain-title,
.model-title,.map-item h3,.jn-item h3,.history-year,.flow-title,.offer-title,
.business-title,.work-name,.intro-big,.arch-title,.journey-title,.feature-title,
.metric-title,.metric-num,.pain-title,.sales-title,.plan-name,.case-title h2,
.case-item h3,.next-block h2,.process-card h3{
  line-height:1.02;
  font-weight:900;
  line-break:strict;
}
.global-header{position:fixed;top:0;left:0;width:100%;height:var(--gh);z-index:9999;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,6vw,120px);background:rgba(255,255,255,.84);border-bottom:1px solid rgba(0,0,0,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .32s ease,background .28s ease,box-shadow .28s ease;}
.global-header.is-scrolled{background:rgba(255,255,255,.92);box-shadow:0 20px 70px rgba(0,0,0,.07)}
.global-header.is-hidden{transform:translateY(-102%)}
.global-brand{display:flex;align-items:center;gap:14px;min-width:210px;font-size:12px;font-weight:950;letter-spacing:.02em;text-transform:uppercase;}
.global-brand img{width:112px;height:auto;display:block;transition:transform .28s ease,filter .28s ease;}
.global-brand:hover img{transform:rotate(-2deg) scale(1.06);filter:drop-shadow(0 10px 22px rgba(255,31,109,.22))}
.global-nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,24px);font-size:12px;font-weight:950;letter-spacing:.02em;}
.global-nav a{position:relative;padding:9px 0;white-space:nowrap;}
.global-nav a:before{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:linear-gradient(90deg,#ff1f6d,#ff6a00,#ffd028,#4cd964,#00d5ff,#4c2cff,#ff1f6d);background-size:300% 100%;background-repeat:repeat-x;transform:translateX(-50%);transition:width .28s ease;animation:navStripe 3.2s linear infinite;}
.global-nav a:hover:before,.global-nav a.current:before{width:100%;}
.global-nav a.fx-link:after{display:none;}
@keyframes navStripe{from{background-position:0 0}to{background-position:-300% 0}}
.global-nav a.current{color:var(--g-pink)}
.global-lang{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:950;border-left:1px solid rgba(0,0,0,.16);padding-left:18px;}
.global-lang button{appearance:none;border:0;background:transparent;color:#777;cursor:pointer;font:inherit;padding:4px 1px;}
.global-lang button.active{color:#050505;}
.global-menu{display:none;appearance:none;border:2px solid #050505;background:#050505;color:#fff;border-radius:0;padding:8px 12px;font-size:11px;font-weight:950;letter-spacing:.06em;}
body.has-global-header main:first-of-type{scroll-margin-top:var(--gh)}
body.has-global-header:not(.home-body) main.page{padding-top:var(--gh)}
body.has-global-header .works-page{padding-top:var(--gh)}
body.has-global-header .site-footer{display:none!important}
body.has-global-header .global-footer{display:block!important}
.global-footer{background:#2e2e2e;color:#fff;padding:58px clamp(28px,6vw,120px) 42px;position:relative;overflow:hidden;}
.global-footer:before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,31,109,.22),transparent 68%)}
.global-footer-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr .8fr .85fr;gap:36px;max-width:1540px;margin:0 auto;}
.global-footer-brand img{width:118px;filter:brightness(0) invert(1)}
.global-footer-brand p{margin-top:28px;max-width:400px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.72);font-weight:700;}
.footer-head{font-size:12px;font-weight:950;letter-spacing:.06em;color:rgba(255,255,255,.48);text-transform:uppercase;margin-bottom:18px;}
.footer-links{display:grid;gap:9px;font-size:13px;font-weight:850;color:rgba(255,255,255,.82)}
.footer-links a,.footer-company a{transition:color .2s ease,transform .2s ease;display:inline-block}.footer-links a:hover,.footer-company a:hover{color:#fff;transform:translateX(4px)}
.footer-company{display:grid;gap:9px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.78);font-weight:700}.footer-company a{color:rgba(255,255,255,.88)}
.global-footer-bottom{position:relative;max-width:1540px;margin:62px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:24px;color:rgba(255,255,255,.48);font-size:11px;font-weight:800}
.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:9998;background:radial-gradient(circle,rgba(255,31,109,.18),rgba(27,109,255,.10) 36%,transparent 68%);transform:translate(-50%,-50%);mix-blend-mode:multiply;opacity:0;transition:opacity .22s ease;}
body:hover .cursor-glow{opacity:1}.is-reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),filter .85s ease;will-change:transform,opacity,filter}.is-reveal.is-visible{opacity:1;transform:none;filter:blur(0)}
.fx-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;will-change:transform}.fx-card:hover{transform:translateY(-8px);box-shadow:0 28px 70px rgba(0,0,0,.12);border-color:rgba(255,31,109,.42)!important}.fx-link{position:relative;overflow:hidden}.fx-link:after{content:"";position:absolute;inset:auto auto 0 0;width:0;height:2px;background:linear-gradient(90deg,var(--g-pink),var(--g-blue));transition:width .25s ease}.fx-link:hover:after{width:100%}
body.lang-ko{word-break:keep-all}body.lang-ko .hero-title,body.lang-ko .works-title,body.lang-ko .title{letter-spacing:-.07em}
@media(max-width:1180px){.global-nav{position:fixed;left:18px;right:18px;top:calc(var(--gh) + 10px);display:none;grid-template-columns:1fr;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.1);box-shadow:0 28px 70px rgba(0,0,0,.12);padding:18px}.global-header.menu-open .global-nav{display:grid}.global-menu{display:inline-flex}.global-brand{min-width:auto}.global-lang{margin-left:auto}.global-header{gap:14px}}
@media(max-width:760px){:root{--gh:72px}.global-header{padding:0 20px}.global-brand span{display:none}.global-brand img{width:102px}.global-footer-grid{grid-template-columns:1fr}.global-footer-bottom{flex-direction:column}.cursor-glow{display:none}body.has-global-header .works-page{padding-top:var(--gh)}}

/* ===== Mobile menu: full-screen overlay with hamburger morph + staggered link reveal ===== */
@media (max-width:760px){
  /* Hamburger button: hide MENU text, draw two lines that morph into an X when open */
  .global-menu{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;color:#050505;font-size:0;letter-spacing:0;z-index:10001;cursor:pointer}
  .global-menu::before,.global-menu::after{content:"";position:absolute;left:10px;right:10px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .4s cubic-bezier(.7,0,.25,1),top .35s ease,background .25s ease}
  .global-menu::before{top:16px}
  .global-menu::after{top:26px}
  .global-header.menu-open .global-menu::before{top:21px;transform:rotate(45deg)}
  .global-header.menu-open .global-menu::after{top:21px;transform:rotate(-45deg)}

  /* Override the 1180px dropdown styling: full-viewport overlay with dark gradient */
  .global-nav{position:fixed;inset:0;left:0;right:0;top:0;bottom:0;width:100vw;height:100vh;height:100dvh;padding:calc(var(--gh) + 40px) 28px 120px;background:radial-gradient(circle at 18% 12%,rgba(255,31,109,.32),transparent 38vw),radial-gradient(circle at 88% 88%,rgba(90,50,255,.34),transparent 42vw),linear-gradient(135deg,#0a0a0a 0%,#160a24 55%,#1f0a30 100%);border:0;box-shadow:none;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;grid-template-columns:none;z-index:9998;transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.7,0,.25,1),opacity .35s ease,visibility 0s linear .45s;pointer-events:none;overflow:hidden auto;-webkit-overflow-scrolling:touch}
  .global-header.menu-open .global-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease,visibility 0s linear 0s}

  /* Decorative orbs animated subtly so the bg breathes */
  .global-nav::before,.global-nav::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:0;pointer-events:none;transition:opacity .8s ease .15s,transform 1.2s ease}
  .global-nav::before{width:320px;height:320px;background:#ff1f6d;top:-90px;right:-90px}
  .global-nav::after{width:280px;height:280px;background:#5a32ff;bottom:-60px;left:-80px}
  .global-header.menu-open .global-nav::before{opacity:.55;transform:translate(-20px,30px)}
  .global-header.menu-open .global-nav::after{opacity:.5;transform:translate(30px,-25px)}

  /* Big nav links, staggered slide-in */
  .global-nav a{color:#fff;font-size:clamp(30px,8.4vw,46px);font-weight:950;letter-spacing:-.04em;padding:10px 0;width:100%;position:relative;z-index:1;opacity:0;transform:translateX(36px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1),color .25s ease}
  .global-nav a::before{height:3px;left:0;transform:none;bottom:8px}
  .global-nav a.current{color:#ff1f6d}
  .global-nav a.current::before{width:48px}
  .global-header.menu-open .global-nav a{opacity:1;transform:none}
  .global-header.menu-open .global-nav a:nth-child(1){transition-delay:.18s,.18s,0s}
  .global-header.menu-open .global-nav a:nth-child(2){transition-delay:.25s,.25s,0s}
  .global-header.menu-open .global-nav a:nth-child(3){transition-delay:.32s,.32s,0s}
  .global-header.menu-open .global-nav a:nth-child(4){transition-delay:.39s,.39s,0s}
  .global-header.menu-open .global-nav a:nth-child(5){transition-delay:.46s,.46s,0s}
  .global-header.menu-open .global-nav a:nth-child(6){transition-delay:.53s,.53s,0s}
  .global-header.menu-open .global-nav a:nth-child(7){transition-delay:.60s,.60s,0s}

  /* Lock body scroll while menu is open */
  body.menu-locked{overflow:hidden;touch-action:none}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.is-reveal{opacity:1!important;transform:none!important;filter:none!important}.cursor-glow{display:none!important}.fx-shine:before,.fx-shine:after{display:none!important}}

/* ===== Fancy effects: page transition, scroll progress, shining text, magnetic buttons ===== */

/* Page transition - opacity-only. Do NOT animate transform on <body>: a transformed
   ancestor creates a containing block for position:fixed descendants, which would
   cause the fixed header to scroll with the page. */
body{animation:fxPageIn .55s ease both}
@keyframes fxPageIn{from{opacity:0}to{opacity:1}}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--g-pink),var(--g-purple),var(--g-blue));z-index:10000;pointer-events:none;transition:width .12s linear;box-shadow:0 0 14px rgba(255,31,109,.55)}

/* Shining gradient sweep on big titles */
.fx-shine,.fx-shine-light{position:relative;background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:fxShine 7s linear infinite;will-change:background-position;padding-bottom:.16em}
.fx-shine{background-image:linear-gradient(110deg,#0a0a0a 0%,#0a0a0a 35%,#ff1f6d 45%,#4c2cff 55%,#0a0a0a 65%,#0a0a0a 100%)}
.fx-shine-light{background-image:linear-gradient(110deg,#ffffff 0%,#ffffff 35%,#ff1f6d 45%,#d8ff3e 55%,#ffffff 65%,#ffffff 100%)}
@keyframes fxShine{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Soft glow when reveal becomes visible. Bloom on first-visible only (animation fires when ancestor section enters viewport). */
.fx-title-bloom{opacity:0;filter:blur(10px);transform:translateY(28px) scale(.99);transition:none}
.is-reveal.is-visible .fx-title-bloom{animation:fxBloom 1.3s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes fxBloom{0%{opacity:0;filter:blur(14px);transform:translateY(36px) scale(.97)}60%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}100%{opacity:1;filter:drop-shadow(0 0 0 rgba(255,31,109,0));transform:none}}
/* Hero titles - bloom on page load (not part of is-reveal cycle) */
.hero .fx-title-bloom,.hero-topline ~ * .fx-title-bloom,.page-hero .fx-title-bloom,.works-hero .fx-title-bloom,.statement .fx-title-bloom{animation:fxBloom 1.4s cubic-bezier(.2,.8,.2,1) .2s both}

/* Stronger reveal up */
.is-reveal{transition:opacity 1.05s cubic-bezier(.2,.8,.2,1),transform 1.05s cubic-bezier(.2,.8,.2,1),filter 1.05s ease}
.is-reveal.fx-from-left{transform:translateX(-60px) scale(.98)}
.is-reveal.fx-from-left.is-visible{transform:none}
.is-reveal.fx-from-right{transform:translateX(60px) scale(.98)}
.is-reveal.fx-from-right.is-visible{transform:none}

/* Magnetic / pop button effect */
.btn,.tiny-button,.next-button,.visit-link,.send-btn{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,letter-spacing .35s ease}
.btn:hover,.tiny-button:hover,.next-button:hover,.visit-link:hover,.send-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.18);letter-spacing:.08em}
.btn:before,.tiny-button:before,.next-button:before,.visit-link:before,.send-btn:before{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-22deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .25s ease;pointer-events:none}
.btn:hover:before,.tiny-button:hover:before,.next-button:hover:before,.visit-link:hover:before,.send-btn:hover:before{opacity:1;transform:translateX(450%) skewX(-22deg)}

/* Parallax-y hero title */
.hero-title,.page-title,.works-title,.title,.statement-title,.contact-title,.cta-title{will-change:transform}

/* Subtle floating circle / dot pulse */
@keyframes fxPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.eyebrow:before,.top-label .mark:before,.page-mark:before{animation:fxPulse 2.4s ease-in-out infinite}

/* Marquee/ticker speed boost on hover */
.ticker:hover .ticker-track{animation-duration:18s}

/* Section underline reveal */
.section-title,.partner-title,.contact-title,.cta-title,.statement-title,.metric-title,.title,.works-title{display:inline-block;position:relative}

/* Image cards lift + shine */
.work-visual:after,.case-item h3,.flow-title{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.work-card:hover .work-visual:after{transform:translateY(-4px)}

/* Smooth scroll-driven scale */
[data-fx-scroll]{transform:translateY(var(--fx-shift,0)) scale(var(--fx-scale,1));transition:transform .12s linear;will-change:transform}

/* Number / kicker pop on visible */
.is-reveal.is-visible .matrix-num,.is-reveal.is-visible .business-no,.is-reveal.is-visible .flow-num,.is-reveal.is-visible .domain-num,.is-reveal.is-visible .work-category,.is-reveal.is-visible .section-kicker{animation:fxKick .7s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes fxKick{0%{opacity:0;letter-spacing:.4em}60%{opacity:1;letter-spacing:.04em}100%{letter-spacing:.06em}}

/* Hover blur lift on cards on big screens */
@media (hover:hover){.fx-card{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1),border-color .55s ease,background .55s ease}}

/* Slight chromatic / text shadow glow on heroes */
.hero-title .accent,.title em,.page-title .mark{filter:drop-shadow(0 0 0 rgba(255,31,109,0));transition:filter .8s ease}
.is-visible .hero-title .accent,.is-visible .title em,.is-visible .page-title .mark{filter:drop-shadow(0 8px 24px rgba(255,31,109,.32)) drop-shadow(0 0 14px rgba(76,44,255,.22))}

/* Smooth anchor scroll */
html{scroll-behavior:smooth}

/* ===== Richer rainbow sweep on big titles ===== */
.fx-shine{background-image:linear-gradient(110deg,#0a0a0a 0%,#0a0a0a 30%,#ff1f6d 38%,#ff6a00 44%,#ffd028 50%,#4cd964 56%,#1b6dff 62%,#5a32ff 68%,#0a0a0a 78%,#0a0a0a 100%);background-size:240% 100%;animation:fxShine 6.5s linear infinite}
.fx-shine-light{background-image:linear-gradient(110deg,#ffffff 0%,#ffffff 30%,#ff1f6d 38%,#ff6a00 44%,#ffd028 50%,#4cd964 56%,#00d5ff 62%,#5a32ff 68%,#ffffff 78%,#ffffff 100%);background-size:240% 100%;animation:fxShine 6.5s linear infinite}

/* ===== Per-character rise-up reveal + continuous wave for hero-level titles ===== */
.split-char{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(8px);will-change:opacity,transform,filter;animation:fxCharFallback .6s 2s ease-out forwards}
/* Rise-in (one-shot) plays first, then the gentle wave keeps drifting forever. */
.chars-in .split-char{animation:fxCharRise .85s cubic-bezier(.2,.8,.2,1) both, fxCharWave 4s ease-in-out infinite;animation-delay:calc(var(--ci,0) * 22ms), calc(var(--ci,0) * 60ms + 1.1s)}
@keyframes fxCharRise{from{opacity:0;transform:translateY(.6em) rotate(2.5deg);filter:blur(8px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fxCharFallback{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fxCharWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){.split-char{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}}

/* ===== Safety net: if JS / IntersectionObserver doesn't fire is-visible, reveal anyway after 2s ===== */
.is-reveal:not(.is-visible){animation:fxRevealFallback .8s 2s ease-out forwards}
@keyframes fxRevealFallback{to{opacity:1;transform:none;filter:blur(0)}}

/* ===== Wipe reveal: a solid block covers the element, then slides out to the LEFT exposing content ===== */
/* Usage: add class="fx-wipe" (default purple). Variants: fx-wipe-dark, fx-wipe-pink, fx-wipe-lime, fx-wipe-blue. */
/* Optional: data-fx-wipe-delay="200" to add ms delay before the sweep starts. */
.fx-wipe{position:relative;display:inline-block;overflow:hidden;vertical-align:baseline;--fx-wipe-color:#7E15F5;--fx-wipe-dur:.9s;--fx-wipe-delay:0s}
.fx-wipe.fx-wipe-block{display:block}
.fx-wipe.fx-wipe-dark{--fx-wipe-color:#0a0a0a}
.fx-wipe.fx-wipe-pink{--fx-wipe-color:#ff1f6d}
.fx-wipe.fx-wipe-lime{--fx-wipe-color:#d8ff3e}
.fx-wipe.fx-wipe-blue{--fx-wipe-color:#1b6dff}
.fx-wipe::before{content:"";position:absolute;inset:0;background:var(--fx-wipe-color);transform:translateX(0);z-index:5;pointer-events:none;will-change:transform}
/* When .fx-wipe also has .is-reveal, nullify the default fade/translate/blur so the wipe is the sole effect */
.is-reveal.fx-wipe{opacity:1!important;transform:none!important;filter:none!important;transition:none}
/* Trigger: when .is-visible is added (by the existing IntersectionObserver), block slides out to the left */
.is-reveal.fx-wipe.is-visible::before{animation:fxWipeOut var(--fx-wipe-dur) cubic-bezier(.7,0,.25,1) var(--fx-wipe-delay) forwards}
@keyframes fxWipeOut{0%{transform:translateX(0)}100%{transform:translateX(-101%)}}
/* Override the safety-net fallback for .fx-wipe so the block doesn't auto-slide before the IO triggers */
.is-reveal.fx-wipe:not(.is-visible){animation:none}
.is-reveal.fx-wipe:not(.is-visible)::before{animation:fxWipeOutFallback .9s 2.2s cubic-bezier(.7,0,.25,1) forwards}
@keyframes fxWipeOutFallback{to{transform:translateX(-101%)}}
@media (prefers-reduced-motion: reduce){
  .fx-wipe::before{display:none}
  .is-reveal.fx-wipe.is-visible::before,.is-reveal.fx-wipe:not(.is-visible)::before{animation:none}
}

/* ===== Mobile: amp up scroll-reveal so sections feel as alive as the PC view ===== */
/* PC has cursor-glow, large bg orbs, hover-driven card lift. Mobile loses all of those, so we compensate by:
   (1) longer travel + stronger blur on the base reveal,
   (2) alternating left/right slide for cards in a grid,
   (3) bigger stagger between cards (overrides the JS-set inline transition-delay). */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference){
  .is-reveal:not(.fx-wipe){transform:translateY(58px) scale(.94);filter:blur(12px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s ease}
  .is-reveal.is-visible:not(.fx-wipe){transform:none;filter:blur(0)}

  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(odd){transform:translate(-54px,30px) scale(.94)}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(even){transform:translate(54px,30px) scale(.94)}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal.is-visible{transform:none}

  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(1){transition-delay:0ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(2){transition-delay:140ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(3){transition-delay:260ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(4){transition-delay:360ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(5){transition-delay:440ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(6){transition-delay:500ms!important}
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.plan-row,.journey-step,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card,.flow-step,.model-step).is-reveal:nth-of-type(n+7){transition-delay:540ms!important}

  /* Soft glow ring around cards once they land — replaces the PC hover-lift cue */
  :is(.preview-card,.domain-card,.triad-card,.business-card,.work-card,.case-card,.member-card,.scope-card,.contact-card,.info-card,.feature-card,.metric-card,.process-card,.offer-card,.model-card,.logo-card,.matrix-card,.overview-card,.pain-card,.person-card,.phone-card,.sales-card,.tcg-card).is-reveal.is-visible{box-shadow:0 18px 44px rgba(0,0,0,.10),0 0 0 1px rgba(255,31,109,.10);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s ease,box-shadow .9s ease .25s}
}