/* ============ Creative Photography — FX layer (additive) ============
   เอฟเฟกต์ UI สมัยใหม่: 3D tilt, parallax, kinetic type, counters, marquee
   ไฟล์นี้ "เสริม" styles.css เท่านั้น — ลบไฟล์นี้ออกเว็บก็กลับเป็นแบบเดิม   */

/* ---------- smooth anchors ---------- */
html{scroll-behavior:smooth}

/* ---------- scroll progress bar ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1000;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),#ff6b70);
  box-shadow:0 0 12px rgba(237,28,36,.55);
  pointer-events:none;
}

/* ---------- film grain ---------- */
.fx-grain{
  position:fixed;inset:-50%;z-index:999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:fxGrain 7s steps(8) infinite;
}
@keyframes fxGrain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}
  37.5%{transform:translate(-1%,2%)}50%{transform:translate(2%,1%)}62.5%{transform:translate(-2%,-1%)}
  75%{transform:translate(1%,2%)}87.5%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- custom cursor (desktop only) ---------- */
@media (pointer:fine){
  .fx-cursor,.fx-ring{position:fixed;top:0;left:0;z-index:1001;pointer-events:none;border-radius:50%;will-change:transform}
  .fx-cursor{width:6px;height:6px;background:var(--red);margin:-3px 0 0 -3px}
  .fx-ring{
    width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(237,28,36,.55);
    transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s;
  }
  body.fx-hovering .fx-ring{
    width:58px;height:58px;margin:-29px 0 0 -29px;
    border-color:rgba(255,255,255,.85);background:rgba(237,28,36,.12);
  }
}

/* ---------- hero: Ken Burns + depth layers ---------- */
.hero-img img{
  animation:fxKenburns 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes fxKenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translateX(-1.5%)}}
.hero-img,.hero-A,.hero-inner{will-change:transform}
.hero-A svg polygon{
  filter:drop-shadow(0 0 38px rgba(237,28,36,.4));
  animation:fxTriPulse 5s ease-in-out infinite;
}
@keyframes fxTriPulse{
  0%,100%{filter:drop-shadow(0 0 26px rgba(237,28,36,.30))}
  50%{filter:drop-shadow(0 0 60px rgba(237,28,36,.55))}
}

/* ---------- kinetic headline (char split) ---------- */
.hero h1 .fx-ch{
  display:inline-block;opacity:0;
  transform:translateY(.9em) rotateX(-80deg);
  transform-origin:0 100%;
  animation:fxChIn .8s cubic-bezier(.2,.65,.2,1) forwards;
  animation-delay:calc(var(--i)*.045s + .15s);
}
.hero h1{perspective:700px}
@keyframes fxChIn{to{opacity:1;transform:none}}

/* hero sub elements stagger-in */
.hero .uni,.hero .tag,.hero-cta{opacity:0;transform:translateY(22px);animation:fxFadeUp .9s cubic-bezier(.2,.65,.2,1) forwards}
.hero .uni{animation-delay:.55s}.hero .tag{animation-delay:.7s}.hero-cta{animation-delay:.85s}
@keyframes fxFadeUp{to{opacity:1;transform:none}}

/* ---------- marquee band ---------- */
.fx-marquee{
  overflow:hidden;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  background:var(--ink);padding:18px 0;position:relative;z-index:2;
}
.fx-marquee-track{
  display:flex;gap:64px;width:max-content;
  animation:fxMarquee 26s linear infinite;
}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-marquee span{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.34em;white-space:nowrap;
  color:var(--muted-d);text-transform:uppercase;
}
.fx-marquee span b{color:var(--red);font-weight:700}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* ---------- 3D tilt cards ---------- */
.fx-tilt{transform-style:preserve-3d;will-change:transform;transition:box-shadow .35s}
.fx-tilt .nbody,.fx-tilt .body{transform:translateZ(26px)}
.fx-tilt .nimg,.fx-tilt .ph{transform:translateZ(12px)}
.fx-tilt.fx-tilting{transition:none;box-shadow:0 24px 60px -18px rgba(0,0,0,.65),0 0 0 1px rgba(237,28,36,.25)}
.fx-glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 55%);
  transition:opacity .3s;
}
.fx-tilt.fx-tilting .fx-glare{opacity:1}
.why-grid,.news-grid,.adm-cards{perspective:1100px}

/* ---------- buttons: shine sweep + magnetic ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-22deg);transition:left .6s ease;
}
.btn:hover::after{left:130%}

/* ---------- stats: glow on count ---------- */
.stat .n{font-variant-numeric:tabular-nums}
.stat.fx-counted .n{animation:fxStatPop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes fxStatPop{0%{transform:scale(.86);color:#fff}60%{transform:scale(1.06);color:var(--red)}100%{transform:scale(1)}}

/* ---------- laptop 3D ---------- */
.exh-mid{perspective:1400px}
.laptop{transform-style:preserve-3d;will-change:transform;transition:transform .15s linear}
.laptop .screen{box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.laptop .screen img{transition:filter .5s}
.laptop:hover .screen img{filter:none}

/* ---------- richer reveals: child stagger ---------- */
.reveal{transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1)}
.why-grid.reveal .why-card,.adm-grid.reveal .tl-step{
  opacity:0;transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1);
}
.why-grid.reveal.in .why-card,.adm-grid.reveal.in .tl-step{opacity:1;transform:none}
.why-grid.reveal.in .why-card:nth-child(1){transition-delay:.05s}
.why-grid.reveal.in .why-card:nth-child(2){transition-delay:.14s}
.why-grid.reveal.in .why-card:nth-child(3){transition-delay:.23s}
.why-grid.reveal.in .why-card:nth-child(4){transition-delay:.32s}
.why-grid.reveal.in .why-card:nth-child(5){transition-delay:.41s}
.why-grid.reveal.in .why-card:nth-child(6){transition-delay:.5s}
.adm-grid.reveal.in .tl-step:nth-child(1){transition-delay:.08s}
.adm-grid.reveal.in .tl-step:nth-child(2){transition-delay:.22s}
.adm-grid.reveal.in .tl-step:nth-child(3){transition-delay:.36s}

/* news cards entrance (re-rendered dynamically) */
.news-grid .ncard{animation:fxCardIn .7s cubic-bezier(.2,.65,.2,1) both;animation-delay:calc(var(--i,0)*.08s)}
@keyframes fxCardIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- nav glass upgrade ---------- */
.nav.scrolled{background:rgba(11,11,12,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}

/* ---------- section heading underline sweep ---------- */
.eyebrow{position:relative}
.reveal.in .eyebrow::after,.eyebrow.in::after{transform:scaleX(1)}

/* ---------- reduced motion: ปิดทุกอย่าง ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx-grain,.fx-cursor,.fx-ring,.fx-progress{display:none!important}
  .hero-img img,.hero-A svg polygon,.fx-marquee-track,
  .hero h1 .fx-ch,.hero .uni,.hero .tag,.hero-cta,.news-grid .ncard{animation:none!important;opacity:1!important;transform:none!important}
  .fx-tilt{transform:none!important}
}
@media (max-width:760px){
  .fx-grain{display:none}
}