/* Premium vessel classes — animated technical archive */
.record#record{
  --record-line:0%;
  --record-shift:0px;
  --record-watermark-shift:0px;
  --record-image-shift:-55px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(8rem,12vw,12rem) 5vw clamp(7rem,10vw,10rem) 10vw;
  background:
    radial-gradient(circle at 18% 17%,rgba(46,88,124,.28),transparent 26%),
    linear-gradient(145deg,#07111f 0%,#09192a 52%,#050c15 100%);
  color:#f4f3ef;
}
.record#record:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:linear-gradient(rgba(155,192,214,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(155,192,214,.055) 1px,transparent 1px);
  background-size:25vw 25vw;
  mask-image:linear-gradient(115deg,#000,rgba(0,0,0,.65) 60%,transparent);
}
.record#record:after{
  content:"";
  position:absolute;
  z-index:-2;
  left:-20vw;
  top:-31vw;
  width:74vw;
  height:74vw;
  border:1px solid rgba(145,187,211,.15);
  border-radius:50%;
  box-shadow:0 0 0 10vw rgba(145,187,211,.024),0 0 0 20vw rgba(145,187,211,.016);
  transform:translate3d(var(--record-shift),0,0);
  transition:transform .16s linear;
}
.record-blueprint{position:absolute;inset:0;z-index:-1;pointer-events:none}
.record-blueprint i:nth-child(1){position:absolute;left:10vw;right:5vw;top:clamp(7rem,10vw,10rem);height:1px;background:linear-gradient(90deg,rgba(185,211,226,.38),rgba(185,211,226,.04))}
.record-blueprint i:nth-child(2){position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(185,211,226,.08),transparent)}
.record-blueprint i:nth-child(3){position:absolute;right:7vw;top:18%;width:8px;height:8px;border:1px solid rgba(183,211,226,.5);border-radius:50%;box-shadow:0 0 18px rgba(131,184,214,.5)}
.record-watermark{position:absolute;right:-.04em;top:27%;z-index:-1;color:transparent;-webkit-text-stroke:1px rgba(180,210,227,.038);font:900 clamp(10rem,22vw,28rem)/.8 'Montserrat',sans-serif;letter-spacing:-.1em;transform:translateX(var(--record-watermark-shift));user-select:none}
.record#record .section-label{left:4.5vw;top:clamp(8.5rem,12vw,12.5rem);color:rgba(218,231,238,.58)}
.record#record .section-label span{color:#718fff}
.record-head{max-width:1200px}
.record-head .eyebrow{margin-bottom:2rem;color:#9ab8c8}
.record-head h2{margin:0;color:#f4f2ed;font-size:clamp(3.6rem,7vw,8.3rem);line-height:.85;letter-spacing:-.075em}
.record-head h2 span,.record-head h2 em{display:inline-block;opacity:0;transform:translateY(50px);clip-path:inset(0 0 100% 0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.8,.22,1),clip-path 1.1s cubic-bezier(.16,.8,.22,1)}
.record-head h2 em{transition-delay:.14s;color:#f4f2ed!important}
.record.is-visible .record-head h2 span,.record.is-visible .record-head h2 em{opacity:1;transform:none;clip-path:inset(0)}
.record-head-meta{display:flex;align-items:center;gap:1.2rem;margin-top:3rem;color:rgba(207,223,232,.5);font:600 .62rem/1 'Inter',sans-serif;letter-spacing:.17em;text-transform:uppercase}
.record-head-meta i{display:block;width:0;height:1px;background:rgba(185,211,226,.38);transition:width 1.2s cubic-bezier(.16,.8,.22,1) .5s}
.record.is-visible .record-head-meta i{width:90px}
.record-progress-line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(4rem,7vw,7rem);border-top:1px solid rgba(185,211,226,.14)}
.record-progress-line i{position:absolute;left:0;top:-1px;width:var(--record-line);height:2px;max-width:100%;background:linear-gradient(90deg,#526dff,#8fa4ff);box-shadow:0 0 14px rgba(100,125,255,.6)}
.record-progress-line span{padding-top:1rem;color:rgba(184,207,220,.42);font:600 .58rem 'Inter',sans-serif;letter-spacing:.12em}
.record#record .record-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:1.5rem 0 0;border:1px solid rgba(185,211,226,.16);background:rgba(185,211,226,.16)}
.record#record .vessel-class{position:relative;min-height:430px;padding:1.5rem 1.5rem 1.8rem;border:0;border-right:1px solid rgba(185,211,226,.16);background:rgba(6,17,29,.94);opacity:0;transform:translateY(70px);clip-path:inset(16% 0 0);transition:opacity .75s ease,transform 1s cubic-bezier(.16,.8,.22,1),clip-path 1s cubic-bezier(.16,.8,.22,1),background .35s}
.record#record .vessel-class:nth-child(2){transition-delay:.1s}
.record#record .vessel-class:nth-child(3){transition-delay:.2s}
.record#record .vessel-class:nth-child(4){transition-delay:.3s;border-right:0}
.record#record.is-visible .vessel-class{opacity:1;transform:none;clip-path:inset(0)}
.record#record .vessel-class:hover{background:rgba(13,34,55,.98)}
.record#record .vessel-class>div{display:flex;justify-content:space-between;color:rgba(187,208,220,.5);font:600 .56rem/1.35 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.record#record .vessel-class>div b{color:#7894ff}
.vessel-index{display:block;margin-top:clamp(4rem,7vw,7rem);color:transparent;-webkit-text-stroke:1px rgba(171,204,222,.25);font:800 clamp(4.8rem,6vw,7.2rem)/.7 'Montserrat',sans-serif;letter-spacing:-.08em}
.record#record .vessel-class h3{margin:2rem 0 1rem;color:#f5f3ef;font-size:clamp(1.45rem,2vw,2.25rem);line-height:.96;letter-spacing:-.06em}
.record#record .vessel-class>p{min-height:8rem;margin:0;color:rgba(207,221,229,.62);font:400 .84rem/1.68 'Inter',sans-serif}
.record#record .vessel-class>small{display:block;padding-top:1.2rem;border-top:1px solid rgba(185,211,226,.14);color:#91abba;font:600 .55rem/1.3 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.record#record .record-visual{margin:clamp(4rem,7vw,7rem) 0 0;opacity:0;transform:translateY(65px);transition:opacity 1s ease .28s,transform 1.2s cubic-bezier(.16,.8,.22,1) .28s}
.record#record.is-visible .record-visual{opacity:1;transform:none}
.record-visual>div{position:relative;height:min(68vh,720px);overflow:hidden}
.record-visual>div:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,24,.05),rgba(5,14,24,.48))}
.record#record .record-visual img{display:block;width:100%;height:calc(100% + 110px);object-fit:cover;filter:saturate(.48) contrast(1.08);transform:translateY(var(--record-image-shift));will-change:transform}
.record#record .record-visual figcaption{display:flex;justify-content:space-between;padding-top:1.1rem;color:rgba(196,214,224,.52);font:600 .58rem/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:1050px){
  .record#record{padding-left:7vw;padding-right:7vw}
  .record#record .section-label{position:static;writing-mode:initial;transform:none;margin-bottom:3rem}
  .record#record .record-grid{grid-template-columns:1fr 1fr}
  .record#record .vessel-class:nth-child(2){border-right:0}
  .record#record .vessel-class:nth-child(-n+2){border-bottom:1px solid rgba(185,211,226,.16)}
}
@media(max-width:650px){
  .record#record{padding:6rem 6vw}
  .record-head h2{font-size:12vw;line-height:.91}
  .record#record .record-grid{grid-template-columns:1fr}
  .record#record .vessel-class{min-height:350px;border-right:0;border-bottom:1px solid rgba(185,211,226,.16)!important}
  .vessel-index{margin-top:3.5rem}
  .record#record .vessel-class>p{min-height:0;margin-bottom:2rem}
  .record-progress-line{display:none}
  .record-visual>div{height:54vh;min-height:360px}
  .record#record .record-visual figcaption{gap:1rem;line-height:1.5}
  .record-watermark{font-size:32vw}
}
@media(prefers-reduced-motion:reduce){
  .record-head h2 span,.record-head h2 em,.record#record .vessel-class,.record#record .record-visual{opacity:1;transform:none;clip-path:none;transition:none}
  .record#record:after,.record-watermark,.record#record .record-visual img{transform:none}
}