/* ---------------------------------------------------------------------------
   Jewel tiles + the motion, shared by the teaser videos and the landing pages.
   Companion to jewel.js. Built to .claude/skills/icon-design/SKILL.md.

   The tile carries FOUR light sources on purpose. Take any one away and it goes
   flat, which is the exact defect the skill exists to catch:
     1. the base gradient, azure deepening from top left
     2. the sunshine corner, a warm radial in the top right
     3. an inset top highlight, the glint on the top edge
     4. an inset bottom darken, so the tile has a floor
--------------------------------------------------------------------------- */

.jt{
  --jt: 52px;
  width: var(--jt); height: var(--jt); flex: none;
  border-radius: calc(var(--jt) * 0.288);   /* 15px at 52, holds at any size */
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1A6EC0 0%, #2E8FE0 62%, #4FB0EE 100%);
  box-shadow:
    0 11px 24px -11px rgba(21,95,170,.65),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -7px 15px -9px rgba(11,40,70,.55);
}
/* the sunshine corner */
.jt:before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(62% 62% at 100% 0%, rgba(255,197,61,.6) 0%, rgba(255,197,61,0) 72%);
}
/* On the dark video stage a drop shadow does nothing (there is no light ground
   under it), so the tile takes a gold rim instead. This is the dark-surface
   variant the skill calls for, not a second look invented here. */
.jt-dark{
  box-shadow:
    0 0 0 1px rgba(255,197,61,.42),
    0 14px 30px -14px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -7px 15px -9px rgba(6,25,48,.7);
}
.jt svg{
  position: relative; width: 52%; height: 52%;      /* the glyph FILLS the tile */
  stroke: #fff; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.jt svg .gold{ fill: #FFC53D; stroke: none; }
/* Some glyphs carry their gold as a STROKE rather than a fill, a clock hand
   being the obvious one: filled, it stops reading as a hand. Still exactly one
   gold shape per glyph, which is what the rule is actually about. */
.jt svg .goldstroke{ stroke: #FFC53D; fill: none; }

/* ---- the sheen ----
   One diagonal pass of light across the tile as it arrives. It is what makes a
   tile read as a cut stone rather than a coloured square, and it is the single
   cheapest piece of life in the whole set. Fires once, on entry. */
.jt:after{
  content:""; position:absolute; top:-60%; bottom:-60%; left:-40%; width:36%;
  transform: translateX(-260%) rotate(18deg); pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
}
.on .jt:after, .lit .jt:after{ animation: jtSheen 1.15s cubic-bezier(.3,.7,.4,1) .28s both; }
@keyframes jtSheen{ to{ transform: translateX(560%) rotate(18deg); } }

/* ---- the rows arrive with weight ----
   Not a fade. They lift, and the tile scales up a hair behind the text so the
   icon reads as the thing being handed to you. */
.jrow{ opacity:0; transform: translateY(14px); }
.on .jrow, .lit .jrow{ animation: jRowIn .62s cubic-bezier(.22,.72,.24,1) both; }
/* Overshoot and settle, the Scout films' reveal grammar (August 24, 2026):
   the row lifts 2px past its seat and sits back down, the tile pops a hair
   past full size. Same feel as the films' riseIn/popIn, one studio. */
@keyframes jRowIn{ 0%{opacity:0;transform:translateY(14px)} 70%{opacity:1;transform:translateY(-2px)} to{ opacity:1; transform:none; } }
.jrow .jt{ transform: scale(.86); opacity:0; }
.on .jrow .jt, .lit .jrow .jt{ animation: jTileIn .62s cubic-bezier(.2,.9,.28,1.06) both, jFloat 3.8s ease-in-out 1.2s infinite; }
@keyframes jTileIn{ 0%{transform:scale(.86);opacity:0} 62%{transform:scale(1.06);opacity:1} to{ transform: scale(1); opacity:1; } }
/* And once landed, the tile idles: a slow lift and settle so a held money
   scene is never frozen. The endpoints carry no transform of their own, so
   they inherit jTileIn's finished scale rather than the pre-entry one. */
@keyframes jFloat{ 50%{ transform: translateY(-5%) scale(1.012); } }

/* ---- the gold shimmer on the closing action ----
   Slow, once every few seconds, so the eye returns to it without being nagged.
   Same device as the ConnectClub wordmark on /refer, kept in the family. */
.shimmer{ position:relative; overflow:hidden; }
.shimmer:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-120%);
  animation: jShimmer 4.2s ease-in-out 1.1s infinite;
}
@keyframes jShimmer{ 0%{transform:translateX(-120%)} 34%,100%{transform:translateX(120%)} }

/* Motion is a bonus, never the message. Everything above lands instantly for
   anyone who has asked their device to stop moving things. */
@media (prefers-reduced-motion: reduce){
  .on .jt:after, .lit .jt:after,
  .on .jrow, .lit .jrow{ animation-duration:.01s; }
  /* the tile lands instantly and does not idle */
  .on .jrow .jt, .lit .jrow .jt{ animation: jTileIn .01s both; }
  .shimmer:after{ animation:none; opacity:0; }
}