@charset "utf-8";
body{
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 20px;
    color: #ffffff;
}

main h2{
    font-family: "Galindo", sans-serif;
    text-align: center;
    font-size: 40px;
    letter-spacing: .05em;
    margin-bottom: 80px;
}

.subtitle {
    margin-top: 15px;
    font-family: "Galindo", sans-serif;
    font-size: 26px;
    margin-bottom: 10px;
}

header{
    background: url(../images/title.png) no-repeat right center/cover;
}

header .innerWrap{
    height: 650px;
    position: relative;
}

header nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;

    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

header nav ul{
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin: 10px auto;
    padding: 5px 20px;
    color: #fed8f0;
}

header nav ul li:first-child {
    margin-right: auto; 
}

header nav ul li:nth-child(4) a {
    font-family: "Galindo", sans-serif;
    color: #ff4da6; 
}

header nav ul li {
    margin-left: 20px; 
}

header nav ul li a:hover{
    text-decoration: underline;
}

.galindo-regular {
  font-family: "Galindo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bricolage-grotesque {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


.innerWrap{
    width: 1240px;
    margin: 0 auto;
    padding: 80px 20px 0;
}


.introSec {
    position: relative;
    color: #fbfaf7;
    text-align: center;
    overflow: clip;
}

.introSec::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
    pointer-events: none;
}

.introSec > * {
    position: relative;
    z-index: 2;
}

.introSec::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    pointer-events: none;
    z-index: 3;
}

.introVideo {
    max-width: 1200px;
    margin: 0 auto;
}

.introVideo video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


.introSec p {
    line-height: 1.75;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    padding-bottom: 50px;
}


.gameloopSec{
    background-color: #33236c;
    padding-bottom: 120px;
}

.gameloopText {
    flex: 1;
    padding: 0px 200px;
    margin-bottom: 40px;
    transform: rotate(-1deg);
}

.gameloopText img, 
.gameloopText video {
    width: 100%;
    height: auto;
    display: block;
    padding: 10px 0px;
    border-radius: 28px;
}

.gameloopText p {
    line-height: 1.6;
}


.scoreSec{
    background-color: #572d7b;
    padding-bottom: 120px;
    color: rgba(255, 255, 255, 0.95);
}

.scoreContainer {
    display: flex;
    align-items: flex-start; /* aligns top edges */
    gap: 20px;               /* space between image and text */
    margin: 40px 0;
}

.scoreContainer img,
.scoreContainer video {
    width: 420px;            /* square size */
    height: auto;
    object-fit: cover;       /* crops nicely if image isn't square */
    border-radius: 8px;      /* optional, for softer edges */
}

.scoreText {
    flex: 1;
    transform: rotate(1deg);
}

.scoreText p {
    line-height: 1.6;
}


.bananaSec{
    background-color: #313a8e;
    padding-bottom: 120px;
    color: rgba(255, 255, 255, 0.95);

    position: relative;
    overflow: hidden;
}

.bananaContainer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0;
    flex-direction: row-reverse; /* <<< FLIPPED: media on right */
}

.bananaContainer img,
.bananaContainer video {
    width: 620px;
    height: auto;
    object-fit: cover;
    border-radius: 18px;
}

.bananaText {
    flex: 1;
    text-align: right;
    transform: rotate(-1deg);
}

.bananaText p {
    line-height: 1.6;
}

.bananaDecor {
    position: absolute;
    width: 50px;
    pointer-events: none;
    transform: rotate(-20deg);
}

.b1  { top:  4%;  left: 10%; transform: rotate(-20deg); }
.b2  { top: 18%;  left: 88%; transform: rotate(15deg); }
.b3  { top: 32%;  left: 12%; transform: rotate(-8deg); }
.b4  { top: 47%;  left: 92%; transform: rotate(25deg); }
.b5  { top: 60%;  left: 8%;  transform: rotate(-5deg); }

.b6  { top: 12%;  left: 90%; transform: rotate(10deg); }
.b7  { top: 27%;  left: 5%;  transform: rotate(-15deg); }
.b8  { top: 53%;  left: 95%; transform: rotate(30deg); }
.b9  { top: 72%;  left: 12%; transform: rotate(-12deg); }
.b10 { top: 88%;  left: 87%; transform: rotate(18deg); }

.b11 { top: 7%;   left: 93%; transform: rotate(-25deg); }
.b12 { top: 23%;  left: 14%; transform: rotate(12deg); }
.b13 { top: 38%;  left: 89%; transform: rotate(-10deg); }
.b14 { top: 51%;  left: 6%;  transform: rotate(22deg); }
.b15 { top: 66%;  left: 13%; transform: rotate(-6deg); }

.b16 { top: 15%;  left: 9%;  transform: rotate(5deg); }
.b17 { top: 29%;  left: 92%; transform: rotate(-18deg); }
.b18 { top: 44%;  left: 96%; transform: rotate(14deg); }
.b19 { top: 58%;  left: 7%;  transform: rotate(-9deg); }
.b20 { top: 79%;  left: 11%; transform: rotate(28deg); }

.b21 { top: 9%;   left: 90%; transform: rotate(-14deg); }
.b22 { top: 36%;  left: 5%;  transform: rotate(20deg); }
.b23 { top: 49%;  left: 88%; transform: rotate(-11deg); }
.b24 { top: 63%;  left: 94%; transform: rotate(17deg); }
.b25 { top: 82%;  left: 6%;  transform: rotate(-7deg); }




/* Animal Section */
.animalSec {
    background-color: #0f0e32;
    padding-bottom: 120px;
}

.animalSec p{
    text-align: center;
}

.animalTip {
    text-align: center;
    font-style: italic;
    padding-bottom: 80px;
}

.animalContainer {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    column-gap: 40px;
    row-gap: 0px;
    justify-content: center;
    justify-items: center;
}

.animalLayoutWrap {
    width: 250px;
}

.animalCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.animalImage {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.animalImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.animalInfo {
    position: relative;
    margin-top: -40px;
    padding-top: 40px;
    border-radius: 25px;
    background-color: #F1D3ED;
    overflow: hidden;

    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.animalInfo::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    border: 2px dotted #D0B0CC;
    pointer-events: none;
}

.animalName {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    transform: translateY(-50%);
    z-index: 2;

    font-family: "Galindo", sans-serif;
    font-size: 30px;
    padding: 8px 16px;
    text-align: center;

    color: #ffffff;
    background-color: #E94C90; 
}

.animalDetail {
    position: relative;
    padding: 50px 20px 20px;
    color: #000000;
    overflow-wrap: anywhere;
}

.animalCard:hover .animalInfo {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

.animalCard:hover .animalImage img {
    transform: scale(1.05);
}

.joy      { color: #EA4E92; font-weight: 700; }
.skill    { color: #BF8B00; font-weight: 700; }
.novelty  { color: #51B2DB; font-weight: 700; }
.yellow   { color: #EDD585; font-weight: 700; }

.joyCard .animalName {
    background-color: #EA4E92;
}

.skillCard .animalName {
    background-color: #EDD585;
    color: #000000;
}

.noveltyCard .animalName {
    background-color: #51B2DB;
}




.strategiesSec{
    background-color: #572d7b;
    padding-bottom: 120px;
    color: rgba(255, 255, 255, 0.95);
}

.strategiesContainer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0;
    transform: rotate(1deg);
}

.strategiesContainer video {
    width: 520px;
    height: 320px;
    object-fit: cover;
    border-radius: 8px;
}

.strategiesText {
    flex: 1;
}

.strategiesText p {
    line-height: 1.6;
}


.economySec{
    background-color: #313a8e;
    padding-bottom: 120px;

    position: relative;
    overflow: hidden;
}

.economyText {
    flex: 1;
    padding: 0px 200px;
    margin-bottom: 40px;
    transform: rotate(-1deg);
}

.economyText img, 
.economyText video {
    width: 100%;
    height: auto;
    display: block;
    padding: 10px 0px;
    border-radius: 28px;
}

.economyText p {
    line-height: 1.6;
}

.coinDecor {
    position: absolute;
    width: 50px;
    pointer-events: none;
    transform: rotate(-20deg);
}

.c1  { top: 3%;   left: 9%;   transform: rotate(12deg); }
.c2  { top: 11%;  left: 92%;  transform: rotate(-18deg); }
.c3  { top: 19%;  left: 6%;   transform: rotate(25deg); }
.c4  { top: 27%;  left: 88%;  transform: rotate(-7deg); }
.c5  { top: 34%;  left: 13%;  transform: rotate(16deg); }

.c6  { top: 42%;  left: 95%;  transform: rotate(-12deg); }
.c7  { top: 49%;  left: 5%;   transform: rotate(30deg); }
.c8  { top: 57%;  left: 89%;  transform: rotate(-22deg); }
.c9  { top: 65%;  left: 11%;  transform: rotate(9deg); }
.c10 { top: 72%;  left: 93%;  transform: rotate(-14deg); }

.c11 { top: 80%;  left: 7%;   transform: rotate(21deg); }
.c12 { top: 87%;  left: 97%;  transform: rotate(-10deg); }
.c13 { top: 6%;   left: 86%;  transform: rotate(28deg); }
.c14 { top: 14%;  left: 4%;   transform: rotate(-6deg); }
.c15 { top: 22%;  left: 91%;  transform: rotate(15deg); }

.c16 { top: 30%;  left: 12%;  transform: rotate(-19deg); }
.c17 { top: 38%;  left: 94%;  transform: rotate(23deg); }
.c18 { top: 46%;  left: 10%;  transform: rotate(-8deg); }
.c19 { top: 54%;  left: 96%;  transform: rotate(17deg); }
.c20 { top: 62%;  left: 8%;   transform: rotate(-4deg); }

.c21 { top: 70%;  left: 99%;  transform: rotate(26deg); }
.c22 { top: 78%;  left: 3%;   transform: rotate(-11deg); }
.c23 { top: 86%;  left: 87%;  transform: rotate(13deg); }
.c24 { top: 92%;  left: 6%;   transform: rotate(-16deg); }
.c25 { top: 96%;  left: 90%;  transform: rotate(7deg); }



.devSec{
    background-color: #0f0e32;
    padding-bottom: 120px;

    position: relative;
    overflow: hidden;
}

.devText {
    flex: 1;
    padding: 0px 200px;
    margin-bottom: 40px;
    transform: rotate(-1deg);
}

.devText img, 
.devText video {
    width: 100%;
    height: auto;
    display: block;
    padding: 10px 0px;
    border-radius: 28px;
}

.devText p {
    line-height: 1.6;
    margin-bottom: 25px;
}


.cusgaSec{
    background-color: #33236c;
    padding-bottom: 120px;
}

.cusgaText {
    flex: 1;
    padding: 0px 200px;
    margin-bottom: 40px;
}

.cusgaText img{
    width: 100%;
    height: auto;
    display: block;
}

.cusgaText.cusgaImages {
    position: relative;
    height: 620px;
}

.cusgaText.cusgaImages img {
    position: absolute;
    width: 35%;
    border: 6px solid #6f7ac9;
    border-radius: 18px;
    object-fit: cover;
}

.cusgaText.cusgaImages img:nth-child(1) {
    top: 0;
    left: 34%;
    transform: rotate(-6deg);
}

.cusgaText.cusgaImages img:nth-child(2) {
    top: 12%;
    right: 4%;
    transform: rotate(4deg);
}

.cusgaText.cusgaImages img:nth-child(3) {
    bottom: 14%;
    left: 10%;
    transform: rotate(3deg);
}

.cusgaText.cusgaImages img:nth-child(4) {
    bottom: 0;
    right: 10%;
    transform: rotate(-4deg);
}

.cusgaText.cusgaImages img:nth-child(5) {
    top: 16%;
    left: 22%;
    transform: rotate(2deg);
}

.cusgaText.cusgaImages img:nth-child(6) {
    top: 40%;
    right: 22%;
    transform: rotate(-3deg);
}

.cusgaText p {
    line-height: 1.6;
}

.cusgaFeedback p {
    padding-left: 85px;
    text-indent: -85px;
}



.devprocessSec {
    background-color: #0f0e32;
    padding-bottom: 120px;
}

.devprocessWrap2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.devprocessWrap1 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1;
    min-width: 0;
}

.devprocessWrap2 > .devprocessContainer {
    flex: 1.4;
    min-width: 0;
}

.devprocessContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #432d54;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-align: center;
}

.devprocessWrap1 .devprocessContainer { width: 100%; }

.devprocessContainer img,
.devprocessContainer video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.devprocessContainer p {
    margin-top: 12px;
    line-height: 1.6;
}

.linkImage {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.linkImage a {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, outline 0.2s ease;
}

.linkImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1; 
}

.linkImage a:hover img {
  transform: scale(1.08); 
}

.linkImage a:hover .shine {
    left: 120%;
}



footer {
    background-color: #ff4da6;
    color: #ffffff;
    padding: 14px 10px 20px;
    text-align: center;
}

/* Button */
.itchBtn {
    text-align: center;
}

.itchButton {
    background-color: #ff4da6;
    border: none;
    padding: 14px 32px;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
    color: white;

    transition: background-color 0.25s ease, 
                transform 0.25s ease;
}

.itchButton:hover {
    background-color: #3AA4F6;
    transform: translateX(6px); 
}


/* Parallax */
.gameloopSec::before{
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/main169.png) no-repeat center/cover;
    z-index: -1;
}

/*Animation*/
.zoom-wrap {
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease;
  cursor: zoom-in;
  border-radius: 10px;
}

.zoom-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center center;
  z-index: 2;
}

.zoom-wrap:hover {
  transform: scale(2);
  z-index: 10;
}

.zoom-wrap:hover img {
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  background-color: rgba(0,0,0,0.35);
}