@charset "utf-8";

/* ============================================================
   INTRO
   z0  .intro-forest
   z1  .intro-screen::after
   z3  .intro-screen::before
   z4  .intro-brand
   z12 .intro-story
   z14 .intro-cursor-label
   ============================================================ */

* {box-sizing:border-box}
html, body {height:100%;margin:0}
body.intro-page {
    overflow:hidden;
    background:#051715;
    color:#fff;
    font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
}

.intro-screen {
    --brand-blue:#004655;
    --brand-green:#8ec43e;
    --brand-soft:#f4f8f1;
    --story-veil:#061513;
    --forest-scene:url("../img/intro/forest-intro.jpg");
    --morph-w:min(94vw,1080px);
    --morph-h:clamp(128px,20vh,220px);
    --morph-y:0px;
    --morph-gap:clamp(240px,34vw,400px);
    --morph-pill-h:clamp(72px,8.5vw,104px);
    --morph-radius:calc(var(--morph-h) / 2);
    --intro-title-size:clamp(1.55rem,4vw,3.35rem);
    --intro-caption-size:clamp(0.875rem,1.35vw,1.1rem);
    --intro-micro-size:clamp(0.75rem,1.05vw,0.9rem);
    --ease-soft:cubic-bezier(0.22,1,0.36,1);
    --ease-flow:cubic-bezier(0.16,1,0.3,1);
    --title-rise:clamp(72px,14vh,148px);
    --ending-start:0.15s;
    position:fixed;inset:0;overflow:hidden;
    background:var(--story-veil);cursor:pointer;
    transition:background 1.1s ease;
}
.intro-screen.is-ready {
    background:#051715;
    transition:background 0.5s ease;
}
.intro-screen.is-forest {
    background:#051715;
    transition:background 0.9s ease;
}
.intro-screen.is-ready::after {
    opacity:0.72;
    transition:opacity 1.4s ease;
}
.intro-screen.is-ready::before {
    opacity:0.56;
    transition:opacity 1.45s ease;
}
.intro-screen.is-leaving {
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity 0.68s ease, visibility 0s linear 0.68s;
}

.intro-screen::after {
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    opacity:0;transition:opacity 1.4s ease;
    background:
        linear-gradient(115deg, rgba(3,17,17,0.58) 0%, rgba(0,50,43,0.22) 38%, rgba(2,14,14,0.62) 100%),
        linear-gradient(180deg, rgba(2,14,12,0.04) 0%, rgba(3,12,11,0.42) 100%);
}

.intro-screen::before {
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
    background:radial-gradient(circle at 50% 47%, transparent 0%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.24) 72%, rgba(0,0,0,0.54) 100%);
    transition:opacity 1.45s ease;
}
.intro-screen.is-forest::after {opacity:0.48}
.intro-screen.is-forest::before {opacity:0.18}
/* 마지막 숲 컷: is-ready 오버레이 점프 방지 */
.intro-screen.is-forest.is-ready::after,
.intro-screen.is-forest.is-logo-intro::after,
.intro-screen.is-forest.is-typography::after,
.intro-screen.is-forest.is-logo::after {opacity:0.48}
.intro-screen.is-forest.is-ready::before,
.intro-screen.is-forest.is-logo-intro::before,
.intro-screen.is-forest.is-typography::before,
.intro-screen.is-forest.is-logo::before {opacity:0.18}

/* ── 숲 배경 (마지막 장면) ── */
.intro-forest {
    position:absolute;inset:-6vw;z-index:0;pointer-events:none;
    background:var(--forest-scene) center / cover no-repeat;
    filter:brightness(0.42) saturate(0.82) contrast(1.08) blur(8px);
    opacity:0;transform:translate3d(0,0,0) scale(0.9);
    transform-origin:center center;
    backface-visibility:hidden;
    will-change:opacity, transform, filter;
    transition:
        opacity 1.35s ease,
        transform 11.2s cubic-bezier(0.16,1,0.3,1),
        filter 2.2s ease;
}
.intro-screen.is-forest .intro-forest {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.025);
    filter:brightness(1.16) saturate(1.04) contrast(0.98) blur(0);
}
.intro-screen.is-forest.is-ready .intro-forest,
.intro-screen.is-forest.is-logo-intro .intro-forest,
.intro-screen.is-forest.is-typography .intro-forest,
.intro-screen.is-forest.is-logo .intro-forest {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.025);
    filter:brightness(1.16) saturate(1.04) contrast(0.98) blur(0);
    transition:transform 11.2s cubic-bezier(0.16,1,0.3,1), filter 2.2s ease;
}
.intro-screen.is-ready .intro-forest {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.025);
    filter:brightness(1.16) saturate(1.04) contrast(0.98) blur(0);
    transition:transform 11.2s cubic-bezier(0.16,1,0.3,1), filter 2.2s ease;
}

/* ── 스토리: 가운데 하나의 도형 + 텍스트 ── */
.intro-story {
    position:absolute;inset:0;z-index:12;pointer-events:none;
    opacity:0;visibility:hidden;
    transition:opacity 0.9s ease, visibility 0s linear 0.9s;
}
.intro-screen.is-story .intro-story {
    opacity:1;visibility:visible;
    transition:opacity 0.42s ease, visibility 0s;
}
.intro-screen.is-story {
    --morph-y:clamp(-8px,-0.8vh,0px);
}

.intro-screen.is-forest .intro-story__veil {
    opacity:0;
    transition:opacity 1.1s ease;
}
.intro-screen.is-ready .intro-story {
    opacity:1;visibility:visible;
    transition:opacity 0.5s ease, visibility 0s;
}
.intro-screen.is-forest.is-ready .intro-story,
.intro-screen.is-forest.is-logo-intro .intro-story,
.intro-screen.is-forest.is-typography .intro-story,
.intro-screen.is-forest.is-logo .intro-story {
    opacity:1;visibility:visible;
    transition:opacity 0.5s ease, visibility 0s;
}
.intro-screen.is-typography .intro-story,
.intro-screen.is-logo .intro-story {
    opacity:1;visibility:visible;
}

.intro-story__veil {
    position:absolute;inset:0;
    background:var(--story-veil);
    transition:opacity 1.4s ease;
}

.intro-story__stage {
    position:relative;z-index:1;
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(24px,6vw,72px);
}

/* 텍스트 타이포 무대 — 시각 박스 없이 정중앙 고정 */
.intro-morph {
    position:absolute;left:50%;top:50%;z-index:2;
    width:var(--morph-w);height:var(--morph-h);
    border-radius:var(--morph-radius);
    overflow:visible;
    background:transparent;
    transform:translate3d(-50%,calc(-50% + var(--morph-y)),0);
    transform-origin:center center;
    pointer-events:none;
    transition:opacity 0.45s ease, transform 1.18s var(--ease-flow);
}
.intro-screen.is-box-1 .intro-morph,
.intro-screen.is-box-2 .intro-morph,
.intro-screen.is-box-3 .intro-morph {
    background:transparent;
}

/* 텍스트 — 배경 없는 타이포그래피 */
.intro-morph__copy {
    position:absolute;inset:0;z-index:3;
    display:flex;align-items:center;justify-content:center;
    padding:0;
    pointer-events:none;
    overflow:visible;
    opacity:1;
    transition:opacity 0.35s ease;
}

.intro-copy__pair {
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(0.12em,0.85vw,0.32em);
    opacity:0;
    transform:translate3d(0,26px,0) scale(0.99);
    filter:blur(6px);
    transition:
        opacity 1.18s ease,
        transform 1.34s cubic-bezier(0.16,1,0.3,1),
        filter 1.18s ease;
    will-change:opacity, transform, filter;
}

.intro-copy__word {
    color:#fff;
    font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:var(--intro-title-size);
    font-weight:400;line-height:1.06;
    letter-spacing:-0.045em;
    white-space:nowrap;
    text-shadow:0 8px 28px rgba(0,0,0,0.38);
}
.intro-copy__word:first-child {
    color:#e8f5d6;
    font-weight:300;
}
.intro-copy__pair--2 .intro-copy__word {
    font-weight:400;
    letter-spacing:-0.045em;
}
.intro-copy__pair--3 .intro-copy__word,
.intro-project .intro-copy__word {
    letter-spacing:-0.04em;
}
/* ── 도형·텍스트 단계 ── */

/* 1. 「숲과 바람이 머무는」 */
.intro-screen.is-box-1 .intro-copy__pair--1 {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
}

/* 2. 「숲의 여유와 도시의 가치」 */
.intro-screen.is-box-2 .intro-copy__pair--1 {
    opacity:0;
    transform:translate3d(0,-24px,0) scale(1.006);
    filter:blur(5px);
    transition-duration:0.86s;
}
.intro-screen.is-box-2 .intro-copy__pair--2 {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
}

/* 3. 「오창 트리뷰」 */
.intro-screen.is-box-3 .intro-copy__pair--2 {
    opacity:0;
    transform:translate3d(0,-24px,0) scale(1.006);
    filter:blur(5px);
    transition-duration:0.86s;
}
.intro-screen.is-box-3 .intro-copy__pair--3 {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
}

/* 엔딩: 타이틀은 페이드 없이 아래로만 이동 → 레이아웃 고정 */
.intro-screen.is-logo-intro:not(.is-title-docked) .intro-copy__pair--3 {
    opacity:1 !important;
    visibility:visible !important;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
    transition:none;
}
.intro-screen.is-logo-intro:not(.is-title-docked) .intro-project {
    visibility:visible;
    opacity:0;
}
.intro-screen.is-title-docking .intro-story {
    z-index:14;
}
.intro-screen.is-title-docking .intro-morph {
    transition:transform 1.05s var(--ease-flow);
    transform:translate3d(-50%,calc(-50% + var(--morph-y) + var(--title-dock-shift,0px)),0);
}
.intro-screen.is-title-dock-snap .intro-morph {
    transition:none;
}
.intro-screen.is-title-docked .intro-morph {
    transform:translate3d(-50%,calc(-50% + var(--morph-y) + var(--title-dock-shift,0px)),0);
    transition:none;
}
.intro-screen.is-title-docked .intro-morph__copy,
.intro-screen.is-title-docked .intro-copy__pair--3 {
    opacity:0 !important;
    visibility:hidden !important;
    transition:none !important;
}
.intro-screen.is-logo-intro .intro-logo-part {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
    transition:opacity 0.68s ease, transform 0.92s var(--ease-flow), filter 0.92s ease, fill 1s var(--ease-soft);
}
.intro-screen.is-logo-intro .logo-roof {
    transform:translate3d(0,0,0);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
    transition:
        opacity 0.52s ease,
        -webkit-clip-path 0.94s var(--ease-flow),
        clip-path 0.94s var(--ease-flow),
        fill 1s var(--ease-soft);
}
.intro-screen.is-logo-intro .intro-logo-part,
.intro-screen.is-logo-intro .logo-roof {
    transition-delay:var(--ending-start);
}
.intro-screen.is-logo-intro .logo-dot {transition-delay:calc(var(--ending-start) + 0.06s)}
.intro-screen.is-logo-intro .logo-stem {transition-delay:calc(var(--ending-start) + 0.16s)}
.intro-screen.is-logo-intro .logo-letter-a1 {transition-delay:calc(var(--ending-start) + 0.28s)}
.intro-screen.is-logo-intro .logo-letter-a2 {transition-delay:calc(var(--ending-start) + 0.4s)}
.intro-screen.is-logo-intro .logo-letter-n {transition-delay:calc(var(--ending-start) + 0.52s)}
.intro-screen.is-logo-intro .logo-roof {transition-delay:calc(var(--ending-start) + 0.66s)}
/* ── 브랜드 씬 ── */
.intro-brand {
    position:relative;z-index:4;
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;min-height:640px;
    padding:clamp(26px,3.7vw,58px);
    visibility:hidden;opacity:0;
    transition:opacity 0.7s var(--ease-soft), visibility 0s linear 0.7s;
}
.intro-screen.is-logo-intro .intro-brand,
.intro-screen.is-typography .intro-brand,
.intro-screen.is-logo .intro-brand {
    visibility:visible;
    opacity:1;
    transition:opacity 0.7s var(--ease-soft), visibility 0s;
}
.intro-screen.is-logo-intro.is-story:not(.is-typography) .intro-brand {
    opacity:1;visibility:visible;
}

.intro-screen.is-logo-intro:not(.is-typography) .intro-brand {
    z-index:13;
}

.intro-screen.is-logo-intro .intro-brand-core,
.intro-screen.is-typography .intro-brand-core,
.intro-screen.is-logo .intro-brand-core {
    position:relative;
    left:auto;top:auto;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:min(88vw,min(72vh,460px));
    aspect-ratio:1;
    height:auto;
    min-height:0;
    padding:clamp(28px,5vw,44px);
    gap:clamp(10px,1.8vh,16px);
    transition:transform 0.9s var(--ease-flow);
    pointer-events:none;
    text-align:center;
}

.intro-screen.is-logo-intro .intro-brand-core > :not(.intro-core-frame),
.intro-screen.is-typography .intro-brand-core > :not(.intro-core-frame),
.intro-screen.is-logo .intro-brand-core > :not(.intro-core-frame) {
    position:relative;
    left:auto;top:auto;bottom:auto;
    width:100%;
    transform:none;
}

.intro-screen.is-logo-intro .intro-kicker {
    display:block;
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    transition:opacity 0.75s var(--ease-soft) calc(var(--ending-start) + 0.22s), transform 0.85s var(--ease-flow) calc(var(--ending-start) + 0.22s);
}
.intro-screen.is-logo-intro .intro-slogan {
    display:block;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity 0.8s var(--ease-soft) calc(var(--ending-start) + 0.32s);
}
.intro-screen.is-logo-intro .intro-logo,
.intro-screen.is-typography .intro-logo,
.intro-screen.is-logo .intro-logo {
    flex-shrink:0;
    transform:none;
}
.intro-screen.is-logo-intro .intro-type-lockup,
.intro-screen.is-typography .intro-type-lockup,
.intro-screen.is-logo .intro-type-lockup {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(8px,1.2vh,12px);
    transform:none;
}

.intro-brand-core {
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:clamp(10px,1.8vh,16px);
    width:min(88vw,min(72vh,460px));
    aspect-ratio:1;
    height:auto;
    min-height:0;
    padding:clamp(28px,5vw,44px);
    margin:0 auto;text-align:center;
    box-sizing:border-box;
}
.intro-brand-core > :not(.intro-core-frame) {
    position:relative;z-index:1;
}

.intro-kicker {
    margin:0;
    max-width:100%;
    color:#c2e77a;
    font-family:'Pretendard','Montserrat','Noto Sans KR',sans-serif;
    font-size:var(--intro-micro-size);font-weight:500;line-height:1.35;
    letter-spacing:0.04em;
    opacity:0;visibility:hidden;
    transform:translateY(10px);
    transition:opacity 0.75s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.intro-logo {
    position:relative;display:flex;align-items:center;justify-content:center;
    margin:0;line-height:1;
    transform:translateY(0);
    filter:drop-shadow(0 18px 36px rgba(0,0,0,0.28));
    transition:none;
}
.intro-logo-svg {display:block;width:min(220px,62%);height:auto;overflow:visible}

.intro-logo-part {
    opacity:0;transform-box:fill-box;transform-origin:center;
    transform:translate3d(0,22px,0) scale(0.96);filter:blur(8px);
    transition:opacity 0.68s ease, transform 0.92s cubic-bezier(0.16,1,0.3,1), filter 0.92s ease, fill 0.75s ease;
}
.logo-blue {fill:#004655}
.logo-green {fill:#8ec43e}
.logo-dot {transition-delay:0.06s}
.logo-stem {transition-delay:0.16s}
.logo-letter-a1 {transition-delay:0.28s}
.logo-letter-a2 {transition-delay:0.4s}
.logo-letter-n {transition-delay:0.52s}
.logo-roof {
    transform:translate3d(0,0,0);transform-origin:left center;filter:blur(0);
    -webkit-clip-path:inset(0 100% 0 0);
    clip-path:inset(0 100% 0 0);
    transition:
        opacity 0.52s ease,
        -webkit-clip-path 0.94s cubic-bezier(0.16,1,0.3,1),
        clip-path 0.94s cubic-bezier(0.16,1,0.3,1),
        fill 0.75s ease;
    transition-delay:0.66s;
}

.intro-screen.is-logo-intro .intro-logo,
.intro-screen.is-typography .intro-logo,
.intro-screen.is-logo .intro-logo {
    transform:none;
}
.intro-screen.is-forest .intro-logo-part,
.intro-screen.is-story:not(.is-logo-intro) .intro-logo-part {
    fill:#fff;
}
/* 로고 등장: 브랜드 컬러 → 흰색 전환 */
.intro-screen.is-logo-intro:not(.is-logo-white) .logo-blue {
    fill:#004655;
}
.intro-screen.is-logo-intro:not(.is-logo-white) .logo-green,
.intro-screen.is-logo-intro:not(.is-logo-white) .logo-roof {
    fill:#8ec43e;
}
.intro-screen.is-logo-white .intro-logo-part,
.intro-screen.is-logo-white .logo-green,
.intro-screen.is-logo-white .logo-roof {
    fill:#fff;
}


.intro-type-lockup {
    position:relative;display:flex;flex-direction:column;align-items:center;
    gap:clamp(6px,0.9vh,10px);
    width:100%;margin:0;
}

.intro-project {
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:clamp(0.12em,0.85vw,0.32em);
    width:100%;
    margin:0;
    padding:0;
    opacity:0;
    visibility:hidden;
    transform:none;
    filter:none;
    transition:none;
}
.intro-screen.is-title-docked .intro-project,
.intro-screen.is-typography .intro-project,
.intro-screen.is-logo .intro-project {
    opacity:1;
    visibility:visible;
}


.intro-slogan {
    position:relative;z-index:1;
    margin:0;
    width:100%;
    max-width:100%;
    text-align:center;
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    color:rgba(255,255,255,0.82);
    font-size:var(--intro-caption-size);font-weight:300;line-height:1.55;
    letter-spacing:-0.02em;
    opacity:0;visibility:visible;
    transform:none;
    transition:opacity 0.8s ease;
}

.intro-core-frame {
    position:absolute;inset:0;z-index:0;pointer-events:none;
    opacity:0;
    transform:scale(0.96);
    transform-origin:center;
    will-change:opacity, transform;
    transition:opacity 0.72s ease, transform 1.05s cubic-bezier(0.16,1,0.3,1);
}
.intro-core-frame__line {
    position:absolute;display:block;
    background:rgba(217,241,190,0.74);
    box-shadow:0 0 18px rgba(217,241,190,0.16);
    opacity:0;
    will-change:opacity, transform, width, height;
    transition:
        opacity 0.58s ease,
        left 1.05s cubic-bezier(0.16,1,0.3,1),
        right 1.05s cubic-bezier(0.16,1,0.3,1),
        top 1.05s cubic-bezier(0.16,1,0.3,1),
        bottom 1.05s cubic-bezier(0.16,1,0.3,1),
        width 1.05s cubic-bezier(0.16,1,0.3,1),
        height 1.05s cubic-bezier(0.16,1,0.3,1),
        transform 1.05s cubic-bezier(0.16,1,0.3,1),
        background 0.72s ease,
        box-shadow 0.72s ease;
}
.intro-core-frame__line--top,
.intro-core-frame__line--bottom {
    left:0;width:100%;height:1px;
    transform:scaleX(0);
    transform-origin:center;
}
.intro-core-frame__line--top {top:0}
.intro-core-frame__line--bottom {bottom:0}
.intro-core-frame__line--left,
.intro-core-frame__line--right {
    top:0;width:1px;height:100%;
    transform:scaleY(0);
    transform-origin:center;
}
.intro-core-frame__line--left {left:0}
.intro-core-frame__line--right {right:0}

.intro-screen.is-logo-intro .intro-core-frame {
    opacity:1;
    transform:scale(1);
    transition:opacity 0.72s var(--ease-soft) var(--ending-start), transform 1.05s var(--ease-flow) var(--ending-start);
}
.intro-screen.is-logo-intro .intro-core-frame__line--top,
.intro-screen.is-logo-intro .intro-core-frame__line--bottom {
    opacity:0.82;
    transform:scaleX(1);
    background:rgba(255,255,255,0.58);
    box-shadow:0 0 22px rgba(255,255,255,0.14);
    transition:
        opacity 0.65s var(--ease-soft) var(--ending-start),
        transform 0.95s var(--ease-flow) var(--ending-start),
        background 0.72s ease var(--ending-start),
        box-shadow 0.72s ease var(--ending-start);
}
.intro-screen.is-logo-intro .intro-core-frame__line--left,
.intro-screen.is-logo-intro .intro-core-frame__line--right {
    opacity:0.82;
    transform:scaleY(1);
    background:rgba(255,255,255,0.58);
    box-shadow:0 0 22px rgba(255,255,255,0.14);
    transition:
        opacity 0.65s var(--ease-soft) calc(var(--ending-start) + 0.1s),
        transform 0.95s var(--ease-flow) calc(var(--ending-start) + 0.1s),
        background 0.72s ease calc(var(--ending-start) + 0.1s),
        box-shadow 0.72s ease calc(var(--ending-start) + 0.1s);
}
.intro-screen.is-typography .intro-core-frame {
    opacity:1;
    transform:scale(1);
    transition:opacity 0.7s ease;
}
.intro-screen.is-typography .intro-core-frame__line--top,
.intro-screen.is-typography .intro-core-frame__line--bottom {
    opacity:0.72;
    transform:scaleX(1);
    transition:
        opacity 0.65s ease,
        transform 0.95s cubic-bezier(0.16,1,0.3,1);
}
.intro-screen.is-typography .intro-core-frame__line--left,
.intro-screen.is-typography .intro-core-frame__line--right {
    opacity:0.72;
    transform:scaleY(1);
    transition:
        opacity 0.65s ease 0.12s,
        transform 0.95s cubic-bezier(0.16,1,0.3,1) 0.12s;
}

.intro-screen.is-logo .intro-core-frame {
    opacity:1;
    transform:scale(1);
}
.intro-screen.is-logo .intro-core-frame__line {
    opacity:0.82;
    background:rgba(255,255,255,0.58);
    box-shadow:0 0 22px rgba(255,255,255,0.14);
    transition:opacity 0.55s ease, background 0.55s ease, box-shadow 0.55s ease;
}
.intro-screen.is-logo .intro-core-frame__line--top,
.intro-screen.is-logo .intro-core-frame__line--bottom,
.intro-screen.is-logo .intro-core-frame__line--left,
.intro-screen.is-logo .intro-core-frame__line--right {
    transform:scaleX(1);
    transition:opacity 0.55s ease, background 0.55s ease, box-shadow 0.55s ease;
}
.intro-screen.is-logo .intro-core-frame__line--left,
.intro-screen.is-logo .intro-core-frame__line--right {
    transform:scaleY(1);
}


/* ── UI ── */
.intro-cursor-label {
    position:fixed;
    left:var(--cursor-x, calc(100vw - clamp(24px,3.2vw,48px)));
    top:var(--cursor-y, clamp(24px,3.2vw,48px));
    right:auto;z-index:14;
    display:flex;align-items:center;justify-content:center;
    width:auto;height:auto;padding:0;border:none;border-radius:0;
    background:transparent;color:rgba(255,255,255,0.52);
    backdrop-filter:none;font-size:0.6875rem;font-weight:600;line-height:1;
    letter-spacing:0.22em;text-transform:uppercase;
    pointer-events:none;opacity:1;
    transform:translate3d(-50%,-50%,0);
    transition:color 0.5s ease, background 0.5s ease, border 0.5s ease, width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, backdrop-filter 0.5s ease;
    will-change:left, top;
}
.intro-screen.is-logo-intro .intro-cursor-label {
    width:82px;height:82px;padding:0;
    border:1px solid rgba(255,255,255,0.58);border-radius:50%;
    background:rgba(0,70,85,0.5);color:#fff;
    backdrop-filter:blur(10px);font-size:0.8125rem;font-weight:900;
    letter-spacing:0;text-transform:none;
    transition:color 0.5s ease, background 0.5s ease, border 0.5s ease, width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, backdrop-filter 0.5s ease;
}
.intro-screen.is-typography .intro-cursor-label {
    width:82px;height:82px;padding:0;
    border:1px solid rgba(255,255,255,0.58);border-radius:50%;
    background:rgba(0,70,85,0.5);color:#fff;
    backdrop-filter:blur(10px);font-size:0.8125rem;font-weight:900;
    letter-spacing:0;text-transform:none;
    transition:color 0.5s ease, background 0.5s ease, border 0.5s ease, width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, backdrop-filter 0.5s ease;
}

@media (prefers-reduced-motion:reduce) {
    .intro-story {display:none}
    .intro-screen {background:#051715}
    .intro-screen,.intro-screen::before,.intro-screen::after,
    .intro-forest,
    .intro-kicker,.intro-logo,.intro-logo-part,.intro-project,.intro-slogan,
    .intro-core-frame,.intro-core-frame__line,
    .intro-cursor-label,.intro-brand {transition:none;animation:none}
    .intro-screen::before,.intro-screen::after,.intro-forest,
    .intro-brand,.intro-kicker,
    .intro-logo,.intro-logo-part,.intro-project,.intro-slogan,
    .intro-core-frame,.intro-core-frame__line,
    .intro-cursor-label {opacity:1;transform:none;filter:none}
}

@media (max-width:768px) {
    .intro-screen {
        --morph-gap:clamp(210px,56vw,300px);
        --morph-pill-h:clamp(58px,16vw,82px);
        --intro-title-size:clamp(1.35rem,7.4vw,2.4rem);
        --intro-caption-size:0.875rem;
        --intro-micro-size:0.75rem;
    }
    .intro-screen.is-story {--morph-y:clamp(-4px,-0.6vh,0px)}
    .intro-forest {background-position:58% center}
    .intro-morph__copy {padding:0}
    .intro-copy__pair {gap:clamp(0.14em,1.4vw,0.3em)}
    .intro-copy__word {letter-spacing:-0.04em}
    .intro-morph {width:94vw;height:clamp(108px,18vh,168px)}
    .intro-brand {min-height:100dvh;padding:24px}
    .intro-brand-core {
        width:min(90vw,min(68vh,400px));
        padding:22px 18px;
        gap:10px;
    }
    .intro-logo-svg {width:min(200px,58vw)}
    .intro-type-lockup {gap:6px}
    .intro-screen.is-logo-intro .intro-cursor-label {width:64px;height:64px;font-size:0.75rem}
}

@media (max-width:480px) {
    .intro-screen {
        --intro-title-size:clamp(1.28rem,9.2vw,2.2rem);
        --intro-caption-size:0.875rem;
        --intro-micro-size:0.72rem;
    }
    .intro-screen.is-story {--morph-y:0px}
    .intro-logo-svg {width:min(180px,56vw)}
    .intro-brand-core {width:min(92vw,min(70vh,360px));padding:20px 16px}
    .intro-copy__pair {flex-direction:column;gap:0.12em}
    .intro-project {flex-direction:row}
}

@media (hover:none) {
    .intro-cursor-label {display:flex}
}