/* Lehen · effects layer. Everything here is additive: without JS or WebGL the page is unchanged. */

/* ---------- WebGL hosts ---------- */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-layer canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.fx-layer.on canvas{opacity:1}

.hero{overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.fx-hero{z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 38%,#000 86%,transparent 100%)}

#riyaz{position:relative;overflow:hidden}
#riyaz>.wrap{position:relative;z-index:1}
.fx-embers{z-index:2}

.final>.wrap{z-index:1}
.fx-ribbons{z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 80%,transparent 100%)}
.webgl .final-line{display:none}
/* soft vignette so the ribbons sit behind the words */
.webgl .final>.wrap::before{content:"";position:absolute;inset:-10% 8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(22,18,13,.82),rgba(22,18,13,0));pointer-events:none}

/* ---------- scroll progress ---------- */
.fx-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.fx-progress i{display:block;height:100%;background:linear-gradient(90deg,#966118,#D4A35A 60%,#FFE3A6);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(212,163,90,.7)}

/* ---------- hero ---------- */
.hero h1 em{background:linear-gradient(100deg,var(--accent) 0 38%,#F2C97A 48%,#FFF1CF 50%,#F2C97A 52%,var(--accent) 62% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 6s ease-in-out 1.8s infinite}
@keyframes fx-shimmer{0%{background-position:100% 0}35%,100%{background-position:0 0}}

.device{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-1.2deg);will-change:transform}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s;
  background:radial-gradient(60% 80% at var(--gx,50%) var(--gy,50%),rgba(255,236,200,.13),rgba(255,236,200,0) 60%)}
.device.lit .fx-glare{opacity:1}
.device::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(212,163,90,.55) 84%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;
  animation:orbit 9s linear infinite;opacity:.8}

/* ---------- word reveals ---------- */
h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
h2 .w>span{display:inline-block;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 55ms)}
h2.words-pre .w>span{transform:translateY(108%);opacity:0}

/* ---------- cursor spotlight ---------- */
.fx-spot{position:relative}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(212,163,90,.16),rgba(212,163,90,0) 65%)}
.fx-spot:hover::after{opacity:1}
.tile.fx-spot,.plan.fx-spot,.rcard.fx-spot{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.tile.fx-spot:hover,.plan.fx-spot:hover,.rcard.fx-spot:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold-soft) 55%,var(--line));box-shadow:0 22px 40px -28px var(--shadow)}
.tile .shot img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile:hover .shot img{transform:scale(1.03)}

/* ---------- magnetic buttons ---------- */
.fx-mag{translate:var(--tx,0px) var(--ty,0px);transition:translate .45s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,filter .3s}

/* ---------- riyaz ---------- */
.streak{transition:box-shadow .6s}
.streak.lit{animation:fx-lit 1.6s ease-out}
@keyframes fx-lit{0%{box-shadow:0 0 0 0 rgba(212,163,90,.6)}100%{box-shadow:0 0 0 22px rgba(212,163,90,0)}}

/* ---------- leaderboard: podium rises ---------- */
.board .block{transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.9,.25,1.12) .2s}
.board .place:nth-child(2) .block{transition-delay:.45s}
.board .medal{transition:transform .7s cubic-bezier(.3,1.5,.5,1) .7s,opacity .5s .7s}
.js .board.pre .block{transform:scaleY(.12)}
.js .board.pre .medal{transform:scale(.3);opacity:0}

/* ---------- gallery coverflow ---------- */
.gallery.flow figure{transform:perspective(1100px) rotateY(calc(var(--off,0) * -16deg)) scale(var(--s,1));opacity:var(--o,1);transition:transform .25s ease-out,opacity .25s}
.gallery.flow{cursor:grab}
.gallery.drag{cursor:grabbing;scroll-snap-type:none}
.gallery.drag figure{transition:none}

@media (prefers-reduced-motion:reduce){
  .fx-layer{display:none}
  .webgl .final-line{display:block}
  .device{transform:rotate(-1.2deg)}
  .device::before{display:none}
  .hero h1 em{color:var(--accent);background:none}
}