/* =====================================================================
   SHREEVIRAJ MATALE / green edition
   Same four layer construction as the blue one, retuned to emerald.
   The base runs bright green to near black, a rotated plane carries a
   pale mint core and the streaks, the corner goes dark, grain over all.
   ===================================================================== */

@import url("styles.css");

:root.grad{
  --paper:#06A866;
  --paper-2:#057A4C;
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.84);
  --ink-3:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.28);
  --rule-2:rgba(255,255,255,.14);
  --accent:#FFD166;
  --accent-soft:rgba(255,209,102,.26);
  --link:#C6F7DF;
  color-scheme:dark;
}
:root.grad[data-theme="dark"]{
  --paper:#02261A;
  --ink:#EEFBF4;
  --ink-2:rgba(238,251,244,.78);
  --ink-3:rgba(238,251,244,.54);
  --rule:rgba(238,251,244,.2);
  --rule-2:rgba(238,251,244,.1);
  --accent:#FFC94D;
  --accent-soft:rgba(255,201,77,.22);
  --link:#A6E7C7;
}

.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,
    #27E09A 0%, #0BBE78 30%, #06915C 58%, #03583A 82%, #012B1C 100%);
  transition:background .7s var(--ease);
}
:root.grad[data-theme="dark"] .bg{
  background:linear-gradient(202deg,
    #0A6E4A 0%, #044730 32%, #02301F 60%, #011B12 84%, #000A07 100%);
}

/* =========== 2. THE LIGHT =========== */
.bg__light{
  position:absolute;
  top:-80%;left:-80%;
  width:260%;height:260%;
  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(233,255,245,1) 0%, rgba(178,252,216,.9) 15%, rgba(108,240,180,.6) 33%,
      rgba(52,206,140,.28) 53%, rgba(24,160,104,.07) 73%, rgba(16,130,84,0) 88%),
    linear-gradient(to bottom,
      rgba(176,252,217,0)   14%,
      rgba(176,252,217,.32) 21.5%,
      rgba(176,252,217,0)   29%,
      rgba(128,244,192,0)   34%,
      rgba(128,244,192,.20) 40.5%,
      rgba(128,244,192,0)   47%,
      rgba(100,234,176,0)   54%,
      rgba(100,234,176,.15) 60%,
      rgba(100,234,176,0)   66%,
      rgba(88,226,168,0)    72%,
      rgba(88,226,168,.12)  77.5%,
      rgba(88,226,168,0)    84%);
  animation:drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
:root.grad[data-theme="dark"] .bg__light i{
  opacity:.5;
  filter:saturate(.72) brightness(.62);
}
: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 =========== */
.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(0,6,4,.92) 0%, rgba(1,12,8,.82) 16%, rgba(1,26,17,.64) 32%,
      rgba(2,48,31,.42) 48%, rgba(3,76,49,.2) 66%, rgba(6,150,96,0) 84%),
    radial-gradient(26% 58% at 104% 62%,
      rgba(1,40,26,.34) 0%, rgba(2,68,44,.14) 46%, rgba(4,130,84,0) 78%),
    radial-gradient(52% 34% at 2% 100%,
      rgba(1,44,29,.2) 0%, rgba(2,74,48,.06) 52%, rgba(4,140,90,0) 82%);
}
:root.grad[data-theme="dark"] .bg__dark{
  background:
    radial-gradient(58% 62% at 106% 116%,
      rgba(0,3,2,.9) 0%, rgba(0,7,5,.76) 20%, rgba(1,16,11,.5) 40%,
      rgba(1,30,20,.24) 62%, rgba(2,56,36,0) 84%),
    radial-gradient(120% 100% at 22% 4%,
      rgba(8,80,54,.22) 0%, rgba(3,38,25,.12) 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");
}

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

/* =========== 6. CONTROLS =========== */
.grad .btn--solid{background:#fff;color:#04613E}
.grad .btn--solid:hover{background:var(--accent);color:#2A1D00}

.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:#04613E}
.grad ::selection{background:var(--accent);color:#2A1D00}
.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 =========== */
@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}
}