/* Hover accordions. "flash" (Home services): dark panels, the cursor is a beam of light that shows the photo underneath,
   and the chosen panel floods with light. "shutters" (Christmas Lights, what sets us apart): photo panels that slide
   open like blinds. In both, the chosen panel's text springs up line by line. */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }

.trio { position: relative; }
.trio.flash .trio-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; height: 540px; }

/* shared panel anatomy */
.tp { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); background: #08080a; color: #f6f3ec; cursor: pointer; min-width: 0; }
.tp .ph { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; }
.tp .ph img { width: 100%; height: 100%; object-fit: cover; }
.tp::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .9)); pointer-events: none; }
.tp .tx { position: absolute; inset: auto 0 0 0; padding: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 2; width: min(540px, 100%); }
.tp .tx h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.tp .tx p { color: #ddd9d0; font-size: 1rem; }
/* the pop: each line springs up, one after another */
.tp .tx > * { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .45s, transform .7s cubic-bezier(.2, 1.5, .3, 1); }
.tp.on .tx > * { opacity: 1; transform: none; }
.tp.on .tx > :nth-child(1) { transition-delay: var(--d, .15s); }
.tp.on .tx > :nth-child(2) { transition-delay: calc(var(--d, .15s) + .09s); }
.tp.on .tx > :nth-child(3) { transition-delay: calc(var(--d, .15s) + .18s); }
.tp.on .tx > :nth-child(4) { transition-delay: calc(var(--d, .15s) + .27s); }
.tp .tx .btn { align-self: flex-start; margin-top: 6px; background: #f6f3ec; color: #0a0a0a; }
.tp .vt { font: var(--dw) 1.5rem/1.1 var(--display); letter-spacing: var(--track); white-space: nowrap; }


.flash .tp { --r: 0px; background: #050506; transition: --r 1.5s cubic-bezier(.3, .7, .2, 1), transform .6s cubic-bezier(.2, 1.5, .3, 1), box-shadow .5s; --d: .35s; }
.trio.hov .flash .tp { --r: 230px; }
.flash .tp.on, .flash.hov .tp.on { --r: 1500px; transform: translateY(-14px); box-shadow: 0 46px 90px -34px var(--glow); z-index: 2; }
.flash .tp .ph { -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx, 50%) var(--ly, 60%), #000 35%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--lx, 50%) var(--ly, 60%), #000 35%, transparent 100%); }
.flash .tp .vt { display: grid; position: absolute; inset: 0; place-items: center; text-align: center; white-space: normal; padding: 20px; font-size: clamp(1.4rem, 2.4vw, 2.1rem); color: rgba(246, 243, 236, .5); transition: opacity .4s; }
.flash .tp.on .vt { opacity: 0; }


/* shutters */
.shutters .trio-items { display: flex; gap: 10px; height: 580px; }
.shutters .tp { flex: 1; transition: flex .85s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; --d: .4s; }
.shutters .tp.on { flex: 5; box-shadow: 0 40px 90px -40px var(--glow); }
.shutters .ph img { filter: grayscale(.75) brightness(.4); transform: scale(1.18); transition: filter .9s, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.shutters .on .ph img { filter: brightness(.8); transform: scale(1); }
.shutters .vt { display: block; position: absolute; left: 50%; bottom: 32px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; color: #f6f3ec; transition: opacity .3s; }
.shutters .on .vt { opacity: 0; }
.shutters .tp .tx { width: min(620px, 100%); }
@media (max-width: 860px) {
  .trio.flash .trio-items { grid-template-columns: 1fr; height: auto; }
  .flash .tp { height: 340px; }
  .shutters .trio-items { flex-direction: column; height: 900px; }
  .shutters .vt { writing-mode: horizontal-tb; left: 24px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .shutters .tp .tx { padding: 22px; }
  .shutters .tp .tx p { font-size: .93rem; }
}
@media (prefers-reduced-motion: reduce) {
  .trio .tp, .trio .tp * { transition: none !important; animation: none !important; }
}