/* CR8R LABS — WORK / V49 MOBILE EXPERIENCE
   Mobile-only visual enhancement. Desktop rules remain untouched.
*/
@media (max-width: 767px){
  body:has(main .project-list){
    background:
      radial-gradient(90% 35% at 92% 5%, rgba(44,113,255,.16), transparent 65%),
      radial-gradient(80% 28% at 0% 30%, rgba(218,39,194,.11), transparent 65%),
      #03050c;
  }

  main{position:relative;isolation:isolate}
  main:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
    linear-gradient(180deg,rgba(3,7,18,.18),rgba(3,5,12,.88) 24%,rgba(8,5,22,.72) 52%,rgba(3,5,12,.96) 82%),
    radial-gradient(55% 16% at 50% 42%,rgba(20,214,255,.07),transparent 75%),
    radial-gradient(65% 18% at 50% 74%,rgba(239,43,177,.07),transparent 75%);
  }

  /* Hero: preserve existing type/spacing, add a living system layer. */
  .hero{min-height:auto!important;padding:124px 0 56px!important;background:
    radial-gradient(80% 60% at 78% 20%,rgba(48,112,255,.16),transparent 68%),
    radial-gradient(60% 55% at 8% 80%,rgba(226,39,190,.12),transparent 72%),
    linear-gradient(145deg,#050914,#060711 55%,#090617);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .hero .orbit-line{opacity:.72;width:145vw;height:72vw;right:-76%;top:11%;border-color:rgba(54,201,255,.20);box-shadow:0 0 90px rgba(58,106,255,.09)}
  .hero .shell{position:relative}
  .hero .shell:after{content:"";display:block;width:74px;height:2px;margin-top:34px;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--orange));box-shadow:0 0 22px rgba(64,205,255,.3)}
  .hero h1{max-width:100%!important}
  .hero p{color:#d9dee8!important}

  /* The “how to read” section becomes a visual bridge, not a text slab. */
  .section-tight{position:relative;overflow:hidden}
  .section-tight:first-of-type{background:linear-gradient(135deg,rgba(10,23,47,.86),rgba(13,7,29,.72));border-bottom:1px solid rgba(255,255,255,.08)}
  .section-tight:first-of-type:before{content:"";position:absolute;right:-90px;top:24px;width:220px;height:220px;border:1px solid rgba(70,206,255,.16);border-radius:50%;box-shadow:0 0 80px rgba(75,88,255,.10)}
  .section-intro{position:relative;z-index:1}
  .section-intro h2{font-size:clamp(2.45rem,10.4vw,4rem)!important}
  .section-intro p{color:#d7dce6!important}
  .marquee{margin-top:28px!important;padding:14px 0!important;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden;background:linear-gradient(90deg,rgba(23,218,255,.035),rgba(238,47,182,.035),rgba(255,157,34,.025))}
  .marquee span{display:block;animation:cr8r-work-ticker 22s linear infinite!important;color:#8c9ab4!important;font-size:8px!important;letter-spacing:.22em!important}

  /* Projects become tactile case-study objects. */
  .section:has(.project-list){padding-top:62px!important;padding-bottom:66px!important}
  .section:has(.project-list) .eyebrow{color:#9eabc3}
  .project-list{gap:14px!important;margin-top:24px}
  .project{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:26px!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,rgba(12,20,39,.96),rgba(8,7,19,.98))!important;
    box-shadow:0 20px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
    transform:translateY(18px);opacity:0;
    transition:transform .7s cubic-bezier(.22,.78,.18,1),opacity .7s ease,border-color .3s,box-shadow .3s,background .3s!important;
  }
  .project.is-visible{transform:none;opacity:1}
  .project:before{
    content:"";display:block;height:164px;position:relative;
    background-position:center;background-size:cover;
    border-bottom:1px solid rgba(255,255,255,.10);
    filter:saturate(.92) contrast(1.04);
  }
  .project:after{content:"";position:absolute;left:0;right:0;top:0;height:164px;pointer-events:none;background:linear-gradient(180deg,rgba(2,5,13,.12),rgba(3,5,12,.72)),linear-gradient(90deg,rgba(31,215,255,.10),rgba(233,46,183,.06),rgba(255,159,35,.04))}
  .project:nth-child(1):before{background-image:url('../assets/cr8rlabs-infinite-symbol.png'),radial-gradient(circle,rgba(38,98,255,.38),rgba(4,8,18,.95));background-repeat:no-repeat;background-size:105px,cover;background-color:#050a18}
  .project:nth-child(2):before{background-image:url('../assets/kshetra-landscape.jpg')}
  .project:nth-child(3):before{background-image:url('../assets/country-1.jpg')}
  .project:nth-child(4):before{background-image:url('../assets/hitech-pets-grooming-session.webp')}
  .project>span.index-no{position:absolute;z-index:3;top:16px;left:16px;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.20);border-radius:50%;background:rgba(3,6,14,.66);backdrop-filter:blur(10px);font-size:9px!important;color:#f7f8ff!important}
  .project>div{padding:19px 18px 0}
  .project-meta{font-size:8px!important;letter-spacing:.13em!important;color:#9eabc0!important}
  .project h3{font-size:26px!important;line-height:1.02!important;letter-spacing:-.045em!important;margin:7px 0 0!important}
  .project h3 a{display:inline-flex;align-items:center;gap:7px}
  .project h3 a:after{content:"OPEN BUILD";font-size:7px;letter-spacing:.15em;font-weight:700;color:#8d9bb4;border:1px solid rgba(255,255,255,.12);padding:6px 7px;border-radius:999px;transform:translateY(1px);transition:.3s}
  .project p{padding:0 18px!important;grid-column:auto!important;font-size:14px!important;line-height:1.62!important;color:#c4cbd8!important;margin:11px 0 0!important;max-height:5.3em;overflow:hidden;transition:max-height .5s ease,color .3s}
  .project .visit{display:block!important;padding:13px 18px 17px!important;font-size:8px!important;letter-spacing:.14em!important;color:#49dfff!important;border-top:1px solid rgba(255,255,255,.08);margin-top:15px!important;background:linear-gradient(90deg,rgba(35,219,255,.035),transparent)}
  .project.is-active{border-color:rgba(56,215,255,.38)!important;box-shadow:0 24px 80px rgba(20,120,255,.16),0 10px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;background:linear-gradient(145deg,rgba(13,28,49,.98),rgba(12,7,27,.98))!important}
  .project.is-active h3 a:after{content:"ACTIVE BUILD";border-color:rgba(49,220,255,.32);color:#dffbff}
  .project.is-active p{max-height:18em;color:#e0e5ed!important}
  .project:focus-within{border-color:rgba(56,215,255,.35)!important}

  /* Common-thread band becomes a cinematic transition. */
  .band{position:relative!important;overflow:hidden;background:
    radial-gradient(70% 90% at 88% 50%,rgba(239,41,183,.12),transparent 65%),
    radial-gradient(65% 90% at 5% 50%,rgba(34,198,255,.10),transparent 65%),
    linear-gradient(145deg,#081324,#090617)!important;
  }
  .band:after{content:"";position:absolute;right:-70px;bottom:-110px;width:250px;height:250px;border:1px solid rgba(255,157,34,.15);border-radius:50%;box-shadow:0 0 80px rgba(239,41,183,.08)}
  .band .shell{position:relative;z-index:1}
  .band .statement{font-size:clamp(3rem,13vw,5.2rem)!important}
  .band .shell>p:last-child{color:#d1d7e2!important}

  /* Principles become an interactive vertical system. */
  .section:has(.principle-line){background:linear-gradient(180deg,rgba(5,8,18,.55),rgba(13,7,27,.62));}
  .principle-line{position:relative;grid-template-columns:34px 1fr!important;gap:5px 13px!important;padding:25px 0 27px!important;border-bottom:1px solid rgba(255,255,255,.10)!important;transition:padding .3s,transform .3s}
  .principle-line:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--pink),var(--orange));transform:scaleY(0);transform-origin:top;transition:transform .35s}
  .principle-line:focus-within:before,.principle-line:hover:before{transform:scaleY(1)}
  .principle-line h3{font-size:24px!important;color:#f4f5f7}
  .principle-line p{color:#c0c8d5!important}

  /* Final conversion gets a clear visual destination. */
  .section-tight:has(.btn.primary){background:
    radial-gradient(70% 70% at 50% 100%,rgba(43,109,255,.14),transparent 65%),
    linear-gradient(145deg,#070b17,#12071b)!important;
    border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)
  }
  .section-tight:has(.btn.primary) .btn.primary{box-shadow:0 14px 45px rgba(56,136,255,.18),0 0 0 1px rgba(255,255,255,.08);transition:transform .3s,box-shadow .3s}
  .section-tight:has(.btn.primary) .btn.primary:active{transform:translateY(1px) scale(.985)}

  /* Scroll reveals — lightweight and disabled when requested. */
  .section:has(.project-list),.section:has(.principle-line),.band,.section-tight{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.78,.18,1)}
  .section.is-visible,.band.is-visible,.section-tight.is-visible{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .project,.section:has(.project-list),.section:has(.principle-line),.band,.section-tight{opacity:1!important;transform:none!important;transition:none!important}
  .marquee span{animation:none!important}
}
@keyframes cr8r-work-ticker{from{transform:translateX(0)}to{transform:translateX(-35%)}}

/* V51 — Work mobile always-on project showcase. Mobile only; desktop remains untouched. */
@media (max-width: 767px){
  :root{
    --work-egg:#f3eedc;
    --work-muted:#b9c2d2;
    --work-cyan:#31ddff;
    --work-blue:#587dff;
    --work-pink:#ee39c0;
    --work-orange:#ff9b2f;
  }

  /* Hero: introduce a quiet “work field” so the page opens as an experience. */
  .hero{overflow:hidden!important}
  .hero:before{content:"";position:absolute;inset:-18% -28% auto -28%;height:92vw;pointer-events:none;background:
    radial-gradient(circle at 72% 48%,rgba(49,221,255,.14),transparent 23%),
    radial-gradient(circle at 53% 52%,rgba(88,125,255,.13),transparent 37%),
    radial-gradient(circle at 35% 55%,rgba(238,57,192,.09),transparent 32%);
    filter:blur(1px);animation:workFieldDrift 12s ease-in-out infinite alternate}
  .hero:after{content:"WORK / FIELD 01";position:absolute;right:18px;bottom:22px;font-size:7px;letter-spacing:.2em;color:rgba(243,238,220,.45);padding:7px 9px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(3,6,14,.36);backdrop-filter:blur(8px)}
  .hero .shell{z-index:2}
  .hero .eyebrow{color:rgba(243,238,220,.72)!important}
  .hero h1{letter-spacing:-.055em!important}
  .hero h1 .gradient-text{background-size:180% 100%;animation:workGradient 8s ease-in-out infinite alternate}

  /* Give the reading bridge a designed control-strip quality. */
  .section-tight:first-of-type .section-intro{padding-bottom:4px}
  .section-tight:first-of-type .section-intro:after{content:"SCROLL / EXPLORE THE SYSTEM";display:inline-flex;margin-top:22px;padding:8px 10px;border:1px solid rgba(49,221,255,.18);border-radius:999px;font-size:7px;letter-spacing:.18em;color:rgba(243,238,220,.62);background:linear-gradient(90deg,rgba(49,221,255,.06),rgba(238,57,192,.04))}

  /* Project cards: stronger visual hierarchy and touch feedback without adding UI clutter. */
  .project{isolation:isolate!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .project:before{transition:transform .75s cubic-bezier(.2,.75,.15,1),filter .45s ease!important}
  .project:after{z-index:1!important;transition:opacity .4s ease,background .45s ease!important}
  .project>div,.project>p,.project>.visit{position:relative;z-index:3}
  .project>div{padding-top:21px!important}
  .project-meta{color:rgba(243,238,220,.64)!important}
  .project h3 a{color:var(--work-egg)!important}
  .project h3 a:after{margin-left:2px!important}
  .project p{color:#d0d6e0!important}
  .project .visit{color:var(--work-cyan)!important}
  .project:nth-child(1){background:linear-gradient(145deg,rgba(8,25,46,.98),rgba(12,6,28,.98))!important}
  .project:nth-child(2){background:linear-gradient(145deg,rgba(18,24,34,.98),rgba(11,8,24,.98))!important}
  .project:nth-child(3){background:linear-gradient(145deg,rgba(10,25,42,.98),rgba(15,7,26,.98))!important}
  .project:nth-child(4){background:linear-gradient(145deg,rgba(27,23,25,.98),rgba(12,7,22,.98))!important}
  .project:nth-child(1):after{background:linear-gradient(180deg,rgba(4,11,25,.08),rgba(3,5,12,.76)),linear-gradient(90deg,rgba(49,221,255,.15),rgba(88,125,255,.08),rgba(238,57,192,.06))!important}
  .project:nth-child(2):after{background:linear-gradient(180deg,rgba(4,7,13,.08),rgba(3,5,12,.78)),linear-gradient(90deg,rgba(238,57,192,.12),rgba(88,125,255,.07),rgba(255,155,47,.05))!important}
  .project:nth-child(3):after{background:linear-gradient(180deg,rgba(4,9,18,.08),rgba(3,5,12,.78)),linear-gradient(90deg,rgba(88,125,255,.13),rgba(49,221,255,.07),rgba(238,57,192,.05))!important}
  .project:nth-child(4):after{background:linear-gradient(180deg,rgba(7,5,10,.08),rgba(3,5,12,.76)),linear-gradient(90deg,rgba(255,155,47,.13),rgba(238,57,192,.07),rgba(49,221,255,.04))!important}
  .project.is-active:before,.project:focus-within:before{transform:scale(1.035);filter:saturate(1.08) contrast(1.05)!important}
  .project.is-active:after{opacity:.82!important}
  .project:active{transform:scale(.992)!important}
  .project .index-no{transition:transform .35s ease,border-color .35s ease,background .35s ease!important}
  .project.is-active .index-no{transform:rotate(8deg);border-color:rgba(49,221,255,.5)!important;background:rgba(8,23,40,.8)!important}

  /* A thin progress rail makes the four builds read as a connected collection. */
  .project-list{position:relative!important}
  .project-list:before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(49,221,255,.5),rgba(88,125,255,.2),rgba(238,57,192,.28),rgba(255,155,47,.45));opacity:.55}

  /* Common thread becomes the conceptual reset between portfolio and principles. */
  .band .eyebrow{color:rgba(243,238,220,.68)!important}
  .band .statement .gradient-text{background-size:180% 100%;animation:workGradient 9s ease-in-out infinite alternate}
  .band .shell:before{content:"↳ 01 / UNDERSTAND   02 / STRUCTURE   03 / BUILD   04 / EVOLVE";display:block;margin-bottom:22px;font-size:7px;letter-spacing:.14em;line-height:1.8;color:rgba(243,238,220,.42)}

  /* Principles get a genuine touch affordance. */
  .principle-line{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .principle-line:after{content:"+";position:absolute;right:0;top:26px;width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;font-size:13px;color:rgba(243,238,220,.62);transition:transform .35s ease,border-color .35s ease}
  .principle-line.is-active:after{content:"×";transform:rotate(90deg);border-color:rgba(49,221,255,.4);color:var(--work-cyan)}
  .principle-line.is-active{padding-left:10px!important}
  .principle-line.is-active h3{background:linear-gradient(90deg,var(--work-egg),#bdefff);-webkit-background-clip:text;background-clip:text;color:transparent!important}

  /* Final CTA should feel like the destination of the page. */
  .section-tight:has(.btn.primary){position:relative;overflow:hidden}
  .section-tight:has(.btn.primary):before{content:"";position:absolute;left:50%;bottom:-90px;width:280px;height:180px;transform:translateX(-50%);border:1px solid rgba(49,221,255,.14);border-radius:50%;box-shadow:0 0 100px rgba(88,125,255,.12)}
  .section-tight:has(.btn.primary) .shell{position:relative;z-index:2}
  .section-tight:has(.btn.primary) .section-intro p{color:#d0d6e0!important}

  @keyframes workFieldDrift{from{transform:translate3d(-2%,0,0) scale(.98)}to{transform:translate3d(3%,2%,0) scale(1.04)}}
  @keyframes workGradient{from{background-position:0% 50%}to{background-position:100% 50%}}
}
@media (prefers-reduced-motion:reduce){
  .hero:before,.hero h1 .gradient-text,.band .statement .gradient-text{animation:none!important}
}


/* V51 — Always-on project descriptions + technology disclosure.
   Mobile homepage/work only. No desktop selectors are changed. */
@media (max-width: 767px){
  .project{
    cursor:default!important;
    opacity:1!important;
    transform:none!important;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease!important;
  }
  .project p{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    display:block!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
    color:#d9dee7!important;
    margin-bottom:0!important;
  }
  .project .visit{
    opacity:1!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .project::after{opacity:.5!important}
  .project:hover,.project:active,.project.is-active,.project:focus-within{
    transform:translateY(-2px)!important;
  }
  .project h3 a::after{content:"OPEN BUILD"!important}
  .project.is-active h3 a::after{content:"OPEN BUILD"!important}

  .project-tech{
    position:relative;
    z-index:3;
    margin:13px 18px 0;
    padding:10px 0 12px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(243,238,220,.58);
    font-size:8px;
    line-height:1.55;
    letter-spacing:.11em;
    text-transform:uppercase;
  }
  .project-tech strong{
    display:block;
    margin-bottom:4px;
    color:rgba(49,221,255,.82);
    font-size:7px;
    letter-spacing:.16em;
  }
  .project-tech span{color:#cbd3df}
  .project-tech a{color:inherit;text-decoration:underline;text-underline-offset:3px}

  /* Keep all project content readable even on compact phones. */
  @media (max-width: 360px){
    .project p{font-size:13.5px!important;line-height:1.62!important}
    .project-tech{font-size:7.5px}
  }
}