/* =====================================================================
   SHREEVIRAJ MATALE / the field
   One page, one switch. Light is blue, dark is green. Same four layer
   construction either way, only the colour changes.
   ===================================================================== */

@import url("styles.css");

/* ---------- BLUE, the default ---------- */
:root.grad{
  --paper:#0A2FF8;
  --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;
  --sweep:linear-gradient(202deg,#1A5AFC 0%,#0C39FB 30%,#0826F4 58%,#0519CE 82%,#030F8E 100%);
  --core:rgba(220,254,255,1);
  --c1:rgba(174,244,254,.9);
  --c2:rgba(114,217,253,.6);
  --c3:rgba(60,176,251,.28);
  --c4:rgba(30,124,250,.07);
  --c5:rgba(20,90,250,0);
  --s1:rgba(158,235,254,.32);
  --s2:rgba(122,216,253,.20);
  --s3:rgba(100,204,253,.15);
  --s4:rgba(92,198,252,.12);
  --s0:rgba(158,235,254,0);
  --btn-on:#0A2FF8;
  color-scheme:dark;
}

/* ---------- GREEN, the other one ---------- */
:root.grad[data-theme="dark"]{
  --paper:#02261A;
  --ink:#EEFBF4;
  --ink-2:rgba(238,251,244,.80);
  --ink-3:rgba(238,251,244,.56);
  --rule:rgba(238,251,244,.22);
  --rule-2:rgba(238,251,244,.11);
  --accent:#FFD166;
  --accent-soft:rgba(255,209,102,.24);
  --link:#BFF3DA;
  --sweep:linear-gradient(202deg,#0E8F62 0%,#076744 32%,#04432D 60%,#02291B 84%,#01140D 100%);
  --core:rgba(233,255,245,1);
  --c1:rgba(178,252,216,.78);
  --c2:rgba(108,240,180,.46);
  --c3:rgba(52,206,140,.2);
  --c4:rgba(24,160,104,.05);
  --c5:rgba(16,130,84,0);
  --s1:rgba(176,252,217,.2);
  --s2:rgba(128,244,192,.13);
  --s3:rgba(100,234,176,.1);
  --s4:rgba(88,226,168,.08);
  --s0:rgba(176,252,217,0);
  --btn-on:#04613E;
}

.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:var(--sweep);
  transition:background .8s var(--ease);
}

/* =========== 2. THE LIGHT =========== */
/* a centred square sized off vmax rather than the box's own width/height,
   so the safety margin holds under rotation at ANY aspect ratio, phones
   included (a percentage-of-self margin is only safe near a square viewport;
   a tall narrow one needs this instead). */
.bg__light{
  position:absolute;top:50%;left:50%;
  width:240vmax;height:240vmax;
  margin:-120vmax 0 0 -120vmax;
  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%,
      var(--core) 0%, var(--c1) 15%, var(--c2) 33%,
      var(--c3) 53%, var(--c4) 73%, var(--c5) 88%),
    linear-gradient(to bottom,
      var(--s0) 14%, var(--s1) 21.5%, var(--s0) 29%,
      var(--s0) 34%, var(--s2) 40.5%, var(--s0) 47%,
      var(--s0) 54%, var(--s3) 60%,   var(--s0) 66%,
      var(--s0) 72%, var(--s4) 77.5%, var(--s0) 84%);
  animation:drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
@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 =========== */
/* oversized 20% past every edge so the 3%/9% scroll translate below never
   walks its own box boundary into view. gradient sizes and anchors are
   remapped to the bigger box so the glows land in the same spot on screen. */
.bg__dark{
  position:absolute;top:-20%;left:-20%;
  width:140%;height:140%;
  transform:translate3d(calc(var(--p,0) * 3%), calc(var(--p,0) * 9%), 0);
  will-change:transform;
  background:
    radial-gradient(41.43% 44.29% at 90% 97.14%,
      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(18.57% 41.43% at 88.57% 58.57%,
      rgba(2,8,88,.34) 0%, rgba(3,14,140,.14) 46%, rgba(4,26,205,0) 78%),
    radial-gradient(37.14% 24.29% at 15.71% 85.71%,
      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(41.43% 44.29% at 90% 97.14%,
      rgba(0,3,2,.9) 0%, rgba(0,8,5,.78) 18%, rgba(1,18,12,.56) 36%,
      rgba(1,32,21,.3) 58%, rgba(2,60,39,0) 82%),
    radial-gradient(85.71% 71.43% at 30% 17.14%,
      rgba(8,80,54,.2) 0%, rgba(3,38,25,.1) 50%, rgba(1,16,11,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");
}
:root.grad[data-theme="dark"] .bg__grain{opacity:.7}

/* =========== 5. TYPE AND CONTROLS =========== */
.grad .mast__name{text-shadow:0 1px 40px rgba(0,10,40,.34)}
.grad .sec__h{text-shadow:0 1px 30px rgba(0,10,40,.26)}

.grad .btn--solid{background:#fff;color:var(--btn-on)}
.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);
}
.grad .swap{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.grad .swap:hover{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,.grad .swap{
    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:var(--btn-on)}
.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)}

/* =========== 6. SMALL SCREENS =========== */
@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}
}