/* EDGHAM 0.3 — cinematic experience layer
   Motion is transform/opacity-first and gracefully reduced on touch/reduced-motion. */

:root{
  --section-progress:.5;
  --experience-ease:cubic-bezier(.16,.72,.18,1);
  --glow:color-mix(in srgb,var(--accent),transparent 72%);
  --glow-soft:color-mix(in srgb,var(--accent-2),transparent 84%);
}

/* Global depth */
.site-main{position:relative;isolation:isolate}
.site-main:before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48vw 48vw at 8% 20%,var(--glow-soft),transparent 72%),
    radial-gradient(44vw 44vw at 92% 68%,color-mix(in srgb,var(--accent),transparent 90%),transparent 74%);
  opacity:.7;
}
.site-main:after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.13;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}

/* Custom cursor — created by JS only on fine pointers.
   Native OS cursor intentionally stays visible for usability. */
.edgham-cursor{position:fixed;left:0;top:0;width:34px;height:34px;z-index:9999;pointer-events:none;border:1px solid color-mix(in srgb,var(--ink),transparent 42%);border-radius:50%;transform:translate3d(-100px,-100px,0);transition:width .24s var(--experience-ease),height .24s var(--experience-ease),background .24s ease,border-color .24s ease;mix-blend-mode:difference}
.edgham-cursor:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.edgham-cursor.is-hover{width:58px;height:58px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.72)}
.edgham-cursor.is-hidden{opacity:0}

/* Hero: more dimensional, still CSS-only */
.hero-v2{position:relative}
.hero-v2:before{
  content:"";position:absolute;inset:8% -20% auto auto;width:52vw;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow) 0,transparent 68%);
  transform:translate3d(calc(var(--hero-progress) * -4vw),calc(var(--hero-progress) * 5vh),0) scale(calc(.84 + var(--hero-progress) * .18));
  opacity:calc(.35 + var(--hero-progress) * .4);filter:blur(18px)
}
.hero-v2-copy h1{filter:drop-shadow(0 24px 50px rgba(0,0,0,.035))}
.hero-v2-copy h1 span{will-change:transform,opacity}
.hero-v2-copy h1 span:first-child{transform:translate3d(calc(var(--hero-progress) * -18px),0,0)}
.hero-v2-copy h1 span:nth-child(2){transform:translate3d(calc(var(--hero-progress) * 23px),0,0)}
.hero-v2-copy h1 span:nth-child(3){transform:translate3d(calc(var(--hero-progress) * -9px),0,0)}
.hero-sculpture{perspective:1100px}
.hero-sculpture .ring-one{box-shadow:0 0 80px color-mix(in srgb,var(--accent),transparent 90%) inset}
.hero-sculpture .ring-two{opacity:calc(.38 + var(--hero-progress) * .5)}
.hero-sculpture .ring-three{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent),transparent 48%))}
.sculpture-floor{transform:perspective(900px) rotateX(68deg) scale(calc(.79 + var(--hero-progress) * .2));transition:box-shadow .4s ease}
.sculpture-object{transform-style:preserve-3d}
.sculpture-object .plane-a{transform:translateZ(24px) rotate(-8deg)}
.sculpture-object .plane-b{transform:translateZ(8px) rotate(4deg)}
.sculpture-object .plane-c{transform:translateZ(40px) rotate(-7deg)}

/* Signal rail becomes a visual seam between worlds */
.signal-rail{position:relative;z-index:4;box-shadow:0 18px 60px rgba(0,0,0,.035)}
.signal-rail:before,.signal-rail:after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent),transparent 90%)}
.signal-rail:before{left:18px}.signal-rail:after{right:18px}

/* Intro: editorial watermark and vertical depth */
.editorial-intro{position:relative;--section-progress:.5}
.editorial-intro:before{
  content:"EDGHAM";position:absolute;z-index:-1;left:50%;top:42%;transform:translate(-50%,-50%) translateY(calc((var(--section-progress) - .5) * -70px));
  font-family:Inter,ui-sans-serif,sans-serif;font-size:clamp(100px,18vw,290px);font-weight:900;letter-spacing:-.08em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line);opacity:.42;pointer-events:none
}
.is-rtl .editorial-intro:before{letter-spacing:-.05em}
.editorial-intro h2{transform:translate3d(0,calc((.5 - var(--section-progress)) * 18px),0)}
.editorial-intro>p{transform:translate3d(0,calc((var(--section-progress) - .5) * 14px),0)}

/* Portal grid: controlled counter-motion */
.portal-grid{perspective:1400px;--section-progress:.5}
.portal-grid .portal-card{transform-style:preserve-3d;transition:transform .65s var(--experience-ease),box-shadow .45s ease,border-color .35s ease}
.portal-grid .portal-card:nth-child(1),.portal-grid .portal-card:nth-child(4){transform:translate3d(0,calc((.5 - var(--section-progress)) * 34px),0) rotateX(calc((.5 - var(--section-progress)) * 1.1deg))}
.portal-grid .portal-card:nth-child(2),.portal-grid .portal-card:nth-child(3){transform:translate3d(0,calc((var(--section-progress) - .5) * 28px),0) rotateX(calc((var(--section-progress) - .5) * 1deg))}
.portal-card .portal-copy{position:relative;z-index:4}
.portal-card .portal-top{position:relative;z-index:4}
.portal-art:after{content:"";position:absolute;inset:14%;border:1px solid currentColor;border-radius:50%;opacity:.05;transform:scale(calc(.8 + var(--section-progress) * .28));transition:opacity .35s ease}

/* Catalog: spotlight tracks the section progress */
.catalog-preview{position:relative;overflow:hidden;--section-progress:.5}
.catalog-preview:before{
  content:"";position:absolute;z-index:0;width:52vw;aspect-ratio:1;border-radius:50%;left:calc(-18vw + var(--section-progress) * 26vw);top:4%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent),transparent 82%),transparent 68%);filter:blur(18px);opacity:.72
}
.catalog-preview>.shell{position:relative;z-index:1}
.catalog-card{position:relative}
.catalog-card:before{content:"";position:absolute;z-index:3;inset:0;border-radius:var(--radius);border:1px solid transparent;pointer-events:none;transition:border-color .35s ease}
.catalog-card:hover:before{border-color:var(--line-strong)}
.catalog-card:nth-child(odd){transform:translate3d(0,calc((.5 - var(--section-progress)) * 18px),0)}
.catalog-card:nth-child(even){transform:translate3d(0,calc((var(--section-progress) - .5) * 18px),0)}
.catalog-media:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(to top,rgba(0,0,0,.12),transparent);opacity:.45;pointer-events:none}

/* Repair: tactile stage */
.repair-feature{position:relative;overflow:hidden;--section-progress:.5}
.repair-feature:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:repeating-linear-gradient(115deg,transparent 0 28px,currentColor 29px 30px,transparent 31px 59px);
  transform:translate3d(calc((var(--section-progress) - .5) * 36px),0,0)
}
.repair-feature-grid{position:relative;z-index:1}
.repair-feature-copy{transform:translate3d(0,calc((.5 - var(--section-progress)) * 22px),0)}
.material-board{perspective:1100px}
.material-board .material-card:nth-child(1),.material-board .material-card:nth-child(4){transform:translate3d(0,calc((.5 - var(--section-progress)) * 16px),0)}
.material-board .material-card:nth-child(2),.material-board .material-card:nth-child(3){transform:translate3d(0,calc((var(--section-progress) - .5) * 16px),0)}

/* Spatial story: architecture lines literally assemble */
.space-story{--section-progress:.5;position:relative}
.space-story:before{content:"03";position:absolute;right:0;top:6%;font-size:clamp(70px,13vw,190px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line);opacity:.4;pointer-events:none}
.is-rtl .space-story:before{right:auto;left:0}
.space-diagram{transform:translate3d(0,calc((.5 - var(--section-progress)) * 24px),0)}
.space-line.line-a{transform-origin:0 50%;transform:scaleX(calc(.28 + var(--section-progress) * .72))}
.space-line.line-b{transform-origin:50% 0;transform:scaleY(calc(.28 + var(--section-progress) * .72))}
.space-line.line-c{opacity:calc(.25 + var(--section-progress) * .75)}

/* Manifesto: final cinematic band */
.manifesto-band{position:relative;overflow:hidden;--section-progress:.5}
.manifesto-band:before{content:"";position:absolute;width:46vw;aspect-ratio:1;border:1px solid color-mix(in srgb,currentColor,transparent 75%);border-radius:50%;right:-12vw;top:50%;transform:translateY(-50%) scale(calc(.72 + var(--section-progress) * .42)) rotate(calc(var(--section-progress) * 48deg));opacity:.55}
.manifesto-band:after{content:"";position:absolute;width:24vw;aspect-ratio:1;border:1px dashed color-mix(in srgb,currentColor,transparent 82%);border-radius:50%;right:7vw;top:50%;transform:translateY(-50%) rotate(calc(var(--section-progress) * -90deg));opacity:.6}
.is-rtl .manifesto-band:before{right:auto;left:-12vw}.is-rtl .manifesto-band:after{right:auto;left:7vw}
.manifesto-inner{position:relative;z-index:2}

/* Fine pointer interactions — native cursor remains visible. */
@media (hover:hover) and (pointer:fine){
  body{cursor:default}
  a,button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],label[for],select,.portal-card,.catalog-card,.project-card-v2,.material-card{cursor:pointer}
  input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="number"],textarea{cursor:text}
  .portal-grid .portal-card:hover{transform:translate3d(0,-8px,28px) rotateX(0) scale(1.004);box-shadow:0 34px 85px rgba(0,0,0,.11)}
  .catalog-card:hover{transform:translate3d(0,-7px,0)}
  .material-board .material-card:hover{transform:translate3d(0,-6px,20px) rotate(.25deg)}
}

/* Tablets and phones: same idea, less continuous movement */
@media (max-width:900px){
  .site-main:after{background-size:48px 48px;opacity:.08}
  .hero-v2:before{width:88vw;right:-34vw;filter:blur(10px)}
  .editorial-intro:before{font-size:clamp(72px,24vw,180px);opacity:.3;top:30%}
  .portal-grid .portal-card:nth-child(n),.catalog-card:nth-child(n),.material-board .material-card:nth-child(n){transform:none}
  .catalog-preview:before{width:88vw;left:-28vw;filter:blur(10px)}
  .repair-feature:before{opacity:.07}
  .space-story:before{font-size:28vw;opacity:.25}
  .manifesto-band:before{width:78vw;right:-38vw}.manifesto-band:after{width:42vw;right:-8vw}
  .is-rtl .manifesto-band:before{right:auto;left:-38vw}.is-rtl .manifesto-band:after{right:auto;left:-8vw}
}

@media (max-width:620px){
  .site-main:before{background:radial-gradient(78vw 78vw at 16% 16%,var(--glow-soft),transparent 72%);opacity:.5}
  .site-main:after{display:none}
  .hero-v2:before{opacity:.42}
  .signal-rail:before,.signal-rail:after{display:none}
  .editorial-intro:before{top:18%;font-size:28vw}
  .catalog-media:after{height:20%}
  .space-story:before{top:2%}
}

@media (hover:none){.edgham-cursor{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .hero-v2:before,.editorial-intro:before,.portal-grid .portal-card,.catalog-card,.repair-feature:before,.repair-feature-copy,.material-board .material-card,.space-diagram,.manifesto-band:before,.manifesto-band:after{transform:none!important;transition:none!important}
  .space-line{transform:none!important}
}