/* ==========================================================================
   (Sir, Oct 31) Home repair tiles: "make the phone shine and glass shine".
   1. Glass tiles: the same thin chrome edge as the Repairs cards (css/pages/repairs-store.css, "Sir, Oct 31"):
      bright at the top-left, silver at the bottom-right, an inner top highlight, a light sweep along the edge on hover.
      The black tiles also get a soft diagonal reflection, like light on a glass sheet.
   2. Shiny phones: js/pages/home-shine.js puts two layers on top of each tile picture, cut to the phone's own shape:
      .hgrid-shine = a soft gloss + a light sweep (once when the tile scrolls into view, again on hover),
      .hgrid-rim   = a thin bright reflection along the top and left edges of the phone (cut-out pictures only).
      Both copy the picture's 3D turn (css/depth.css §7) so they stay glued to the phone.
   Reduced motion: no sweeps, no turning; the still gloss and edges stay.
   ========================================================================== */

/* ---- 1. glass tiles ---- */
.hgrid-light{background-color:#f5f5f7;
  background-image:linear-gradient(180deg,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 2px),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 26%)}
.hgrid-dark{background-color:#000;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 2px),
    linear-gradient(128deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 13%,rgba(255,255,255,0) 24%),
    linear-gradient(128deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.05) 17%,rgba(255,255,255,0) 20%)}
/* (the reflection stays in the top-left corner: the back-glass photo is on black, so light behind it would show its box) */
.hgrid-tile::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(135deg,#fff 0%,#c3c8d1 18%,#f4f5f8 34%,#9ea5b1 52%,#e9ebef 68%,#aeb4bf 84%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* on black a full-bright chrome ring is too loud: same gradient, dimmed, with the top-left still catching the light */
.hgrid-dark::before{opacity:.5}
.hgrid-tile::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,1) 48%,rgba(128,0,32,.35) 52%,transparent 70%) -150% 0/250% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s,background-position 0s .3s}
@media (hover:hover){
  .hgrid-tile:hover::after{opacity:1;background-position:150% 0;transition:opacity .2s,background-position 1.1s cubic-bezier(.22,.61,.24,1)}
}

/* ---- 2. shiny phones ---- */
.hgrid-pic{isolation:isolate}
.hgrid-shine,.hgrid-rim{position:absolute;display:block;pointer-events:none;transform:translateX(-50%);transform-origin:50% 90%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the picture's own soft fade at its edges (style.css .hgrid-pic img), so nothing shows where the picture fades out */
.hgrid-shine{--shine-fade:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);
  overflow:hidden;
  -webkit-mask-image:var(--shine-src),var(--shine-fade);mask-image:var(--shine-src),var(--shine-fade);
  -webkit-mask-size:contain,100% 100%,100% 100%;mask-size:contain,100% 100%,100% 100%;
  -webkit-mask-position:50% 100%,0 0,0 0;mask-position:50% 100%,0 0,0 0;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
  /* still gloss: light from the top-left, a faint second catch at the bottom-right */
  background:linear-gradient(128deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 24%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%);
  mix-blend-mode:overlay}
.hgrid-glow .hgrid-shine{--shine-fade:linear-gradient(#000 0 0),linear-gradient(#000 0 0)}   /* the watch picture has no edge fade */
/* cut-out pictures: the layer is cut to the phone, so it can sit on top as real light (dark glass catches it too) */
.hgrid-shine.is-cut{mix-blend-mode:screen;opacity:.85}
/* photos on black (back glass, board): only the moving light, in overlay mode, which leaves black as black (no box around the phone) */
.hgrid-shine:not(.is-cut){background:none;mix-blend-mode:overlay;   /* tighter side fade: keeps the light off the glow beside the phone */
  --shine-fade:linear-gradient(90deg,transparent 10%,#000 20%,#000 80%,transparent 90%),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent)}
/* the moving light: a narrow slanted band on a layer three times wider than the phone, slid across once
   (background-position, not transform: it repaints with the mask every frame, so it always shows) */
.hgrid-shine::before,.hgrid-shine::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 43%,rgba(255,255,255,.2) 46.5%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.2) 53.5%,rgba(255,255,255,0) 57%) 100% 0/300% 100% no-repeat}
.hgrid-tile.hshine-go .hgrid-shine::before{animation:hshine-run 1.6s cubic-bezier(.45,.05,.25,1) calc(var(--hgrid-d,0s) + .55s) 1 both}
@keyframes hshine-run{0%{background-position:100% 0;opacity:1}90%{opacity:1}100%{background-position:0 0;opacity:0}}
.hgrid-shine::after{transition:opacity .3s,background-position 0s .3s}
@media (hover:hover){
  .hgrid-tile:hover .hgrid-shine::after{opacity:1;background-position:0 0;transition:opacity .15s,background-position 1.25s cubic-bezier(.45,.05,.25,1)}
}
/* the bright edge: the phone's shape minus the same shape moved 2px down-right = a thin line on its top and left edges */
.hgrid-rim{
  -webkit-mask-image:var(--shine-src),var(--shine-src);mask-image:var(--shine-src),var(--shine-src);
  -webkit-mask-size:contain,contain;mask-size:contain,contain;
  -webkit-mask-position:50% 100%,calc(50% + 2px) calc(100% + 2px);mask-position:50% 100%,calc(50% + 2px) calc(100% + 2px);
  -webkit-mask-composite:source-out;mask-composite:subtract;
  background:linear-gradient(150deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 30%,rgba(214,219,227,.25) 60%,rgba(214,219,227,.10) 100%);
  opacity:.55;transition:opacity .5s ease}
@media (hover:hover){ .hgrid-tile:hover .hgrid-rim{opacity:.8} }

/* follow the picture exactly: same 3D turn, same hover lift (css/depth.css §3 + §7) */
.hgrid-pic.mv-tt>:is(.hgrid-shine,.hgrid-rim){animation:mv-sway var(--tt-t,9s) ease-in-out infinite;animation-delay:calc(var(--mv-i,0) * -1.6s);
  transform:translateX(-50%) translateY(var(--tt-lift,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--tt-s,1));
  transition:transform .8s cubic-bezier(.22,1,.36,1),scale .6s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1),opacity .5s ease}
@media (hover:hover) and (pointer:fine){
  .hgrid-tile:hover .hgrid-pic>:is(.hgrid-shine,.hgrid-rim){scale:1.035;translate:0 -6px}
}

@media (prefers-reduced-motion:reduce){
  .hgrid-tile::after,.hgrid-shine::before,.hgrid-shine::after{display:none}
  .hgrid-pic>:is(.hgrid-shine,.hgrid-rim),.hgrid-pic.mv-tt>:is(.hgrid-shine,.hgrid-rim){animation:none;rotate:none;scale:none;translate:none;transform:translateX(-50%)}
}
@media print{ .hgrid-shine,.hgrid-rim{display:none} }