/* Interactive patio shade demonstration */
.shade-section{background:var(--color-surface-offset);}
.shade-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(var(--space-6),4vw,var(--space-12));align-items:center;justify-items:center;}

/* The real patio photo supplies the housing and side tracks; only the moving screen is drawn above it. */
.shade-box{
  --bar-h:33px;
  --opening-top:12.5%;
  --opening-bottom:7.2%;
  --opening-side:7.1%;
  --travel:0;
  --housing-h:clamp(31px,7vw,46px);
  position:relative;
  width:min(720px,92vw);
  aspect-ratio:3/2;
  overflow:hidden;
  border:1px solid rgba(37,29,20,.5);
  border-radius:8px;
  box-shadow:0 20px 38px rgba(34,24,14,.22);
  background:#17120d;
  user-select:none;
  touch-action:none;
}
.shade-box::before{content:"";position:absolute;inset:0;z-index:12;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 -24px 30px rgba(0,0,0,.08);}
.shade-box__yard{position:absolute;inset:0;background:url("assets/backyard.webp") center/cover no-repeat;z-index:0;}
.shade-box__sun{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(88% 72% at 50% 13%,rgba(255,238,193,.36),rgba(255,225,150,.1) 45%,transparent 74%);mix-blend-mode:screen;opacity:calc(1 - max(0,(var(--travel) - .88)) / .12);}

/* Dark MagnaTrack-style side channels sit above the fabric so the screen looks captured by the keder track. */
.shade-housing{display:block;position:absolute;left:calc(var(--opening-side) - 13px);right:calc(var(--opening-side) - 13px);top:calc(var(--opening-top) - var(--housing-h) + 4px);z-index:11;height:var(--housing-h);overflow:hidden;border:1px solid rgba(5,5,4,.92);border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#545044 0%,#36342c 17%,#151612 58%,#080908 100%);box-shadow:0 9px 15px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.82);}
.shade-housing>*{display:none;}
.shade-housing::before{content:"";position:absolute;left:12px;right:12px;top:8%;height:24%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));opacity:.45;}
.shade-housing::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(180deg,rgba(71,68,58,.92),rgba(15,16,14,.98));box-shadow:0 -1px 0 rgba(255,255,255,.1),0 2px 5px rgba(0,0,0,.5);}
.shade-track{display:block;position:absolute;top:calc(var(--opening-top) - 1px);bottom:calc(var(--opening-bottom) - 2px);z-index:10;width:18px;border:1px solid rgba(6,6,5,.78);background:linear-gradient(90deg,#050605 0%,#171815 19%,#333028 38%,#111210 62%,#050605 100%);box-shadow:inset 1px 0 0 rgba(255,255,255,.16),inset -1px 0 0 rgba(0,0,0,.72),0 0 8px rgba(0,0,0,.34);}
.shade-track::before{content:"";position:absolute;top:4px;bottom:4px;width:5px;border-radius:999px;background:linear-gradient(180deg,rgba(76,70,58,.9),rgba(19,20,18,.95));box-shadow:inset 1px 0 0 rgba(255,255,255,.1),0 0 5px rgba(0,0,0,.46);}
.shade-track--l{left:calc(var(--opening-side) - 10px);border-radius:4px 0 0 4px;}
.shade-track--l::before{right:3px;}
.shade-track--r{right:calc(var(--opening-side) - 10px);border-radius:0 4px 4px 0;}
.shade-track--r::before{left:3px;}

.shade-fabric{position:absolute;left:calc(var(--opening-side) + 2px);right:calc(var(--opening-side) + 2px);top:var(--opening-top);z-index:4;height:calc((100% - var(--opening-top) - var(--opening-bottom) - var(--bar-h))*var(--travel));overflow:hidden;background:linear-gradient(180deg,rgba(93,91,78,.43),rgba(48,48,41,.58)),radial-gradient(120% 85% at 28% 12%,rgba(255,242,202,.1),transparent 58%),radial-gradient(90% 80% at 82% 54%,rgba(32,34,27,.18),transparent 60%);box-shadow:inset 11px 0 10px rgba(6,7,6,.34),inset -11px 0 10px rgba(6,7,6,.34),inset 0 -16px 18px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.07);backdrop-filter:brightness(.66) saturate(.72);}
.shade-fabric::before{content:"";position:absolute;inset:0;opacity:.2;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 18%,transparent 82%,rgba(255,255,255,.055)),linear-gradient(180deg,rgba(255,255,255,.035),transparent 36%,rgba(0,0,0,.08));}
.shade-fabric::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-inline:8px solid rgba(14,15,13,.74);box-shadow:inset 4px 0 0 rgba(86,80,67,.32),inset -4px 0 0 rgba(86,80,67,.32);}

.shade-bar{position:absolute;left:calc(var(--opening-side) - 7px);right:calc(var(--opening-side) - 7px);z-index:7;height:var(--bar-h);top:calc(var(--opening-top) + (100% - var(--opening-top) - var(--opening-bottom) - var(--bar-h))*var(--travel));background:linear-gradient(180deg,#4b4942 0%,#282923 30%,#151613 78%,#0b0c0a 100%);border:1px solid rgba(6,6,5,.9);border-top-color:rgba(255,255,255,.24);border-radius:2px;box-shadow:0 5px 9px rgba(0,0,0,.38),inset 10px 0 8px rgba(0,0,0,.38),inset -10px 0 8px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16);cursor:grab;display:flex;align-items:center;justify-content:center;}
.shade-bar:active{cursor:grabbing;}
.shade-bar::before{content:"";width:46px;height:4px;border-radius:999px;background:linear-gradient(180deg,#858078,#3c3a35);box-shadow:0 1px 1px rgba(0,0,0,.65);}
/* Soft brush seal below the weighted bottom bar. */
.shade-bar::after{content:"";position:absolute;left:3px;right:3px;bottom:-13px;height:13px;pointer-events:none;border-radius:0 0 7px 7px;background:linear-gradient(180deg,rgba(12,13,11,.98) 0%,rgba(19,20,17,.92) 28%,rgba(22,23,20,.7) 68%,rgba(22,23,20,0) 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(11,12,10,.82) 1px 2px,rgba(30,31,26,.64) 2px 4px),repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.055) 6px 7px,transparent 7px 13px);box-shadow:0 4px 5px rgba(0,0,0,.24);-webkit-mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.76) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.76) 88%,transparent 100%);}
.shade-bar__hint{position:absolute;right:34px;z-index:8;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:0 1px 3px rgba(0,0,0,.9);}

/* Official Somfy Situo 1 RTS Pure II product photo with invisible working hit areas. */
.somfy{position:relative;flex:none;width:clamp(116px,14vw,132px);aspect-ratio:418/1642;filter:drop-shadow(0 13px 14px rgba(30,23,16,.22));}
.somfy__image{display:block;width:100%;height:100%;object-fit:contain;}
.somfy__btn{position:absolute;z-index:2;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;}
.somfy__btn:hover{background:rgba(48,107,145,.07);}
.somfy__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.somfy__btn:active{background:rgba(48,107,145,.13);transform:none;}
.somfy__btn--up{left:22%;top:22%;width:56%;height:12%;}
.somfy__btn--my{left:30%;top:36%;width:40%;height:15%;}
.somfy__btn--down{left:22%;top:51%;width:56%;height:13%;}
.somfy__led{position:absolute;z-index:3;left:50%;top:74.2%;width:7px;height:7px;translate:-50% -50%;border-radius:50%;background:#72c866;box-shadow:0 0 9px rgba(112,200,102,.9);opacity:0;transition:opacity .2s;pointer-events:none;}
.somfy__led.on{opacity:1;}

.shade-caption{text-align:center;max-width:42rem;margin:0 auto clamp(var(--space-8),4vw,var(--space-12));}

/* The dog sits in front of the fabric so it is never hidden by the lowered screen. */
.dog{position:absolute;z-index:9;bottom:15%;width:clamp(110px,18%,155px);aspect-ratio:2.08;pointer-events:none;opacity:0;will-change:left,transform,opacity;}
.dog img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(0,0,0,.34));transform-origin:50% 82%;}

@media (max-width:760px){
  .shade-wrap{grid-template-columns:1fr;}
  .shade-box{--bar-h:29px;--opening-top:12.5%;--opening-bottom:7.2%;--opening-side:7.1%;--housing-h:clamp(28px,8vw,36px);}
  .shade-bar__hint{right:28px;font-size:10px;}
  .somfy{width:122px;}
  .dog{width:28%;bottom:14%;}
}