<!-- Full-width rows -->
<div class="row"><div class="panel p1"><div class="p-cat">Architecture</div><div class="p-num">01</div><div class="p-cap">Vertical ascent, horizontal ambition — form in tension with itself</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p2"><div class="p-cat">Landscape</div><div class="p-num">02</div><div class="p-cap">Where fog meets stone and neither gives way</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p3"><div class="p-cat">Portrait</div><div class="p-num">03</div><div class="p-cap">Light finds its own angles, always</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p4"><div class="p-cat">Aerial</div><div class="p-num">04</div><div class="p-cap">Patterns visible only from above, invisible to those who live inside them</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p5"><div class="p-cat">Abstract</div><div class="p-num">05</div><div class="p-cap">Form without function. Beauty without purpose. Both are enough.</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p6"><div class="p-cat">Seascape</div><div class="p-num">06</div><div class="p-cap">Where the tide forgets itself in the sound of its own return</div></div></div>

<div class="gap-lg"></div>

<!-- 3-column grid section with same clips -->
<div class="cp-3">
  <div class="row"><div class="panel p2"><div class="p-cat">Fauna</div><div class="p-cap">Silent mid-flight</div></div></div>
  <div class="row"><div class="panel p5"><div class="p-cat">Mineral</div><div class="p-cap">Crystalline structure</div></div></div>
  <div class="row"><div class="panel p1"><div class="p-cat">Nocturne</div><div class="p-cap">After the city sleeps</div></div></div>
</div>

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#060606;overflow-x:hidden}

/* Full-width panels (one per row) */
.row{
  width:100%;overflow:hidden;position:relative;
  margin-bottom:0;
}
.panel{
  width:100%;height:52vh;min-height:280px;
  display:flex;align-items:flex-end;
  padding:2.5rem 5vw;position:relative;overflow:hidden;
}
.panel::before{content:'';position:absolute;inset:0;z-index:0}

/* Atmospheric backgrounds */
.p1{background:#0E0A1C}
.p1::before{background:radial-gradient(ellipse at 70% 30%,rgba(140,60,220,0.4),rgba(80,20,160,0.2) 45%,transparent 70%)}
.p2{background:#08150E}
.p2::before{background:radial-gradient(ellipse at 25% 60%,rgba(20,170,110,0.42),rgba(10,100,60,0.15) 45%,transparent 70%)}
.p3{background:#160A08}
.p3::before{background:radial-gradient(ellipse at 55% 35%,rgba(210,70,50,0.4),rgba(140,30,20,0.2) 45%,transparent 70%)}
.p4{background:#080E18}
.p4::before{background:radial-gradient(ellipse at 38% 65%,rgba(40,100,220,0.42),rgba(20,60,160,0.15) 45%,transparent 70%)}
.p5{background:#141008}
.p5::before{background:radial-gradient(ellipse at 65% 45%,rgba(210,140,30,0.4),rgba(160,90,10,0.2) 45%,transparent 70%)}
.p6{background:#081418}
.p6::before{background:radial-gradient(ellipse at 42% 55%,rgba(20,170,210,0.38),rgba(10,100,160,0.18) 45%,transparent 70%)}

/* Clip-path reveal states */

/* 1: bottom-up wipe */
.row:nth-child(1) .panel{
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(1).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* 2: horizontal left-to-right */
.row:nth-child(2) .panel{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(2).in .panel{clip-path:inset(0 0% 0 0)}

/* 3: radial circle burst from center */
.row:nth-child(3) .panel{
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(3).in .panel{clip-path:circle(80% at 50% 50%)}

/* 4: top-down drop */
.row:nth-child(4) .panel{
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(4).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* 5: right-to-left */
.row:nth-child(5) .panel{
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(5).in .panel{clip-path:inset(0 0 0 0%)}

/* 6: inset zoom from center outward */
.row:nth-child(6) .panel{
  clip-path:inset(50% 50%);
  transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(6).in .panel{clip-path:inset(0% 0%)}

/* 3-column grid section */
.cp-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;
  padding:0.8rem 0;
}
.cp-3 .row{margin-bottom:0}
.cp-3 .panel{height:40vh;min-height:220px}

/* Text inside panels */
.p-cat{
  position:absolute;top:1.75rem;left:5vw;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);z-index:2;
  opacity:0;transition:opacity 0.5s ease 0.95s;
}
.row.in .p-cat{opacity:1}

.p-num{
  position:absolute;top:1.75rem;right:5vw;
  font-family:'Space Mono',monospace;font-size:11px;
  color:rgba(255,255,255,0.15);z-index:2;
  opacity:0;transition:opacity 0.5s ease 1s;
}
.row.in .p-num{opacity:1}

.p-cap{
  font-family:'DM Serif Display',serif;font-style:italic;
  font-size:clamp(20px,2.4vw,36px);
  color:rgba(255,255,255,0.9);
  position:relative;z-index:2;
  opacity:0;transform:translateY(12px);
  transition:opacity 0.65s ease 0.88s,transform 0.65s ease 0.88s;
  max-width:700px;line-height:1.3;
}
.row.in .p-cap{opacity:1;transform:translateY(0)}

/* section gap */
.gap{height:2px;background:#111}
.gap-lg{height:5rem}

/* 3-col panel text size */
.cp-3 .p-cap{font-size:clamp(16px,1.6vw,24px)}
.cp-3 .p-cat{left:1.5rem}
.cp-3 .p-num{right:1.5rem}

const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
    io.unobserve(e.target);
  });
},{threshold:0.15});
document.querySelectorAll('.row').forEach(el=>io.observe(el));