/* 
 * Looking for a frontend developer who can  
 * realize ideas (like this one) into optimized
 * responsive designs? 
 * https://www.linkedin.com/in/fabriziocalderan/
 * 
 * This demo is an attempt to code a CSS-only replica 
 * of the scroll effects on https://www.alpenite.com/en/
 */


 *,*::before,*::after { box-sizing: border-box; }

 .herotext{
    font-size: 2em;
   
}
 :root { 
    --items: min(30rem, 80vw);
    --color-base: #181213;
    scroll-timeline: --page block;  
    
    @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
    }
 }
 
 body {
    font: 300 1rem/1.33 "Helvetica";
    color: var(--color-base);
    display: grid;
    overflow-x: hidden;
 }
 
 img {
    max-inline-size: 100%;
    block-size: auto;
 }
 
 hr[id] {
    border: 0;
    margin: 0;
 }
 
 
 /* animations */
 
 @keyframes clip {  
    to { transform: scale(1.75); } 
 }
 @keyframes scroll { 
    to { translate: calc((var(--items) * -3) + 15vw) 0; }
 }
 @keyframes moveup {
     to { transform: translateY(var(--moveup)); }
 }
 @keyframes reveal {
     85%, 100% { opacity: 1 }
     100% { transform: translateY(0);  }
 }
 
 
 body > svg {
    block-size: 0;
    inline-size: 0;
 
    clipPath {
       transform-origin: 
          calc(50vw * var(--dpr, 1)) 
          calc(50vh * var(--dpr, 1));
       
       /* On retina displays the transform-origin 
        * for the clipPath is bugged (opened an issue on
        * https://issues.chromium.org/issues/366293477)
        * so I need to approximately detect your pixel 
        * density with a list of "common" values.
        */
       @media (min-resolution: 1.5dppx)  { --dpr: 1.5;  }
       @media (min-resolution: 2dppx)    { --dpr: 2;    }
       @media (min-resolution: 2.4dppx)  { --dpr: 2.4;  }
       @media (min-resolution: 2.75dppx) { --dpr: 2.75; }
       @media (min-resolution: 3dppx)    { --dpr: 3;    }
       @media (min-resolution: 3.5dppx)  { --dpr: 3.5;  }
       @media (min-resolution: 4dppx)    { --dpr: 4;    }
       
       transform: scale(0);
       animation: linear clip 1 forwards;
       animation-timeline: --page;
       animation-range: entry 10dvb exit 100dvb;   
    }
 }
 
 
 
 /* header */
 
 header {
    position: fixed;
    z-index: 1;
    inset: 0 0 auto 0;
    background: #fff;
    
    > div {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem 2rem;
       margin: 0 10vw;
       border-bottom: 1px solid;
       padding-block: 2rem;
    }
    
    svg {
       inline-size: 8rem;
    }
 
    ul {
       display: flex;
       gap: 2.5rem;
       
       @media (width < 48rem) {
          display: none;
       }
       
       :any-link {
          font-weight: 300;
          font-size: 1.25rem;
          color: inherit;
          text-decoration: none;
       }
    }
 }
 
 
 /* general sections style */
 section {
    padding-block: 7dvb;
    
    h2 {
       font-size: clamp(3rem, 6vw, 6rem);
       line-height: 1;
       font-weight: 300;
       text-shadow: 0 0 1px currentColor;
    }
    
    h3 {
       margin-block: 1rem;
       font-size: clamp(1.6rem, 2.5vw, 2.5rem);
       font-weight: 200;
    }
 
    p {
       font-size: 1.1rem;
       line-height: 1.5;
    }   
 }
  
 
 /* general hero style */
    
 .hero {
    min-block-size: 100dvb;
    
    
    @supports (animation-timeline: view()) {  
       block-size: 100dvb;
       inline-size: 100vw;
       position: sticky;
       top: 0;
       grid-area: 1 / 1;
       
       --moveup: -100dvb;
       animation: linear moveup 1 forwards;
       animation-timeline: --page;
       animation-range: entry 200dvb entry 300dvb;  
       
       /* give enough room to run scroll-animations
        * so the main element is not hidden
        */
       ~ main {
          margin-block-start: 200dvb;
       }
    }
 
    
    h2 {
       font-size: clamp(2.5rem, 8vw, 8rem);
       font-weight: 320;
       text-shadow: none;
       max-inline-size: 12ch;
    }
 
 
    > div  {
       block-size: 100%;
       display: grid;
       align-items: center;     
       margin-inline: 10vw;
    }
    
    
    :any-link {
       --hover: 0;
       background-color: rgba(0, 72, 90, var(--hover));
       transition: all .33s;
       &:hover {
          color: #fff;
          border-color: transparent;
          --hover: 1;
       }
    }
    
    
    [href^="#"] {
       
       position: absolute;
       border-radius: 50%;
       border: 0;
       bottom: 3rem;
       left: calc(50% - 2rem);
       block-size: 4rem;
       padding: .75rem;
       aspect-ratio: 1;
       color: inherit;
       
       @media (prefers-reduced-motion: no-preference) {
          --moveup: -1rem;
          animation: moveup 1s 
             cubic-bezier(.5,0,1,.5) infinite alternate;
          
          &:hover {
             animation-play-state: paused;
          }
       }
       @supports (not (animation-timeline: view())) { 
          display: none;      
       }
 
    }
    
 
    svg {
       transform: rotateZ(.25turn);
       inline-size: 100%;
       aspect-ratio: 1;
       fill: currentColor;
    }
    
    .hero__content.active ~ .target-text {
        color: white;
        transition: color 0.3s ease-in-out;
    }

    .hero__content {
       display: flex;
       align-items: start;
       flex-direction: column;
       gap: 2rem;
    }
 
    :where(:any-link) {
       --hover: 0;
       color: inherit;
       text-decoration: none;
       border-radius: 1.5rem;
       padding: .75rem 2rem;
       font-size: 92%;
       letter-spacing: 0;
       border: 1px solid currentColor;
    }
 }
 
    
 
 /* 2nd hero hidden */   
 #shape-the-future {
 
    color: #f6f6f6;
    background-color : black;

    
    
    @supports (animation-timeline: view()) {  
       clip-path: url("#blob");
    }
    
    > div {
       gap: 10vw;
       
       @supports (animation-timeline: view()) {  
          grid-template-columns: 55vw auto;
       
          translate: 0 0;
          will-change: translate;
          animation: ease-out scroll 1 forwards;
          animation-timeline: --page;
          animation-range: entry 100dvb entry 200dvb;  
       }
    } 
 
    ul {
       display: flex;
       block-size: calc(100dvb - 10rem);
       
       @supports (not (animation-timeline: view())) {  
          border-inline-end: 1px #fff solid;
          block-size: auto;
          
          @media (width < 40rem) {
             flex-direction: column;
             border-inline: 0;
          }
       }
    }
    
    li {
       
       flex: 1;
       display: flex;
       align-items: center;
       padding-inline: 2.5rem;
       border-inline-start: 1px #fff solid;
       inline-size: var(--items);
       
       h3, p { text-align: left; }
       
       span:has(img), img {  
          max-block-size: 30dvmin;
       }
       
       @media (width < 48rem) {
          span:has(img), img { display: none; }
       }
       
       @supports (not (animation-timeline: view())) {
          inline-size: auto;
          h3, p { text-align: center; }
          
          @media (width < 40rem) {
             border-inline: 0;
             
             &:not(:last-child) {
                padding-block-end: 3rem;
                border-block-end: 1px #fff solid;
             }
          }
       }
    }  
 }
 
 
 main {
  
    section {
       min-block-size: 100dvb;
       
       @media (prefers-reduced-motion: no-preference) {
          opacity: 0;
          transform: translateY(6rem);
          animation: ease-out reveal 1 forwards;
          animation-timeline: view();
          animation-range: cover 10% cover 30%;
       }      
       
       > div {
          padding-inline: 10vw;
       }
    }
 
    .news {
       margin-block-start: 5dvb;
    
       li {
          padding-block: 2dvb;
          border-bottom: 1px solid;
          container: article / inline-size;
          --hover: 0;
          &:hover {
             --hover: 1;
          }
       }
 
       article {
          position: relative;
          display: grid;
          grid-template-columns: minmax(15vw, 22rem) auto;
          @container article (width <= 48rem) {
             grid-template-columns: 1fr;
          }
          
          align-items: center;
          gap: 2rem;
          opacity: calc(0.7 + (var(--hover) * 0.3));
          transition: opacity .33s;
 
       }
 
       div {
          aspect-ratio: 1.8 / 1;
          overflow: hidden;
          border-radius: 1rem;
          inline-size: 100%;
          
          @container article (width <= 48rem) {
             display: none;
          }
 
          img {
             object-fit: cover;
             block-size: 100%;
             inline-size: 100%;
          }
       }
 
       :any-link {
          display: grid;
          grid-template: auto auto / 1fr minmax(2.5rem, 6cqi);
          gap: 1rem min(5vw, 5rem);
          justify-content: space-between;
          align-items: center;
          color: inherit;
          text-decoration: none;
 
          [itemprop="author"] {
             grid-area: 1 / 1 / 2 / 3;
             font-size: 1rem;
             line-height: 1.33;
             color: #847c79;
             flex: 1 0 100%;
 
          }
 
          [itemprop="name"] {
             grid-area: 2 / 1 / 3 / 2;
             flex-wrap: nowrap;
             font-size: clamp(1.35rem, 2.6vw, 2.1rem);
             line-height: 1.33;
          }
 
          &:hover [itemprop="name"] {
             text-decoration: underline;
          }
 
          &::before {
             content: "";
             position: absolute;
             inset: 0;
          }
       }
 
       svg {
          grid-area: 1 / 2 / 3 / 3;
          aspect-ratio: 1;
          padding: .75rem;
          inline-size: 100%;
          border-radius: 50%;
          border: 2px solid;
          clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%);
          color: #645c59;
          fill: currentColor;
          transition: transform .33s;
          transform: rotateZ(calc(var(--hover) * .25turn));
       }
    }
 }
 
 
 
 
 /* show header on scrollup and hide on scrolldown  
  * original demo: https://codepen.io/fcalderan/pen/LYKwyyd
  */
 
 @property --scroll-direction {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 @property --scroll {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 @property --scroll-delayed {
     syntax: "<number>";
     inherits: true;
     initial-value: 0;
 }
 
 
 @keyframes adjust-pos {
     to {
         --scroll: 10000;
         --scroll-delayed: 10000;
     }
 }
 
 :root {
     animation: adjust-pos linear both;
     animation-timeline: scroll(root);
    
 }
 
 body {
    transition: --scroll-delayed .55s linear;
    --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
    --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
    --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
 }
 
 header {
    transition: transform .5s 0s;
    transform: translateY(var(--translate));
    background: #333C42;
 
    
    @container style(--scroll-direction: 0) {
       transition-delay: calc(infinity * 1s);  
    }
 
    @container style(--scroll-direction: -1) {
       --translate: 0;
    }
 
    @container style(--scroll-direction: 1) { 
       --translate: calc(-100% - 2px);
    }    
 }

/* nav section  */

 .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: fixed;
    width: calc(100% - 20px);
    top: 0;
    left: 10px;
    right: 10px;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 200px;  /* Adjust size as needed */
}

.nav-links {
    flex: 1;  /* Allows centering */
    display: flex;
    justify-content:space-evenly;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: black;
    font-size: 16px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.auth-buttons button {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}


.login {
    background: transparent;
    border: 1px solid black;
}

.register {
    background: black;
    color: white;
    border-radius: 10px;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* show warning */
 
 .warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-content: center;
    font-size: 2rem;
    
    p {
       position: relative;
       background: #fff;
       padding: 3rem;
       font-weight: 400;
       border: 3px rgba(223, 151,132) solid;
       border-radius: 1rem;
       inline-size: min(45rem, 85vw);
       box-shadow: 0 0 0 50vmax rgba(131, 163, 172, .7);
       -webkit-background-clip: text;
       color: transparent;
       background-image:  linear-gradient(125deg, 
       rgb(131, 163, 172), rgba(223, 151,132));
       
       &::before {
          content: "⚠️" / "warning!";
          position: absolute;
          inset: 0;
          z-index: -1;
          background: #fff;
       }
    }
 
 }
 
 body:hover .warning {
    @supports (not (animation-timeline: view())) {
       display: grid;
    } 
 }
 
 
 /* fix images */
 span:has(> img) {
    aspect-ratio: 86 / 100;
    display: block;
    overflow: hidden;
 
    img {
       inline-size: 115%;
       max-inline-size: 115%;
    }
 }

 #cd-timeline {
    position: relative;
    padding: 2em 0;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  #cd-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    height: 100%;
    width: 4px;
    background: black;
  }
  
  @media only screen and (min-width: 1170px) {
    #cd-timeline {
      margin-top: 3em;
      margin-bottom: 3em;
    }
  
    #cd-timeline::before {
      left: 50%;
      margin-left: -2px;
    }
  }
  .cd-timeline-block {
    position: relative;
    margin: 2em 0;
  }
  
  .cd-timeline-block:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
  
  @media only screen and (min-width: 1170px) {
    .cd-timeline-block {
      margin: 4em 0;
    }
  
    .cd-timeline-block:first-child {
      margin-top: 0;
    }
  
    .cd-timeline-block:last-child {
      margin-bottom: 0;
    }
  }
  .cd-timeline-img {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px black, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  }
  
  .cd-timeline-img {
    background: black;
  }
  
  @media only screen and (min-width: 1170px) {
    .cd-timeline-img {
      width: 30px;
      height: 30px;
      left: 50%;
      margin-left: -15px;
      margin-top: 15px;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }
  }
  .cd-timeline-content {
    position: relative;
    margin-left: 60px;
    margin-right: 30px;
    background: black;
    border-radius: 10px;
    padding: 1em;
  }

  .cd-timeline-content .timeline-content-info i {
    margin-right: 5px;
  }
  .cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date {
    width: calc(50% - 2px);
    display: inline-block;
  }
  @media (max-width: 500px) {
    .cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date {
      display: block;
      width: 100%;
    }
  }
  .cd-timeline-content .content-skills {
    font-size: 12px;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cd-timeline-content .content-skills li {
    background: #333C42;
    border-radius: 2px;
    display: inline-block;
    padding: 2px 10px;
    color: rgba(255, 255, 255, 0.7);
    margin: 3px 2px;
    text-align: center;
    flex-grow: 1;
  }
  
  .cd-timeline-content:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .cd-timeline-content h2 {
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .cd-timeline-content p, .cd-timeline-content .cd-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-size: 0.8125rem;
  }
  
  .cd-timeline-content .cd-date {
    display: inline-block;
  }
  
  .cd-timeline-content p {
    margin: 1em 0;
    line-height: 1.6;
  }
  
  .cd-timeline-content::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #333C42;
  }
  
  @media only screen and (min-width: 768px) {
    .cd-timeline-content h2 {
      font-size: 20px;
      font-size: 1.25rem;
    }
  
    .cd-timeline-content p {
      font-size: 16px;
      font-size: 1rem;
    }
  
    .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
      font-size: 14px;
      font-size: 0.875rem;
    }
  }
  @media only screen and (min-width: 1170px) {
    .cd-timeline-content {
      color: white;
      margin-left: 0;
      padding: 1.6em;
      width: 36%;
      margin: 0 5%;
    }
  
    .cd-timeline-content::before {
      top: 24px;
      left: 100%;
      border-color: transparent;
      border-left-color: #333C42;
    }
  
    .cd-timeline-content .cd-date {
      position: absolute;
      width: 100%;
      left: 122%;
      top: 6px;
      font-size: 16px;
      font-size: 1rem;
    }
  
    .cd-timeline-block:nth-child(even) .cd-timeline-content {
      float: right;
    }
  
    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
      top: 24px;
      left: auto;
      right: 100%;
      border-color: transparent;
      border-right-color: #333C42;
    }
  
    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
      float: right;
    }
  
    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
      left: auto;
      right: 122%;
      text-align: right;
    }
  }
  .timelineTitle{
    margin-top: 10%;
    margin-left: 5%;
    font-size: 3rem;
  }
  .timelineP{
    margin-top: 1%;
    margin-left: 5%;
    margin-right: 5%;
  }


  footer {
    text-align: center;
    padding: 10px;
    background: black;
    color: white;
    font-size: 16px;
    position: relative;
    bottom: 0;
    width: 100%;
    opacity: 0;
    height:150%;
    animation: fadeIn 1s ease-in-out forwards;
 }

 @keyframes fadeIn {
    from {
       opacity: 0;
       transform: translateY(20px);
    }
    to {
       opacity: 1;
       transform: translateY(0);
    }
 }
 .fp{
    margin-top: 2%;
 }