/* Erfan Platform v0.13 — Kinetic Spatial Engine
   One GPU scene, event-driven depth, restrained optical glass. */
:root{
  --ebp-kx:50%;--ebp-ky:30%;--ebp-kdx:0;--ebp-kdy:0;
  --ebp-motion-ease:cubic-bezier(.2,.85,.2,1);
  --ebp-motion-spring:cubic-bezier(.16,1,.3,1);
  --ebp-depth-shadow:0 34px 110px rgba(7,22,44,.16),0 7px 24px rgba(7,22,44,.08);
}

/* ---------- Shared optical stage ---------- */
.ebp-public-shell{position:relative;isolation:isolate;background:transparent!important}
.ebp-public-main{position:relative;z-index:2}
.ebp-kinetic-canvas{
  position:absolute;z-index:0;top:0;left:0;width:100%;height:min(1520px,148vh);
  pointer-events:none;opacity:.92;mix-blend-mode:normal;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  contain:strict;
}
.ebp-kinetic-static .ebp-kinetic-canvas{display:none}
.ebp-kinetic-fallback{position:absolute;z-index:0;inset:0 0 auto;height:min(1480px,145vh);overflow:hidden;pointer-events:none;opacity:.76;mask-image:linear-gradient(#000 72%,transparent)}
.ebp-kinetic-fallback::before,.ebp-kinetic-fallback::after{content:"";position:absolute;border-radius:50%;filter:blur(26px)}
.ebp-kinetic-fallback::before{width:min(72vw,960px);aspect-ratio:1;right:-12vw;top:-10vw;background:radial-gradient(circle at 34% 34%,rgba(255,255,255,.94) 0 7%,rgba(132,184,255,.20) 24%,rgba(88,213,193,.14) 46%,transparent 68%)}
.ebp-kinetic-fallback::after{width:min(52vw,720px);aspect-ratio:1;left:-14vw;top:36vh;background:radial-gradient(circle at 60% 38%,rgba(238,189,105,.16),rgba(255,255,255,.14) 42%,transparent 70%)}

/* ---------- Hero becomes a spatial scene ---------- */
.ebp-public-hero{z-index:2;perspective:1500px}
.ebp-hero-copy{transform:translateZ(0)}
.ebp-hero-stage{position:relative;min-width:0;perspective:1450px;transform-style:preserve-3d;isolation:isolate}
.ebp-hero-stage::before{content:"";position:absolute;z-index:-1;width:88%;height:88%;inset:8% 6%;border-radius:44%;background:radial-gradient(circle at 58% 35%,rgba(255,255,255,.88),rgba(127,174,255,.15) 28%,rgba(96,215,196,.10) 48%,transparent 70%);filter:blur(22px);transform:translate3d(calc(var(--ebp-kdx)*16px),calc(var(--ebp-kdy)*12px),-70px) scale(1.04);transition:transform .22s ease-out}
.ebp-hero-stage::after{content:"";position:absolute;z-index:-1;inset:11% 7% 4%;border-radius:42px;background:linear-gradient(130deg,rgba(255,255,255,.28),rgba(255,255,255,0) 30%,rgba(120,178,255,.06) 72%,rgba(255,255,255,.24));transform:translate3d(calc(var(--ebp-kdx)*-10px),calc(var(--ebp-kdy)*-9px),-40px) rotate(-2deg);border:1px solid rgba(255,255,255,.55)}
.ebp-hero-visual{
  transform-style:preserve-3d;will-change:transform;
  transform:rotateX(calc(var(--ebp-kdy)*-2.4deg)) rotateY(calc(var(--ebp-kdx)*3deg)) translateZ(0);
  transition:transform .16s ease-out,box-shadow .35s ease;
  box-shadow:var(--ebp-depth-shadow)!important;
}
.ebp-hero-stage:not(.is-active) .ebp-hero-visual{transition:transform .72s var(--ebp-motion-spring),box-shadow .35s ease}
.ebp-hero-visual img{transform:scale(1.035) translate3d(calc(var(--ebp-kdx)*-5px),calc(var(--ebp-kdy)*-4px),0)!important;transition:transform .18s ease-out}
.ebp-hero-caption{transform:translate3d(calc(var(--ebp-kdx)*10px),calc(var(--ebp-kdy)*8px),34px);box-shadow:0 12px 36px rgba(2,15,31,.18),inset 0 1px rgba(255,255,255,.26)}
.ebp-hero-state{transform:translate3d(calc(var(--ebp-kdx)*-8px),calc(var(--ebp-kdy)*-6px),42px)}

.ebp-hero-orbit{position:absolute;z-index:6;width:128px;aspect-ratio:1;border-radius:50%;inset-inline-end:-34px;top:12%;pointer-events:none;transform-style:preserve-3d;transform:translate3d(calc(var(--ebp-kdx)*20px),calc(var(--ebp-kdy)*14px),72px)}
.ebp-hero-orbit::before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.96) 0 8%,rgba(255,255,255,.44) 20%,rgba(106,169,255,.20) 45%,rgba(76,215,194,.08) 64%,rgba(255,255,255,.18) 74%,transparent 76%);border:1px solid rgba(255,255,255,.92);box-shadow:inset -13px -16px 30px rgba(55,105,184,.14),inset 9px 10px 22px rgba(255,255,255,.82),0 18px 55px rgba(49,93,158,.18);-webkit-backdrop-filter:blur(10px) saturate(145%);backdrop-filter:blur(10px) saturate(145%)}
.ebp-hero-orbit::after{content:"";position:absolute;inset:-9px;border:1px solid rgba(121,167,226,.25);border-radius:50%;box-shadow:0 0 0 20px rgba(255,255,255,.07),0 0 0 43px rgba(111,175,255,.035)}
.ebp-hero-orbit i{position:absolute;z-index:2;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 24px rgba(255,255,255,.9)}
.ebp-hero-orbit i:nth-child(1){left:10px;top:26px;background:#d8b273}.ebp-hero-orbit i:nth-child(2){right:4px;bottom:22px;background:#81c8ba}.ebp-hero-orbit i:nth-child(3){left:50%;bottom:-4px;background:#79a7ff}

.ebp-depth-signal{position:absolute;z-index:7;display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.76);border-radius:999px;background:rgba(248,251,255,.74);color:var(--ebp-ink);font-size:12px;font-weight:760;white-space:nowrap;box-shadow:0 10px 34px rgba(13,32,58,.11),inset 0 1px rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);pointer-events:none}
.ebp-depth-signal i{width:7px;height:7px;border-radius:50%;background:var(--ebp-green);box-shadow:0 0 0 4px rgba(36,141,95,.09)}
.ebp-depth-signal.one{inset-inline-start:-20px;top:21%;transform:translate3d(calc(var(--ebp-kdx)*-16px),calc(var(--ebp-kdy)*-11px),56px)}
.ebp-depth-signal.two{inset-inline-end:16%;bottom:-16px;transform:translate3d(calc(var(--ebp-kdx)*14px),calc(var(--ebp-kdy)*10px),64px)}

/* Hero optics: a visible prismatic sheen rather than a flat gradient. */
.ebp-hero-visual::after{inset:-22%!important;background:linear-gradient(106deg,transparent 28%,rgba(102,205,255,.07) 37%,rgba(255,255,255,.30) 44%,rgba(255,212,139,.08) 50%,rgba(139,108,255,.08) 54%,transparent 63%)!important;transform:translate3d(calc(var(--ebp-kdx)*16px),calc(var(--ebp-kdy)*8px),44px) rotate(2deg)!important;transition:opacity .35s ease!important;opacity:.78}

/* ---------- Glass that behaves like a material, not a blur preset ---------- */
.ebp-sheet,.ebp-filter-glass,.ebp-command-pill{
  border-color:rgba(255,255,255,.72)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(236,244,252,.55))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(112,147,190,.08),0 16px 50px rgba(9,27,52,.095)!important;
}




/* ---------- MotionSites/Codrops-inspired composition without runtime bloat ---------- */
.ebp-now-strip{position:relative;z-index:2;overflow:visible!important;background:rgba(255,255,255,.64)!important;-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
.ebp-now-strip::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;background:linear-gradient(110deg,rgba(255,255,255,.9),transparent 28%,rgba(109,180,255,.08) 70%,rgba(255,255,255,.8));box-shadow:0 17px 46px rgba(14,35,64,.07)}
.ebp-public-section{position:relative;z-index:2}
.ebp-public-section::before{content:"";position:absolute;z-index:-1;width:380px;height:380px;border-radius:50%;top:14%;inset-inline-start:-250px;background:radial-gradient(circle,rgba(110,181,255,.10),transparent 68%);pointer-events:none}
.ebp-public-section:nth-of-type(even)::before{inset-inline-start:auto;inset-inline-end:-250px;background:radial-gradient(circle,rgba(216,177,104,.10),transparent 68%)}

.ebp-motion-card{--tilt-x:0deg;--tilt-y:0deg;--lift:0px;transform-style:preserve-3d;will-change:transform;transform:perspective(1050px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0,var(--lift),0);transition:transform .18s ease-out,box-shadow .28s ease,border-color .28s ease}
.ebp-motion-card.is-motion-active{--lift:-4px;box-shadow:0 28px 76px rgba(8,26,51,.13)!important}
.ebp-motion-card img{transition:transform .28s ease-out,filter .28s ease}
.ebp-motion-card.is-motion-active img{transform:scale(1.025) translate3d(calc(var(--card-dx)*-3px),calc(var(--card-dy)*-3px),0)}

/* section reveals have depth and masks, not generic fade-up */
.ebp-reveal-ready .ebp-reveal{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(7px);clip-path:inset(0 0 6% 0 round 20px);transition:opacity .72s var(--ebp-motion-ease) var(--ebp-reveal-delay,0ms),transform .82s var(--ebp-motion-spring) var(--ebp-reveal-delay,0ms),filter .65s ease var(--ebp-reveal-delay,0ms),clip-path .8s var(--ebp-motion-spring) var(--ebp-reveal-delay,0ms)}
.ebp-reveal-ready .ebp-reveal.is-visible{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0 round 0)}

/* Public page/detail surfaces inherit a subtle spatial hero, not a flat card wall. */
.ebp-public-page-hero,.ebp-content-mast{isolation:isolate}
.ebp-public-page-hero::before,.ebp-content-mast::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;inset-inline-end:-14%;top:-30%;background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.9) 0 8%,rgba(117,176,255,.14) 28%,rgba(94,210,191,.08) 48%,transparent 70%);filter:blur(16px)}
.ebp-public-page-hero-media,.ebp-content-cover{transform:translateZ(0);transition:transform .6s var(--ebp-motion-spring),box-shadow .4s ease;box-shadow:0 30px 88px rgba(8,26,51,.13)!important}
.ebp-public-page-hero-media:hover,.ebp-content-cover:hover{transform:translateY(-4px) rotateX(.8deg) rotateY(-.8deg);box-shadow:0 38px 110px rgba(8,26,51,.17)!important}

/* Dark story chapter gets a light field instead of a flat navy rectangle. */
.ebp-about-block{overflow:hidden!important;isolation:isolate}
.ebp-about-block::before{content:"";position:absolute;z-index:0;inset:-40%;background:radial-gradient(circle at 24% 26%,rgba(93,163,255,.20),transparent 22%),radial-gradient(circle at 76% 70%,rgba(84,214,190,.10),transparent 20%),conic-gradient(from 210deg at 50% 50%,transparent,rgba(255,255,255,.05),transparent 28%);pointer-events:none;animation:ebp-dark-field 18s linear infinite}
.ebp-about-block>*{position:relative;z-index:1}
@keyframes ebp-dark-field{to{transform:rotate(360deg)}}

/* Member app: kinetic material continuity with zero continuous JS rendering. */
.ebp-member-welcome,.ebp-view-mast,.ebp-club-mast{overflow:hidden;isolation:isolate}
.ebp-member-welcome::after,.ebp-view-mast::after,.ebp-club-mast::after{content:"";position:absolute;z-index:0;width:300px;aspect-ratio:1;border-radius:50%;inset-inline-end:-110px;top:-120px;background:radial-gradient(circle at 34% 34%,rgba(255,255,255,.86),rgba(109,174,255,.14) 30%,rgba(86,212,191,.08) 50%,transparent 70%);pointer-events:none}.ebp-member-welcome>*:not(.ebp-orbit),.ebp-view-mast>*,.ebp-club-mast>*{position:relative;z-index:1}

/* ---------- responsive/performance tiers ---------- */
/* Mobile/tablet Safari stability: the hero keeps optical styling but no composited 3D
   surface participates behind the sticky glass header. */
@media(max-width:900px){
  .ebp-public-hero,.ebp-hero-stage{perspective:none!important}
  .ebp-hero-stage,.ebp-hero-stage::before,.ebp-hero-stage::after,.ebp-hero-visual,.ebp-hero-visual img,.ebp-hero-visual::after,.ebp-hero-caption,.ebp-hero-state,.ebp-hero-optic span{transform:none!important;will-change:auto!important}
}

@media(max-width:980px){
  .ebp-kinetic-canvas{height:980px;opacity:.72}
  .ebp-hero-orbit{width:92px;inset-inline-end:6px;top:5%}
  .ebp-depth-signal{display:none}
}
@media(max-width:700px){
  .ebp-kinetic-canvas{height:760px;opacity:.58;mask-image:linear-gradient(#000 62%,transparent)}
  .ebp-public-hero{perspective:none}
  .ebp-hero-stage{perspective:none}
  .ebp-hero-stage::before{width:108%;height:96%;inset:3% -4%;filter:blur(18px)}
  .ebp-hero-visual,.ebp-hero-visual img,.ebp-hero-caption,.ebp-hero-state{transform:none!important;will-change:auto}
  .ebp-hero-orbit{width:72px;top:-20px;inset-inline-end:4px;opacity:.86;transform:none}
  .ebp-hero-orbit::after{box-shadow:0 0 0 12px rgba(255,255,255,.055),0 0 0 26px rgba(111,175,255,.025)}
  .ebp-motion-card{transform:none!important;will-change:auto}
  .ebp-motion-card.is-motion-active{--lift:0px}
  .ebp-public-page-hero-media:hover,.ebp-content-cover:hover{transform:none}
  .ebp-about-block::before{animation-duration:28s;opacity:.72}
  
}
@media(prefers-reduced-motion:reduce){
  .ebp-kinetic-canvas{display:none!important}
  .ebp-kinetic-fallback{opacity:.46}
  .ebp-about-block::before{animation:none!important}
  .ebp-hero-visual,.ebp-hero-visual img,.ebp-hero-caption,.ebp-hero-state,.ebp-motion-card{transition:none!important;transform:none!important}
  .ebp-reveal-ready .ebp-reveal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .ebp-sheet,.ebp-filter-glass,.ebp-command-pill{background:#f7f9fc!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Progressive multi-page transitions. Unsupported browsers simply ignore this. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ebp-vt-out .24s ease both}
::view-transition-new(root){animation:ebp-vt-in .38s var(--ebp-motion-spring) both}
@keyframes ebp-vt-out{to{opacity:0;transform:scale(.992);filter:blur(3px)}}
@keyframes ebp-vt-in{from{opacity:0;transform:translateY(8px) scale(.996);filter:blur(5px)}}

@media(min-width:901px){
  .ebp-v10-work-grid{align-items:start;perspective:1200px}
  .ebp-v10-work-card:nth-child(2),.ebp-v10-work-card:nth-child(4){margin-top:34px}
  .ebp-project-side .ebp-project-piece:first-child{margin-top:20px}
  .ebp-project-side .ebp-project-piece:last-child{margin-bottom:8px}
  .ebp-editorial-feature{transform-origin:60% 50%}
}

/* A faint optical line field keeps large white sections from reading as blank canvas. */
.ebp-public-main::before{content:"";position:absolute;z-index:0;inset:520px 0 auto;height:1050px;pointer-events:none;opacity:.20;background-image:linear-gradient(rgba(67,111,168,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(67,111,168,.065) 1px,transparent 1px);background-size:88px 88px;mask-image:radial-gradient(ellipse 72% 50% at 50% 40%,#000 0%,transparent 72%);transform:perspective(800px) rotateX(58deg) translateY(-170px) scale(1.2);transform-origin:50% 0}
.ebp-public-main>*{position:relative;z-index:1}

/* Stronger still-frame presence: visible even before the first pointer event. */
.ebp-hero-stage{animation:ebp-hero-enter .9s var(--ebp-motion-spring) .05s both}
.ebp-hero-copy{animation:ebp-copy-enter .78s var(--ebp-motion-spring) both}
@keyframes ebp-hero-enter{from{opacity:0;transform:translate3d(26px,18px,0) rotateY(-3deg) scale(.97)}to{opacity:1;transform:none}}
@keyframes ebp-copy-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html[dir="rtl"] .ebp-hero-stage{animation-name:ebp-hero-enter-rtl}
@keyframes ebp-hero-enter-rtl{from{opacity:0;transform:translate3d(-26px,18px,0) rotateY(3deg) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:700px){
  .ebp-public-main::before{display:none}
  .ebp-hero-stage,.ebp-hero-copy{animation-duration:.58s}
}
@media(prefers-reduced-motion:reduce){.ebp-hero-stage,.ebp-hero-copy{animation:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* v0.13.0 final optical pass: the engine is shared by every public route. */
.ebp-public-content{position:relative;isolation:isolate;background:transparent!important}
.ebp-public-content>.ebp-kinetic-canvas,.ebp-public-content>.ebp-kinetic-fallback{position:absolute;top:0;left:0;right:0}
.ebp-public-content>main,.ebp-public-content>footer{position:relative;z-index:2}
@media(min-width:981px){
  .ebp-hero-visual{--ebp-hero-rest-y:-1.2deg;transform:rotateX(calc(.35deg + var(--ebp-kdy)*-2.4deg)) rotateY(calc(var(--ebp-hero-rest-y) + var(--ebp-kdx)*3deg)) translateZ(0)}
  html[dir="rtl"] .ebp-hero-visual{--ebp-hero-rest-y:1.2deg}
  .ebp-hero-orbit::before{animation:ebp-lens-breathe 7.5s ease-in-out infinite}
  .ebp-hero-orbit i:nth-child(1){animation:ebp-satellite-a 6.8s ease-in-out infinite}
  .ebp-hero-orbit i:nth-child(2){animation:ebp-satellite-b 8.2s ease-in-out infinite}
  .ebp-hero-orbit i:nth-child(3){animation:ebp-satellite-c 7.4s ease-in-out infinite}
}
@keyframes ebp-lens-breathe{50%{transform:scale(1.055);filter:saturate(1.08) brightness(1.025)}}
@keyframes ebp-satellite-a{50%{transform:translate3d(-5px,8px,18px) scale(1.12)}}
@keyframes ebp-satellite-b{50%{transform:translate3d(7px,-6px,16px) scale(.92)}}
@keyframes ebp-satellite-c{50%{transform:translate3d(-2px,-8px,20px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ebp-hero-orbit::before,.ebp-hero-orbit i{animation:none!important}}