/* ======= GLOBAL BASE ======= */
html,body{
  margin:0;padding:0;height:100%;width:100%;
  /* font-family:"Avenir Next Condensed","Helvetica Neue",Arial,sans-serif; */
  scroll-behavior:smooth;
  overflow-x:hidden;
  color:#222;
}

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Inter:wght@400;500;700&display=swap');

:root {
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
}

h1, h2, h3, .section-title {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

body, p, li, table {
  font-family: var(--font-body);
  line-height: 1.2;
}


/* BACKGROUND */
body{
  background: linear-gradient(315deg,#f8f5de 3%,#cc9880 30%,#cea0a0 60%,#b2b0d9 90%);
  animation: gradient 20s ease-in-out infinite;
  background-size:400% 400%;
}
@keyframes gradient{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}


/* Full section container */
.full-section {
  height: 100vh; /* full viewport */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* titles at top */
  align-items: center;
  position: relative;
  padding: 1rem;
  box-sizing: border-box;
}


/* Wide subsection */
.subsection-wide {
  width: 100%;
  max-width: 1170px;
  padding: 1rem;
  margin-top: 1rem;
  background: rgba(255,255,255,0.1); /* subtle background */
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

/* Columns subsection */
.subsection-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 1170px;
  box-sizing: border-box;
}


.subsection-columns .column {
  flex: 1 1 300px; /* grow, shrink, base width 300px */
  padding: 1rem;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  box-sizing: border-box;
  min-width: 250px;
}


/* Table styling */
.layer-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-family: inherit;
}
.layer-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.layer-table th,
.layer-table td {
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.08);
  text-align: left;
}
.layer-table thead th {
  background: rgba(0,0,0,0.04);
  font-weight: 700;
}

/* Responsive: stack rows on very small screens */
@media (max-width: 775px) {
  .layer-table,
  .layer-table thead,
  .layer-table tbody,
  .layer-table th,
  .layer-table td,
  .layer-table tr {
    display: block;
  }
  .layer-table thead { display: none; }
  .layer-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 0.5rem;
  }
  .layer-table td {
    border: none;
    padding: 0.35rem 0;
  }
  .layer-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  /* inject labels for accessibility/clarity on small screens */
  .layer-table tbody tr:nth-of-type(1) td:nth-of-type(1)::before { content: "Layer"; }
}
/* Table styling */


/* HERO CENTERING (only hero) */
.hero-centered{
  justify-content:center;  /* vertical center */
  align-items:center;      /* horizontal center */
  padding-top:0;
}

/* SCALE WRAPPER */
.scale-wrapper{
  display:inline-block;
  transform-origin: top center;
}

/* CENTER container (boards) */
.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* SPLITFLAP ROW & ELEMENTS */
.splitflap-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.splitflap{
  font-family:'Share Tech Mono', monospace;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  position:relative;
  min-width:50px;
  height:75px;
  line-height:84px;
  font-size:60px;
  text-align:center;
  color: yellow;
  perspective:500px;
}

/* halves */
.top{
  position:relative;height:50%;width:100%;
  background:#000;border-radius:10px 10px 0 0;border-bottom:1px solid #000;overflow:hidden;z-index:0;
}
div{ perspective:500px; }
.bottom{
  position:relative;height:100%;width:100%;margin-top:-75%;border-radius:10px;z-index:-1;
  background:#000;background-image:linear-gradient(rgba(0,0,0,0),#000);transform-origin:center;
}
.bottom:after{
  content:"";background-image:-webkit-linear-gradient(0deg, white 7%, black 7%, black 93%, white 93%, white 100%);
  display:block;height:1px;width:100%;position:absolute;top:50%;
}
.nextHalf{
  position:relative;height:50%;width:100%;margin-top:-150%;overflow:hidden;border-radius:10px 10px 0 0;z-index:2;
  background:#000;background-image:linear-gradient(#000, rgba(0,0,0,0));transform-origin:bottom;
}
.nextHalf:after{
  content:"";background-image:-webkit-linear-gradient(0deg, white 7%, black 7%, black 93%, white 93%, white 100%);
  display:block;height:2px;width:100%;position:absolute;bottom:0;
}
.nextFull{
  position:relative;height:100%;width:100%;background:#000;margin-top:-75%;border-radius:10px;z-index:-3;
}

/* FLIP ANIMATIONS */
.flip1{ animation: flip1 ease-in 1; animation-duration: var(--speed,0.3s); }
.flip2{ animation: flip2 ease-out 1; animation-duration: var(--speed,0.3s); }
@keyframes flip1{0%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}100%{transform:rotateX(90deg)}}
@keyframes flip2{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0deg)}}

/* SECTION ARROW */
.section-arrow{
  position:absolute; bottom:40px; right: 40px;
  font-size:48px; color:#7b525240; cursor:pointer;
  user-select:none; transition:transform .18s,opacity .18s;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;           /* circle width */
  height: 50px;          /* circle height */
  padding: 10px;
  background-color: #433b3b50; /* background color of the circle */
  border-radius: 20%;    /* makes it a perfect circle */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* shadow */
  transition: transform 0.2s ease; /* optional hover effect */

  opacity: 0;
  transform: scale(0.8);
  animation: fadeInArrow 0.6s ease forwards;
  animation-delay: 6s;
}

@keyframes fadeInArrow {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.section-arrow:hover{ transform:translateY(6px); opacity:0.95; }

/* RESPONSIVE */
@media (max-width:1400px){
  .splitflap{ font-size:48px; min-width:42px; height:65px; line-height:72px; }
}
@media (max-width:768px){
  .splitflap{ font-size:40px; min-width:36px; height:56px; line-height:64px; }
}
@media (max-width:480px){
  .splitflap{ font-size:32px; min-width:30px; height:50px; line-height:56px; }
  .section-arrow{ font-size:36px; bottom:14px; }
}
@media (max-height:1000px){
  .section-content{
    /* max-width: 100vw; */
    max-height: 100vh;  /* optional — lock to viewport height */
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 3vh;
  }
}


#scroll-container {
  overflow-y: auto;
  height: 100vh;
}