/* Tile skins: the tiles grow with the story (tile-style.ts holds the colours,
   set as --t-* on the board; this file holds textures and corner ornaments).
   Ornaments stay in three corners: the pipes own the centre cross, and the
   top-right corner belongs to the stone diamond and the sun/moon tone mark.
   Light, gates, dew beads, stones, hints and sun/moon discs keep one look in
   every skin. */

/* ---------- Every skin: colours from the board's --t-* variables ---------- */
.tile {
  position: relative;
  background-color: var(--t-bg, #213a31);
  background-image: var(--t-tex, none);
  background-size: 100% 100%;
  border-color: var(--t-border, #2b4439);
  box-shadow: var(--t-edge, none);
  transition: background-color 0.2s;
}
.tile:hover {
  background-color: var(--t-hover, #2d493b);
  background-image: var(--t-tex, none);
}
.tile.lit {
  background-color: var(--t-lit, #304938);
}
.tile.fixed {
  background-color: var(--t-fixed-bg, #34463e);
  background-image: var(--t-stone-tex, none);
  border-color: var(--t-fixed-border, #91a696);
  box-shadow: none;
}
.blooming .goal {
  background-color: var(--t-bloom, #4c6140);
  background-image: var(--t-tex, none);
}
.tile svg {
  position: relative;
  z-index: 1;
}
.pipes {
  stroke: var(--t-pipe, #819b8d);
}
.tile circle {
  fill: var(--t-pipe, #819b8d);
}
.tile .portal-ring {
  fill: var(--t-bg, #213a31);
}
.stone-mark {
  fill: var(--t-stone, #d2d8bf);
}
#board[data-skin] {
  /* The skin's board, in the story's light (sky.ts; see world.css #board). */
  background-color: color-mix(
    in srgb,
    var(--t-board, #0e211c),
    var(--sky-light) 9%
  );
  transition:
    background-color 1.6s ease,
    --sky-light 2.2s ease;
}
.wrap-stub::before {
  background: color-mix(in srgb, var(--t-pipe, #819b8d) 55%, transparent);
}

/* Corner ornaments: a layer under the pipes. Quieter until the light arrives. */
.tile-deco {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--t-orn, none) center / 100% 100% no-repeat;
  opacity: 0.82;
  pointer-events: none;
}
.tile.lit > .tile-deco {
  opacity: 1;
}
/* Stones that stay still stay plain stone: no living ornament. */
.tile.fixed > .tile-deco {
  display: none;
}
/* Neighbouring tiles flip their ornaments, so no board is one repeated tile. */
.tile-deco[data-v="1"] {
  scale: 1 -1;
}
.tile-deco[data-v="2"] {
  scale: -1 1;
}
.tile-deco[data-v="3"] {
  scale: -1 -1;
}
/* Things that grow or hang upright (lanterns, grass, fern) only mirror sideways. */
:is([data-skin="lanterns"], [data-skin="meadow"], [data-skin="wood"])
  .tile-deco[data-v="1"] {
  scale: 1 1;
}
:is([data-skin="lanterns"], [data-skin="meadow"], [data-skin="wood"])
  .tile-deco[data-v="3"] {
  scale: -1 1;
}

/* ---------- The skins, in story order ---------- */

/* The Gate: weathered grey stone, a crack or two. */
[data-skin="weathered"] {
  --t-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff' opacity='.05'%3E%3Ccircle cx='20' cy='30' r='1.4'/%3E%3Ccircle cx='74' cy='78' r='1.2'/%3E%3Ccircle cx='31' cy='71' r='.9'/%3E%3Ccircle cx='82' cy='44' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #ffffff0a, inset 0 -2px 0 #00000024;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M3 76l8 4 3 8 5 3' stroke='%23000' stroke-opacity='.3' stroke-width='1.2' fill='none'/%3E%3Cpath d='M4 88l5 2' stroke='%23000' stroke-opacity='.22' stroke-width='1' fill='none'/%3E%3Ccircle cx='9' cy='8' r='2.2' fill='%234c6a52' opacity='.45'/%3E%3C/svg%3E");
}

/* The first awakening: moss creeps into the corners. */
[data-skin="moss"] {
  --t-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff' opacity='.05'%3E%3Ccircle cx='20' cy='30' r='1.4'/%3E%3Ccircle cx='74' cy='78' r='1.2'/%3E%3Ccircle cx='82' cy='44' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #ffffff0c, inset 0 -2px 0 #00000026;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%235f9e5c' opacity='.8'%3E%3Ccircle cx='7' cy='93' r='8'/%3E%3Ccircle cx='17' cy='96' r='5.5'/%3E%3Ccircle cx='4' cy='81' r='5'/%3E%3Ccircle cx='24' cy='97' r='3'/%3E%3Ccircle cx='5' cy='6' r='5'/%3E%3Ccircle cx='13' cy='4' r='3.2'/%3E%3Ccircle cx='96' cy='96' r='4.5'/%3E%3C/g%3E%3Cg fill='%239fd88a' opacity='.75'%3E%3Ccircle cx='9' cy='90' r='2.4'/%3E%3Ccircle cx='17' cy='94' r='1.6'/%3E%3Ccircle cx='5' cy='5' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* The Gate's second half: fireflies rest in the moss. */
[data-skin="hearth"] {
  --t-tex: radial-gradient(circle at 18% 82%, #e9f2a60f 0, transparent 45%);
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #f0f5c00c, inset 0 -2px 0 #00000026;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%235f9e5c' opacity='.8'%3E%3Ccircle cx='6' cy='94' r='7.5'/%3E%3Ccircle cx='15' cy='97' r='5'/%3E%3Ccircle cx='3' cy='83' r='4.5'/%3E%3Ccircle cx='22' cy='98' r='3'/%3E%3Ccircle cx='4' cy='5' r='4.5'/%3E%3Ccircle cx='11' cy='3' r='3'/%3E%3C/g%3E%3Cg fill='%239fd88a' opacity='.7'%3E%3Ccircle cx='8' cy='91' r='2'/%3E%3Ccircle cx='5' cy='4' r='1.4'/%3E%3C/g%3E%3Cg fill='%23e9f2a6'%3E%3Ccircle cx='22' cy='80' r='5.5' opacity='.13'/%3E%3Ccircle cx='16' cy='22' r='4.5' opacity='.12'/%3E%3Ccircle cx='22' cy='80' r='1.7'/%3E%3Ccircle cx='16' cy='22' r='1.4'/%3E%3Ccircle cx='88' cy='86' r='1.1' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* The Lily Pond: a water inlay, a lily pad and a pink bud. */
[data-skin="pond"] {
  --t-tex: linear-gradient(to bottom, #86d0da12, transparent 55%);
  --t-stone-tex: linear-gradient(to bottom, #86d0da0c, transparent 60%);
  --t-edge: inset 0 1px 0 #bfeaf014, inset 0 -2px 0 #00000026;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='7' y='7' width='86' height='86' rx='13' fill='none' stroke='%2386d0da' stroke-opacity='.32' stroke-width='1.6'/%3E%3Cpath d='M15 86L26 82A11 11 0 1 0 25.5 91Z' fill='%234d9763'/%3E%3Cpath d='M15 86L8 80' stroke='%2376bb84' stroke-width='1.2'/%3E%3Ccircle cx='27' cy='73' r='3.2' fill='%23f4b6c8'/%3E%3Ccircle cx='27' cy='73' r='1.3' fill='%23fff0c4'/%3E%3Ccircle cx='90' cy='90' r='4.5' fill='%234d9763' opacity='.7'/%3E%3C/svg%3E");
}

/* The Orchard: warm apple wood with blossom in the corners. */
[data-skin="orchard"] {
  --t-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='1.1'%3E%3Cpath d='M0 14C25 10 40 18 60 14S90 9 100 13'/%3E%3Cpath d='M0 33C20 30 45 37 70 32S92 30 100 33'/%3E%3Cpath d='M0 66C30 62 45 70 65 66S88 62 100 65'/%3E%3Cpath d='M0 86C22 83 40 90 62 86S90 82 100 86'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffe1b0' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 23C25 20 45 27 70 22S92 20 100 23'/%3E%3Cpath d='M0 76C25 73 45 80 70 75S92 73 100 76'/%3E%3C/g%3E%3C/svg%3E");
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #ffe1b012, inset 0 -2px 0 #0000002e;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23f7c3d0'%3E%3Ccircle cx='15' cy='80.5' r='4'/%3E%3Ccircle cx='20.2' cy='84.3' r='4'/%3E%3Ccircle cx='18.2' cy='90.4' r='4'/%3E%3Ccircle cx='11.8' cy='90.4' r='4'/%3E%3Ccircle cx='9.8' cy='84.3' r='4'/%3E%3C/g%3E%3Ccircle cx='15' cy='86' r='2.2' fill='%23f3c85a'/%3E%3Cg fill='%23f7c3d0' opacity='.9'%3E%3Ccircle cx='10' cy='8' r='2.6'/%3E%3Ccircle cx='14' cy='11' r='2.6'/%3E%3Ccircle cx='9' cy='13' r='2.6'/%3E%3C/g%3E%3Cellipse cx='88' cy='90' rx='3.4' ry='2' transform='rotate(-30 88 90)' fill='%23f7c3d0' opacity='.75'/%3E%3Cpath d='M24 94c4-2 7-1 9 1-3 2-6 2-9-1z' fill='%237aa35a'/%3E%3C/svg%3E");
}

/* The Lantern Path: a warm glow along every edge, lamps in the corners. */
[data-skin="lanterns"] {
  --t-tex: linear-gradient(to top, #f7c65e14, transparent 35%);
  --t-stone-tex: none;
  --t-edge: inset 0 0 0 1px #f7c65e16, inset 0 -5px 7px -5px #f7c65e38;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffd77a' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23f7c65e' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='86' r='13' fill='url(%23g)'/%3E%3Cpath d='M13 74v4' stroke='%23b99a5a' stroke-width='1.2'/%3E%3Cpath d='M9.5 81.5l3.5-3.5 3.5 3.5v8h-7z' fill='%23ffe3a0' fill-opacity='.9' stroke='%23c99a45' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M8 90h10' stroke='%23c99a45' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='90' cy='91' r='1.4' fill='%23ffd77a' opacity='.7'/%3E%3Ccircle cx='8' cy='9' r='1.2' fill='%23ffd77a' opacity='.55'/%3E%3C/svg%3E");
}

/* The Wildflower Meadow: flecks of flowers and grass. */
[data-skin="meadow"] {
  --t-tex: linear-gradient(to top, #9fd07a14, transparent 45%);
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #e8ffc012, inset 0 -2px 0 #00000026;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%2379b862' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M5 99q1-9 5-14M11 99q0-8-2-13M17 99q2-6 6-9M86 99q1-6 4-9M92 99q0-5-3-8'/%3E%3C/g%3E%3Cg fill='%23f6c24a'%3E%3Ccircle cx='10' cy='83' r='2.2'/%3E%3Ccircle cx='13' cy='85' r='2.2'/%3E%3Ccircle cx='12' cy='88' r='2.2'/%3E%3Ccircle cx='8' cy='88' r='2.2'/%3E%3Ccircle cx='7' cy='85' r='2.2'/%3E%3C/g%3E%3Ccircle cx='10' cy='86' r='1.3' fill='%23a0552a'/%3E%3Cg fill='%23f7f2e0'%3E%3Ccircle cx='24' cy='89' r='1.8'/%3E%3Ccircle cx='26.5' cy='91' r='1.8'/%3E%3Ccircle cx='25.5' cy='94' r='1.8'/%3E%3Ccircle cx='22.5' cy='94' r='1.8'/%3E%3Ccircle cx='21.5' cy='91' r='1.8'/%3E%3C/g%3E%3Ccircle cx='24' cy='92' r='1' fill='%23f6c24a'/%3E%3Cg fill='%23f29256'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='13' cy='12' r='2'/%3E%3Ccircle cx='9' cy='14' r='2'/%3E%3C/g%3E%3Ccircle cx='90' cy='88' r='2.2' fill='%23f6c24a'/%3E%3Ccircle cx='21' cy='8' r='1.4' fill='%23f7f2e0'/%3E%3C/svg%3E");
}

/* The Glasshouse: glassy sheen and pane corners. */
[data-skin="glasshouse"] {
  --t-tex: linear-gradient(
    135deg,
    #ffffff1c 0 16%,
    transparent 16% 58%,
    #ffffff0d 58% 64%,
    transparent 64%
  );
  --t-stone-tex: linear-gradient(135deg, #ffffff10 0 14%, transparent 14%);
  --t-edge:
    inset 0 1px 0 #ffffff26, inset 1px 0 0 #ffffff14, inset 0 -2px 0 #00000026;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d9f7e6' stroke-opacity='.45' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 28V7h21M7 72v21h21M72 93h21V72'/%3E%3C/g%3E%3Cpath d='M16 84c3-8 9-11 13-11-1 6-6 11-13 11z' fill='%2388c79a' opacity='.8'/%3E%3Cpath d='M16 84c5-3 8-7 9-9' stroke='%23d9f7e6' stroke-opacity='.5' stroke-width='.8' fill='none'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23fff' opacity='.7'/%3E%3C/svg%3E");
}

/* The Mill Stream: ripples spreading from the corners. */
[data-skin="mill"] {
  --t-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238fd3f4' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 20q12-4 25 0t25 0 25 0 25 0'/%3E%3Cpath d='M0 80q12-4 25 0t25 0 25 0 25 0'/%3E%3C/g%3E%3C/svg%3E");
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #bfe6ff14, inset 0 -2px 0 #0000002a;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238fd3f4' stroke-width='1.6'%3E%3Ccircle cx='0' cy='100' r='11' stroke-opacity='.6'/%3E%3Ccircle cx='0' cy='100' r='19' stroke-opacity='.38'/%3E%3Ccircle cx='0' cy='100' r='27' stroke-opacity='.2'/%3E%3Ccircle cx='0' cy='0' r='9' stroke-opacity='.45'/%3E%3Ccircle cx='0' cy='0' r='16' stroke-opacity='.22'/%3E%3Ccircle cx='100' cy='100' r='9' stroke-opacity='.45'/%3E%3Ccircle cx='100' cy='100' r='16' stroke-opacity='.22'/%3E%3C/g%3E%3Ccircle cx='0' cy='100' r='4' fill='%23bfe6ff' opacity='.5'/%3E%3C/svg%3E");
}

/* The Rose Terraces: rose-gold edges, a rose and a curl of gilt. */
[data-skin="roses"] {
  --t-tex: radial-gradient(circle at 15% 85%, #f6a3b41c 0, transparent 50%);
  --t-stone-tex: none;
  --t-edge: inset 0 0 0 1px #f3c6a826, inset 0 -2px 0 #0000002e;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 92c5-6 11-7 15-5-4 5-10 7-15 5zM6 72c-1-7 3-12 7-13 1 6-2 11-7 13z' fill='%236f9a5f'/%3E%3Ccircle cx='14' cy='86' r='8.5' fill='%23d9607d'/%3E%3Cpath d='M14 86m-5 0a5 5 0 1 0 5-5a3 3 0 1 1-3 3a1.5 1.5 0 1 0 1.5-1.5' fill='none' stroke='%23f6a3b4' stroke-width='1.4' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%23e7b99a' stroke-opacity='.7' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 26V12q0-7 7-7h14M20 5q-3 5 2 7'/%3E%3Cpath d='M95 74v14q0 7-7 7H74M80 95q3-5-2-7'/%3E%3C/g%3E%3C/svg%3E");
}

/* The Old Wood: bark grain and a fern frond. */
[data-skin="wood"] {
  --t-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.2' stroke-width='1.3'%3E%3Cpath d='M12 0q-3 25 1 50t-2 50'/%3E%3Cpath d='M31 0q3 22-1 48t2 52'/%3E%3Cpath d='M68 0q-2 26 2 52t-1 48'/%3E%3Cpath d='M88 0q3 24-1 50t1 50'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d8c9a0' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M21 0q2 25-1 50t1 50'/%3E%3Cpath d='M78 0q-2 25 1 50t-1 50'/%3E%3C/g%3E%3C/svg%3E");
  --t-stone-tex: none;
  --t-edge: inset 0 1px 0 #e8ffc00c, inset 0 -2px 0 #00000030;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4 98Q14 86 30 78' stroke='%2385c35f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cg fill='%2385c35f'%3E%3Cellipse cx='9' cy='89' rx='4.2' ry='1.8' transform='rotate(-80 9 89)'/%3E%3Cellipse cx='12' cy='95' rx='4.2' ry='1.8' transform='rotate(10 12 95)'/%3E%3Cellipse cx='15' cy='84' rx='3.8' ry='1.6' transform='rotate(-75 15 84)'/%3E%3Cellipse cx='19' cy='89' rx='3.8' ry='1.6' transform='rotate(15 19 89)'/%3E%3Cellipse cx='21' cy='80' rx='3.2' ry='1.4' transform='rotate(-70 21 80)'/%3E%3Cellipse cx='25' cy='84' rx='3.2' ry='1.4' transform='rotate(20 25 84)'/%3E%3C/g%3E%3Cg fill='%23c9a46a' opacity='.8'%3E%3Ccircle cx='9' cy='10' r='2.4'/%3E%3Cpath d='M6 10a3 3 0 0 1 6 0z' fill='%23a0552a'/%3E%3C/g%3E%3Ccircle cx='92' cy='92' r='3' fill='%2385c35f' opacity='.55'/%3E%3C/svg%3E");
}

/* The Star Garden: night in every stone, and a star in every corner. */
[data-skin="stars"] {
  --t-tex: radial-gradient(circle at 30% 20%, #8fa0ff1a 0, transparent 60%);
  --t-stone-tex: radial-gradient(
    circle at 30% 20%,
    #ffffff0e 0,
    transparent 60%
  );
  --t-edge: inset 0 1px 0 #c8d2ff1c, inset 0 -2px 0 #00000033;
  --t-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 76l1.8 6.2L23 84l-6.2 1.8L15 92l-1.8-6.2L7 84l6.2-1.8z' fill='%23fff1bf'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='27' cy='93' r='1.1'/%3E%3Ccircle cx='6' cy='68' r='.9'/%3E%3Ccircle cx='88' cy='88' r='1.3'/%3E%3Ccircle cx='94' cy='74' r='.8'/%3E%3Ccircle cx='24' cy='12' r='.9'/%3E%3Ccircle cx='79' cy='95' r='.8'/%3E%3C/g%3E%3Cpath d='M11 8l1 3.2 3.2 1-3.2 1-1 3.2-1-3.2-3.2-1 3.2-1z' fill='%23d7ddf6'/%3E%3C/svg%3E");
}

/* ---------- The transformation moment (tile-evolve.ts) ----------
   The new skin flows into each tile as a widening circle from the side the
   wave arrives on; a soft glow in the skin's accent travels with it. */
.evolve-layer {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background-color: var(--t-bg);
  background-image: var(--t-tex, none);
  background-size: 100% 100%;
  box-shadow: var(--t-edge, none);
  border: 1px solid var(--t-border);
  pointer-events: none;
}
.tile.lit > .evolve-layer {
  background-color: var(--t-lit);
}
.tile.fixed > .evolve-layer {
  inset: -2px;
  border: 2px solid var(--t-fixed-border);
  background-color: var(--t-fixed-bg);
  background-image: var(--t-stone-tex, none);
  box-shadow: none;
}
.tile.fixed > .evolve-layer > .tile-deco {
  display: none;
}
.evolve-glint {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--glint-at, 50% 50%),
    color-mix(in srgb, var(--t-accent) 70%, transparent) 0,
    color-mix(in srgb, var(--t-accent) 22%, transparent) 45%,
    transparent 75%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}