/* ==========================
   PALTN
   HOUSE OF RESTRAINT
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{

    font-family:'Inter',sans-serif;
    background:#F5F1E8;
    color:#111;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

}

/* ==========================
   Moving Sunlight
========================== */

.sunlight{

    position:absolute;

    width:180%;
    height:180%;

    background:
    linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,.18) 55%,
    transparent 70%
    );

    animation:sunlight 28s linear infinite;

    pointer-events:none;

}

@keyframes sunlight{

0%{
transform:translateX(-55%) translateY(-8%) rotate(0deg);
}

100%{
transform:translateX(35%) translateY(8%) rotate(1deg);
}

}

/* ==========================
 Grain Texture
========================== */

.grain{

position:absolute;
inset:0;

opacity:.045;

background-image:url("assets/grain.png");

background-size:350px;

mix-blend-mode:multiply;

pointer-events:none;

}

/* ==========================
Hero
========================== */

.hero{

position:relative;

z-index:2;

width:min(760px,90%);

text-align:center;

animation:fadeUp 2s ease;

}

.logo{

width:250px;

margin-bottom:5px;

opacity:0;

animation:logoReveal 2.5s forwards;

animation-delay:.5s;

}

.house{

font-size:.8rem;

letter-spacing:8px;

font-weight:500;

margin-bottom:32px;

text-transform:uppercase;

opacity:0;

animation:fadeIn 1.8s forwards;

animation-delay:1.5s;

}

h1{

font-family:'Cormorant Garamond',serif;

font-size:4rem;

font-weight:500;

line-height:1.1;

margin-bottom:40px;

opacity:0;

animation:fadeIn 2s forwards;

animation-delay:2.1s;

}

.description{

font-size:1rem;

line-height:1.9;

max-width:620px;

margin:auto;

color:#555;

opacity:0;

animation:fadeIn 2s forwards;

animation-delay:2.8s;

}

.crafted{

margin-top:65px;

font-family:'Cormorant Garamond',serif;

font-size:1.25rem;

letter-spacing:2px;

opacity:0;

animation:fadeIn 2s forwards;

animation-delay:3.5s;

}

/* ==========================
Social Links
========================== */

.socials{

margin-top:70px;

display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

opacity:0;

animation:fadeIn 2s forwards;

animation-delay:4s;

}

.socials a{

text-decoration:none;

color:#111;

font-size:.92rem;

letter-spacing:2px;

transition:.35s;

position:relative;

}

.socials a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;

height:1px;

background:#111;

transition:.35s;

}

.socials a:hover{

letter-spacing:3px;

}

.socials a:hover::after{

width:100%;

}

/* ==========================
Animations
========================== */

@keyframes logoReveal{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================
Responsive
========================== */

@media(max-width:900px){

.logo{

width:120px;

}

h1{

font-size:2.6rem;

}

.description{

font-size:.95rem;

}

.socials{

gap:24px;

flex-direction:column;

}

}

@media(max-width:500px){

.house{

letter-spacing:5px;

font-size:.72rem;

}

h1{

font-size:2rem;

}

.description{

font-size:.9rem;

line-height:1.8;

}

.crafted{

font-size:1.1rem;

}

}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("assets/grain.jpeg") repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
}