/* v5 motion layer · adapted from 4 Codrops references, kept inside the Mistral monochrome system */

/* ---------- 1. HERO · rotating text ring (ref: davidfaure/3d-text-circle-animation) ---------- */
.ring-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.ring{width:min(78vh,720px);height:min(78vh,720px);opacity:.5;will-change:transform}
.ring text{fill:rgba(255,255,255,.85);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase}
@media(max-width:700px){.ring{width:120vw;height:120vw;opacity:.35}}
@media(prefers-reduced-motion:reduce){.ring-wrap{display:none}}

/* ---------- 2. MY STORY · image expansion typography (ref: codrops/ImageExpansionTypography) ---------- */
.xstory{overflow:hidden}
.xline{display:flex;align-items:center;justify-content:flex-start;gap:.18em;flex-wrap:nowrap;font-weight:500;letter-spacing:-.028em;line-height:1.04;font-size:clamp(34px,6.4vw,92px);white-space:nowrap}
.xline+.xline{margin-top:.12em}
.xline .xim{height:.92em;width:1.15em;border-radius:.14em;overflow:hidden;flex:none;align-self:center}
.xline .xim img{width:100%;height:100%;object-fit:cover}
.xline .dim{color:#b9b9b9}
.xstory .xnote{margin-top:34px;max-width:560px}
@media(max-width:700px){.xline{font-size:clamp(26px,8.6vw,44px)}}

/* ---------- 3. LET'S WORK · bulge text on cursor (ref: romanjeanelie/bulge-text-effect) ---------- */
.bulge-band{background:var(--dark);color:#fff;border-radius:20px;padding:110px 30px 96px;text-align:center;position:relative;overflow:hidden;cursor:default}
.bulge{font-weight:600;letter-spacing:-.03em;line-height:.98;font-size:clamp(56px,11vw,150px);user-select:none}
.bulge .bl{display:inline-block;will-change:transform;transition:transform .18s ease-out}
.bulge .sp{display:inline-block;width:.32em}
.bulge-sub{color:var(--dark-mut);margin:26px auto 36px;max-width:460px;font-size:16px}
@media(prefers-reduced-motion:reduce){.bulge .bl{transition:none}}

/* ---------- 4. PROJECTS · glitch + perspective hover (ref: codrops/GlitchPerspective) ---------- */
.gl-item{position:relative;border-radius:var(--r);overflow:hidden;display:block;transform-style:preserve-3d;perspective:800px}
.gl-stack{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.gl-item.wide .gl-stack{aspect-ratio:2/1}
.gl-layer{grid-area:1/1/-1/-1;width:100%;height:100%;background-size:cover;background-position:50% 50%;transform:translate3d(0,0,0)}
.gl-layer:nth-child(n+2){opacity:0}
.gl-item:hover .gl-layer:nth-child(n+2){opacity:1}
.gl-item:hover .gl-layer:nth-child(2){animation:gl-a 1.1s infinite linear alternate;mix-blend-mode:screen;filter:saturate(1.4)}
.gl-item:hover .gl-layer:nth-child(3){animation:gl-b .9s infinite linear alternate;mix-blend-mode:multiply}
@keyframes gl-a{
  0%{clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%);transform:translate3d(-6px,0,0)}
  20%{clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%);transform:translate3d(6px,0,0)}
  40%{clip-path:polygon(0 40%,100% 40%,100% 46%,0 46%);transform:translate3d(-4px,0,0)}
  60%{clip-path:polygon(0 62%,100% 62%,100% 66%,0 66%);transform:translate3d(5px,0,0)}
  80%{clip-path:polygon(0 78%,100% 78%,100% 84%,0 84%);transform:translate3d(-7px,0,0)}
  100%{clip-path:polygon(0 94%,100% 94%,100% 98%,0 98%);transform:translate3d(4px,0,0)}
}
@keyframes gl-b{
  0%{clip-path:polygon(0 88%,100% 88%,100% 92%,0 92%);transform:translate3d(5px,0,0)}
  25%{clip-path:polygon(0 26%,100% 26%,100% 32%,0 32%);transform:translate3d(-5px,0,0)}
  50%{clip-path:polygon(0 55%,100% 55%,100% 58%,0 58%);transform:translate3d(7px,0,0)}
  75%{clip-path:polygon(0 8%,100% 8%,100% 12%,0 12%);transform:translate3d(-4px,0,0)}
  100%{clip-path:polygon(0 70%,100% 70%,100% 76%,0 76%);transform:translate3d(6px,0,0)}
}
@media(prefers-reduced-motion:reduce), (hover:none){
  .gl-item:hover .gl-layer:nth-child(n+2){opacity:0;animation:none}
}