/* OopsWorks V6.5 — premium motion layer
   Additive only: existing layout, Supabase, auth, basket and admin behavior are preserved. */

:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-fast:380ms;
  --motion-accent:#d9ff55;
}

html{scroll-padding-top:92px}
body{overflow-x:clip}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(17,19,18,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,19,18,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}

/* Drawn-ribbon opening gesture, inspired by the supplied motion brief. */
.ow-ribbon{
  position:fixed;
  inset:0;
  z-index:180;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
  transition:opacity .55s var(--motion-ease),visibility .55s;
}
.ow-ribbon.is-gone{opacity:0;visibility:hidden}
.ow-ribbon svg{width:100%;height:100%;display:block}
.ow-ribbon path{
  fill:none;
  stroke:#0d0f0e;
  stroke-width:760;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1 1;
  stroke-dashoffset:-.04;
  animation:owRibbonDraw 1.78s cubic-bezier(.3,.25,.25,1) both;
}
.ow-ribbon-mark{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:clamp(23px,3vw,46px);
  font-weight:900;
  letter-spacing:.22em;
  text-indent:.22em;
  opacity:0;
  animation:owRibbonMark 1.45s .16s var(--motion-ease) both;
}
@keyframes owRibbonDraw{
  0%{stroke-dashoffset:-.04;stroke-width:780}
  36%{stroke-width:310}
  100%{stroke-dashoffset:-1;stroke-width:78}
}
@keyframes owRibbonMark{
  0%{opacity:0;transform:translate(-50%,-43%) scale(.93);letter-spacing:.34em}
  30%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.03);letter-spacing:.26em}
}

/* A tiny progress line makes long portfolio pages feel deliberate. */
.ow-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:95;
  pointer-events:none;
  background:transparent;
}
.ow-progress i{
  display:block;
  width:100%;height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:#111;
  box-shadow:0 0 16px rgba(217,255,85,.45);
  will-change:transform;
}

/* Ambient studio glows — no new stock imagery. */
.ow-ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ow-ambient i{position:absolute;border-radius:50%;filter:blur(95px);opacity:.22;will-change:transform}
.ow-ambient i:nth-child(1){width:36vw;height:36vw;left:-13vw;top:22vh;background:#d9ff55;animation:owBlobA 15s ease-in-out infinite alternate}
.ow-ambient i:nth-child(2){width:30vw;height:30vw;right:-10vw;top:54vh;background:#b7d8ff;animation:owBlobB 18s ease-in-out infinite alternate}
.ow-ambient i:nth-child(3){width:23vw;height:23vw;left:43vw;top:-11vw;background:#fff;opacity:.48;animation:owBlobC 13s ease-in-out infinite alternate}
@keyframes owBlobA{to{transform:translate3d(8vw,8vh,0) scale(1.18)}}
@keyframes owBlobB{to{transform:translate3d(-8vw,-11vh,0) scale(.88)}}
@keyframes owBlobC{to{transform:translate3d(7vw,8vh,0) scale(1.12)}}

/* Scroll-adaptive navigation. Existing controls and responsive behavior remain intact. */
.topbar{
  transition:background .4s var(--motion-ease),box-shadow .4s var(--motion-ease),border-color .4s var(--motion-ease),transform .4s var(--motion-ease);
}
.topbar.ow-scrolled{
  background:rgba(250,252,250,.96);
  border-color:rgba(17,19,18,.09);
  box-shadow:0 15px 44px rgba(30,42,36,.12);
  transform:translateY(0);
}
.topbar.ow-hidden{transform:translateY(calc(-100% - 18px))}
.nav-pills a{position:relative;overflow:hidden}
.nav-pills a::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:6px;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .36s var(--motion-ease);
  opacity:.55;
}
.nav-pills a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-pills a.active::after{display:none}

/* Premium hero movement without replacing the current dashboard composition. */
.hero-main,.hero-side>*,.hero-bottom>*{will-change:transform}
.hero-main{isolation:isolate}
.hero-main::before{
  content:"";
  position:absolute;
  width:44%;aspect-ratio:1;
  left:-19%;top:-30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,255,85,.38),transparent 66%);
  filter:blur(8px);
  animation:owHeroGlow 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes owHeroGlow{to{transform:translate3d(72px,42px,0) scale(1.18)}}
.device-window{
  transform-style:preserve-3d;
  transition:transform .65s var(--motion-ease),box-shadow .65s var(--motion-ease);
  will-change:transform;
}
.hero-visual:hover .device-window{box-shadow:0 38px 76px rgba(20,25,23,.26)}
.device-window>img{transition:transform 1.1s var(--motion-ease),filter .8s ease}
.hero-visual:hover .device-window>img{transform:scale(1.025)}
.hero-copy h1{background:linear-gradient(105deg,#111 0%,#111 46%,#646b67 78%,#111 100%);background-size:230% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:owHeadlineSheen 8s ease-in-out infinite}
@keyframes owHeadlineSheen{0%,32%{background-position:0% center}68%,100%{background-position:100% center}}

/* Viewport reveals are attached by motion.js, including dynamically rendered cards. */
.ow-reveal{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(7px);
  transition:opacity .85s var(--motion-ease),transform .85s var(--motion-ease),filter .75s ease;
  transition-delay:var(--ow-delay,0ms);
}
.ow-reveal.ow-visible{opacity:1;transform:none;filter:blur(0)}
.ow-reveal-left{transform:translate3d(-34px,0,0) scale(.985)}
.ow-reveal-right{transform:translate3d(34px,0,0) scale(.985)}

.project-card,.gfx-card,.service-card,.review-card,.compact-card,.mini-project,.tall-project,.palette-card{
  transition:transform .5s var(--motion-ease),box-shadow .5s var(--motion-ease),border-color .5s ease;
  transform-style:preserve-3d;
}
.project-card:hover,.gfx-card:hover,.service-card:hover,.review-card:hover{
  border-color:rgba(17,19,18,.14);
  box-shadow:0 24px 56px rgba(35,48,41,.11);
}
.project-card img,.gfx-card img,.mini-project img,.tall-project img,.compact-card img{transition:transform .85s var(--motion-ease),filter .6s ease}
.project-card:hover img,.gfx-card:hover img,.mini-project:hover img,.tall-project:hover img,.compact-card:hover img{transform:scale(1.045)}

/* Directional shine follows the pointer through CSS custom properties. */
.ow-tilt{position:relative;isolation:isolate}
.ow-tilt::after{
  content:"";
  position:absolute;inset:0;
  z-index:8;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(420px circle at var(--ow-x,50%) var(--ow-y,50%),rgba(255,255,255,.34),transparent 44%);
  transition:opacity .35s ease;
}
.ow-tilt:hover::after{opacity:1}

/* Magnetic micro-interactions. */
.pill,.round-action,.account-button,.language-button,.intro-option,.intro-start,.intro-signin,.text-button{
  will-change:transform;
}
.ow-magnetic{transition:transform .36s var(--motion-ease),box-shadow .3s ease!important}
.ow-magnetic:active{transform:translate3d(0,1px,0) scale(.97)!important}

/* Portfolio cursor trail. Uses only OopsWorks' own uploaded work images. */
.ow-trail-layer{position:fixed;inset:0;z-index:72;overflow:hidden;pointer-events:none}
.ow-trail-card{
  position:fixed;
  left:0;top:0;
  width:clamp(104px,10.5vw,178px);
  aspect-ratio:4/3;
  padding:5px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 22px 48px rgba(17,19,18,.2);
  overflow:hidden;
  opacity:0;
  transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) rotate(var(--trail-r)) scale(.45);
  animation:owTrailLife 1.18s var(--motion-ease) forwards;
}
.ow-trail-card::before{content:"";position:absolute;left:12px;top:10px;width:5px;height:5px;border-radius:50%;background:#111;box-shadow:9px 0 #8f9692,18px 0 #d9ff55;z-index:2}
.ow-trail-card img{width:100%;height:100%;border-radius:13px;object-fit:cover;object-position:top center}
@keyframes owTrailLife{
  0%{opacity:0;transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) rotate(var(--trail-r)) scale(.4)}
  18%{opacity:.96;transform:translate3d(var(--trail-x),var(--trail-y),0) translate(-50%,-50%) rotate(var(--trail-r)) scale(1)}
  68%{opacity:.92;transform:translate3d(var(--trail-x),calc(var(--trail-y) - 7px),0) translate(-50%,-50%) rotate(var(--trail-r)) scale(1)}
  100%{opacity:0;transform:translate3d(var(--trail-x),calc(var(--trail-y) - 18px),0) translate(-50%,-50%) rotate(var(--trail-r)) scale(.92)}
}

/* Contact section gets a strong finale, still using existing content/actions. */
.contact-board{position:relative;overflow:hidden;isolation:isolate}
.contact-board::before{
  content:"";
  position:absolute;
  width:460px;height:460px;
  right:-170px;top:-230px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,255,85,.38),transparent 67%);
  animation:owContactGlow 8s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes owContactGlow{to{transform:translate(-55px,60px) scale(1.14)}}
footer{position:relative;overflow:hidden}
footer::after{content:"OOPSWORKS";position:absolute;right:12px;bottom:-.32em;font-size:clamp(58px,11vw,170px);font-weight:900;letter-spacing:-.08em;color:rgba(17,19,18,.035);pointer-events:none;white-space:nowrap}

@media(max-width:900px){
  .ow-trail-layer{display:none}
  .hero-copy h1{animation:none;background:none;color:#111}
  .topbar.ow-hidden{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .ow-ribbon{display:none}
  .ow-ambient i,.hero-main::before,.contact-board::before,.hero-copy h1{animation:none!important}
  .ow-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .device-window,.project-card,.gfx-card,.service-card,.review-card,.ow-magnetic{transform:none!important;transition:none!important}
  .ow-trail-layer{display:none}
}