/* =====================================================================
   SHREEVIRAJ MATALE / gradient edition
   The background is drawn, not loaded. No image file, no request.
   Base sweep, one rotated plane carrying the light, a dark plane on top
   of it, and grain over everything.
   ===================================================================== */

@import url("styles.css");

:root.grad{
  --paper:#0A2FF8;
  --paper-2:#0A37B4;
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.82);
  --ink-3:rgba(255,255,255,.60);
  --rule:rgba(255,255,255,.26);
  --rule-2:rgba(255,255,255,.13);
  --accent:#FFE066;
  --accent-soft:rgba(255,224,102,.26);
  --link:#BFE3FF;
  color-scheme:dark;
}
:root.grad[data-theme="dark"]{
  --paper:#04123F;
  --ink:#F2F5FF;
  --ink-2:rgba(242,245,255,.78);
  --ink-3:rgba(242,245,255,.54);
  --rule:rgba(242,245,255,.2);
  --rule-2:rgba(242,245,255,.1);
  --accent:#FFD84D;
  --accent-soft:rgba(255,216,77,.22);
  --link:#A9CDFF;
}

.grad body{
  background:var(--paper);
  -webkit-tap-highlight-color:rgba(255,255,255,.12);
}

/* =========== 1. THE FIELD =========== */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;
  background:linear-gradient(202deg,
    #1A5AFC 0%, #0C39FB 30%, #0826F4 58%, #0519CE 82%, #030F8E 100%);
  transition:background .7s var(--ease);
}
:root.grad[data-theme="dark"] .bg{
  background:linear-gradient(202deg,
    #0B2A86 0%, #06184F 32%, #040F33 60%, #02091E 84%, #01040F 100%);
}

/* =========== 2. THE LIGHT =========== */
/* one plane, turned off axis, carrying the cyan core and the streaks that
   run parallel to it. --p is scroll progress, written from the loop. */
.bg__light{
  position:absolute;
  top:-80%;left:-80%;
  width:260%;height:260%;
  /* the field turns and rides up as you read down the page */
  transform:
    rotate(calc(-34deg + var(--p,0) * 16deg))
    translate3d(calc(var(--p,0) * -7%), calc(var(--p,0) * -13%), 0)
    scale(calc(1 + var(--p,0) * 0.14));
  will-change:transform;
}
.bg__light i{
  position:absolute;inset:0;display:block;
  background:
    radial-gradient(42% 23% at 63% 32%,
      rgba(220,254,255,1) 0%, rgba(174,244,254,.9) 15%, rgba(114,217,253,.6) 33%,
      rgba(60,176,251,.28) 53%, rgba(30,124,250,.07) 73%, rgba(20,90,250,0) 88%),
    linear-gradient(to bottom,
      rgba(158,235,254,0)   14%,
      rgba(158,235,254,.32) 21.5%,
      rgba(158,235,254,0)   29%,
      rgba(122,216,253,0)   34%,
      rgba(122,216,253,.20) 40.5%,
      rgba(122,216,253,0)   47%,
      rgba(100,204,253,0)   54%,
      rgba(100,204,253,.15) 60%,
      rgba(100,204,253,0)   66%,
      rgba(92,198,252,0)    72%,
      rgba(92,198,252,.12)  77.5%,
      rgba(92,198,252,0)    84%);
  animation:drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
/* the whole thing breathes about two percent. any more and it reads as a
   screensaver rather than weather. */
/* night: the same field, lit by a smaller, colder source */
:root.grad[data-theme="dark"] .bg__light i{
  opacity:.5;
  filter:saturate(.72) brightness(.62) hue-rotate(-12deg);
}
:root.grad[data-theme="dark"] .bg__grain{opacity:.62}

@keyframes drift{
  0%   {transform:translate3d(-1.4%,-1%,0) scale(1.02)}
  50%  {transform:translate3d(1.2%,1.6%,0) scale(1.05)}
  100% {transform:translate3d(-0.6%,2.2%,0) scale(1.02)}
}

/* =========== 3. THE DARK =========== */
/* the dark sits lower and lighter than the source image: enough to weight
   the corner, not enough to swallow a quarter of the page. */
.bg__dark{
  position:absolute;inset:0;
  transform:translate3d(calc(var(--p,0) * 3%), calc(var(--p,0) * 9%), 0);
  will-change:transform;
  background:
    radial-gradient(58% 62% at 106% 116%,
      rgba(1,2,8,.92) 0%, rgba(2,5,22,.82) 16%, rgba(3,9,48,.64) 32%,
      rgba(4,14,88,.42) 48%, rgba(5,20,140,.2) 66%, rgba(8,38,225,0) 84%),
    radial-gradient(26% 58% at 104% 62%,
      rgba(2,8,88,.34) 0%, rgba(3,14,140,.14) 46%, rgba(4,26,205,0) 78%),
    radial-gradient(52% 34% at 2% 100%,
      rgba(3,14,130,.2) 0%, rgba(4,22,180,.06) 52%, rgba(5,30,220,0) 82%);
}
:root.grad[data-theme="dark"] .bg__dark{
  background:
    radial-gradient(58% 62% at 106% 116%,
      rgba(0,1,4,.9) 0%, rgba(1,2,10,.76) 20%, rgba(2,5,26,.5) 40%,
      rgba(3,9,52,.24) 62%, rgba(4,14,90,0) 84%),
    radial-gradient(120% 100% at 22% 4%,
      rgba(8,26,96,.22) 0%, rgba(3,10,44,.12) 50%, rgba(1,4,20,0) 82%);
}

/* =========== 4. THE GRAIN =========== */
.bg__grain{
  position:absolute;inset:0;
  mix-blend-mode:overlay;
  opacity:.92;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========== 5. TYPE ON COLOUR =========== */
.grad .mast__name{text-shadow:0 1px 40px rgba(2,8,44,.4)}
.grad .sec__h{text-shadow:0 1px 30px rgba(2,8,44,.32)}

/* =========== 6. CONTROLS =========== */
/* white is the ink on this page, so the filled pill is white */
.grad .btn--solid{background:#fff;color:#0A2FF8}
.grad .btn--solid:hover{background:var(--accent);color:#1A1200}

.grad .btn:not(.btn--solid){
  color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.grad .btn:not(.btn--solid):hover{
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .grad .btn:not(.btn--solid),.grad .tl__y{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}
.grad .btn .ripple{background:#fff;opacity:.28}

.grad .tagg{border-color:rgba(255,255,255,.3)}
.grad .tl__y{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.32);
  color:#fff;
}
.grad .aside{border-left-color:var(--accent)}
.grad .skip{background:#fff;color:#0A2FF8}
.grad ::selection{background:var(--accent);color:#1A1200}
.grad :focus-visible{outline-color:var(--accent)}

.grad .foot a{
  color:var(--ink-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--rule);
  transition:color .25s var(--ease);
}
.grad .foot a:hover{color:var(--accent)}

/* =========== 7. SMALL SCREENS AND IN APP BROWSERS =========== */
/* Instagram and X open links in a webview. Blend modes and blur are the
   first things that go wrong there, so both degrade to plain colour. */
@media (max-width:640px){
  .bg__grain{opacity:.7}
  .bg__light i{animation-duration:60s}
}
@media (prefers-reduced-motion:reduce){
  .bg__light i{animation:none}
  .bg__light{transform:rotate(-34deg)}
  .bg__dark{transform:none}
}
@supports not (mix-blend-mode:overlay){
  .bg__grain{mix-blend-mode:normal;opacity:.14}
}