/* ============ Creative Photography — GSAP layer (styles) ============ ใช้ร่วมกับ assets/gsap-fx.js - คลาส .gsap-fx ถูกใส่ที่ โดย JS เมื่อ GSAP โหลดสำเร็จเท่านั้น ดังนั้นถ้า CDN ล่ม ทุกอย่างจะกลับไปใช้ animation เดิมของ fx.css อัตโนมัติ - ส่วน "ปิด animation เดิม" ด้านล่างมีไว้กันเอฟเฟกต์ทับซ้อน (ซ้อนกัน = กระตุก) */ /* ---------- intro curtain ---------- อยู่ในหน้า HTML ตั้งแต่ paint แรก และ "ลบตัวเองด้วย CSS" เสมอ (animation gfxIntroOut) เพื่อไม่ให้จอดำค้างแม้ JS/GSAP จะพังทั้งหมด */ .gfx-intro{ position:fixed;inset:0;z-index:9999;background:#0b0b0c; display:grid;place-items:center; animation:gfxIntroOut .7s cubic-bezier(.7,0,.3,1) 2.2s forwards; } .gfx-intro-mark{ font-family:var(--f-disp,'Archivo',sans-serif);font-weight:800; font-size:clamp(15px,3.4vw,22px);line-height:1;letter-spacing:.02em; color:#fff;text-align:center; animation:gfxMarkIn .8s cubic-bezier(.2,.65,.2,1) both; } .gfx-intro-mark i{display:block;font-style:normal;color:#ED1C24} .gfx-intro-mark small{ display:block;margin-top:10px;font-family:var(--f-mono,'JetBrains Mono',monospace); font-size:8px;letter-spacing:.34em;color:rgba(255,255,255,.5);font-weight:400; } .gfx-intro-bar{ position:absolute;left:50%;bottom:22%;transform:translateX(-50%); width:min(180px,42vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden; } .gfx-intro-bar::after{ content:"";position:absolute;inset:0;background:#ED1C24; transform-origin:0 50%;animation:gfxBar 2.1s cubic-bezier(.5,0,.2,1) forwards; } @keyframes gfxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes gfxMarkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes gfxIntroOut{to{opacity:0;visibility:hidden;pointer-events:none}} .gfx-intro.gfx-gone{display:none!important} /* ระหว่างม่านเปิด ล็อกการเลื่อนไว้ (JS ปลดให้) */ html.gfx-lock,html.gfx-lock body{overflow:hidden!important} /* ---------- ตัวช่วยของ SplitText ---------- */ /* กรอบครอบบรรทัด: ให้ตัวอักษรไหลขึ้นมาจากใต้เส้น (mask reveal) */ /* padding + margin ลบเท่ากัน = มีที่ให้ตัวอักษรหมุนโดยไม่ทำให้หัวข้อสูงขึ้น */ .gsap-fx .gfx-mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em} .gsap-fx .gfx-line{display:block;will-change:transform} .gsap-fx .gfx-char{display:inline-block;will-change:transform} /* ---------- ปิด animation เดิมที่ GSAP รับช่วงต่อ ---------- */ .gsap-fx{scroll-behavior:auto} /* Lenis คุมการเลื่อนเอง */ /* hero: GSAP ทำ entrance + parallax + ซูมช้าเอง */ .gsap-fx .hero-img img{animation:none} .gsap-fx .hero h1 .fx-ch{animation:none;opacity:1;transform:none} .gsap-fx .hero .uni, .gsap-fx .hero .tag, .gsap-fx .hero-cta{animation:none} /* reveal: ตัด CSS transition ทั้งหมด ให้ GSAP คุม timing เดียว */ .gsap-fx .reveal{transition:none} .gsap-fx .why-grid.reveal .why-card, .gsap-fx .adm-grid.reveal .tl-step{transition:none;transition-delay:0s!important} .gsap-fx .news-grid .ncard{animation:none} .gsap-fx .laptop{transition:none} /* ---------- เอฟเฟกต์ที่ GSAP ใช้ ---------- */ /* กรอบรูปที่จะเปิดออกแบบ clip-path (ตั้งค่าเริ่มต้นด้วย JS เพื่อกันแฟลช) */ .gsap-fx .gfx-clip{will-change:clip-path} .gsap-fx .gfx-clip img{will-change:transform} /* แถบเส้นใต้หัวข้อที่วาดออกจากซ้าย */ .gsap-fx .gfx-rule{transform-origin:0 50%} /* กันเมนูถูกเลื่อนหายจากเอฟเฟกต์ใด ๆ — ต้องอยู่ตำแหน่งเดิมเสมอ */ .gsap-fx .nav{transform:none!important} /* ---------- เคารพผู้ใช้ที่ปิดแอนิเมชัน ---------- */ @media (prefers-reduced-motion:reduce){ .gfx-intro{animation:none;opacity:0;visibility:hidden;display:none} .gfx-intro-bar::after,.gfx-intro-mark{animation:none} html.gfx-lock,html.gfx-lock body{overflow:auto!important} }