@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

.applications-section { padding: clamp(80px, 10vw, 140px) 0; position: relative; isolation: isolate; overflow: hidden; }
.applications-head { margin-bottom: clamp(40px, 5vw, 60px); }

.frame-rows { display: flex; flex-direction: column; gap: 2px; }      
.frame-row {
  --p: 0; --tw: 0px;
  position: relative; overflow: hidden; isolation: isolate; contain: layout paint;
  display: grid; grid-template-columns: max-content 1fr; align-items: stretch;
  min-height: 76px;                                   
  text-decoration: none; color: inherit; background: var(--ink);
  transition: --p 560ms var(--ease);
}
.frame-row:nth-child(even) { grid-template-columns: 1fr max-content; }
.frame-row:hover, .frame-row:focus-visible { --p: 1; outline: none; will-change: --p; }
.frame-row:focus-visible { box-shadow: inset 0 0 0 2px var(--tsa-orange); }    

 
.fr-frame {
  grid-column: 2; grid-row: 1; z-index: 0; align-self: stretch;
  position: relative; overflow: hidden;
  width: calc(100% + var(--p) * var(--tw));           
  margin-left: calc(var(--p) * -1 * var(--tw));       
}
.frame-row:nth-child(even) .fr-frame { grid-column: 1; margin-left: 0; margin-right: calc(var(--p) * -1 * var(--tw)); }
.fr-img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover;                                  
  object-position: var(--pos-rest, 50% 50%);
  transition: object-position 560ms var(--ease);
}
.frame-row:hover .fr-img, .frame-row:focus-visible .fr-img { object-position: var(--pos-open, 50% 50%); }

 
.fr-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.02) 74%);
  opacity: calc(min(1, var(--p) * 1.4));
}
.frame-row:nth-child(even) .fr-scrim { background: linear-gradient(270deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.02) 74%); }

 
.fr-text {
  grid-column: 1; grid-row: 1; z-index: 2; position: relative;
  display: flex; align-items: center;
  padding: 2px 2px 2px 2px;
}
.frame-row:nth-child(even) .fr-text { grid-column: 2; justify-content: flex-end; }
 
.fr-text::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: inset(0 calc(var(--p) * 100%) 0 0);                      
}
.frame-row:nth-child(even) .fr-text::before { clip-path: inset(0 0 0 calc(var(--p) * 100%)); }  

 
.fr-label {
  position: relative; z-index: 1; margin: 0; white-space: nowrap;
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 10.5vw, 144px); line-height: 1; letter-spacing: -0.025em;
  color: var(--muted-d); font-kerning: none;
  opacity: calc(1 - var(--p));
}
 
.fr-fill {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center;
  padding: 2px 2px;
  margin: 0; white-space: nowrap;
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 10.5vw, 144px); line-height: 1; letter-spacing: -0.025em;
  color: #fff; font-kerning: none;
  clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%));               
  opacity: calc(1 - var(--p));
}
.frame-row:nth-child(even) .fr-fill { justify-content: flex-end; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }

 
.fr-open {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'kicker cta' 'line cta';
  column-gap: clamp(16px, 2.4vw, 40px); row-gap: 6px;
  padding: clamp(14px, 1.6vw, 22px) clamp(22px, 2.8vw, 42px);    
}
.frame-row:nth-child(even) .fr-open {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'cta kicker' 'cta line';
  text-align: right;
}
.fr-kicker {
  grid-area: kicker; align-self: end; margin: 0; white-space: nowrap;
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 21px); line-height: 1; letter-spacing: 0.01em; color: #fff;
  opacity: calc(max(0, (var(--p) - 0.45) / 0.55));                   
  transform: translateX(calc((1 - var(--p)) * -22px));              
}
.fr-line {
  grid-area: line; align-self: start; margin: 0; max-width: 50ch;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.86);
  opacity: var(--p); transform: translateX(calc((1 - var(--p)) * -28px));
}
.fr-cta {
  grid-area: cta; align-self: center; justify-self: end; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 13px 20px; background: var(--tsa-orange); color: #1a1a1a;
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: var(--p); transform: translateX(calc((1 - var(--p)) * 26px));    
}
.frame-row:nth-child(even) .fr-cta { justify-self: start; transform: translateX(calc((1 - var(--p)) * -26px)); }
.frame-row:nth-child(even) .fr-kicker { justify-self: end; transform: translateX(calc((1 - var(--p)) * 22px)); }
.frame-row:nth-child(even) .fr-line { justify-self: end; transform: translateX(calc((1 - var(--p)) * 28px)); }
.fr-arrow { display: inline-block; transition: transform 280ms var(--ease); }
.frame-row:hover .fr-arrow, .frame-row:focus-visible .fr-arrow { transform: translateX(4px); }

 
.no-js .frame-row { --p: 0 !important; }
.no-js .fr-open { display: none; }

 
@media (max-width: 820px) {
  .frame-row, .frame-row:nth-child(even) {
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    min-height: 132px; --p: 1; grid-template-columns: none; transition: none;
    padding: 18px 52px 18px clamp(20px, 5vw, 28px);    
  }
  .fr-frame, .frame-row:nth-child(even) .fr-frame { position: absolute; inset: 0; width: 100%; margin: 0; }
  .fr-img { object-position: var(--pos-open, 50% 50%); transition: none; }
  .fr-scrim, .frame-row:nth-child(even) .fr-scrim {
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 56%, rgba(0,0,0,0.2) 100%) !important;
  }
  .fr-text { position: relative; z-index: 2; inset: auto; padding: 0; }
  .fr-text::before { display: none; }
  .fr-label { opacity: 1; color: #fff; font-size: clamp(22px, 6vw, 28px); }
  .fr-fill { display: none; }
  .fr-open, .frame-row:nth-child(even) .fr-open {
    position: relative; inset: auto; z-index: 3; display: block; padding: 0; text-align: left;
  }
  .fr-line, .fr-cta { opacity: 1; transform: none; }
  .fr-kicker { display: none; }                       
  .fr-cta { display: none; }
  .frame-row::after {                                 
    content: '\2192'; position: absolute; z-index: 4; top: 50%; right: 18px; transform: translateY(-50%);
    font-size: 20px; color: var(--tsa-orange); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frame-row { transition: none !important; }
  .fr-img, .fr-arrow { transition: none !important; }
  .frame-row:hover .fr-img, .frame-row:focus-visible .fr-img { object-position: var(--pos-open, 50% 50%); }
}